Skip to content

feat(core): render ARIA property bindings as attributes #62630

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
leonsenft wants to merge 3 commits into from
Closed

feat(core): render ARIA property bindings as attributes #62630

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c4c8b11
feat(core): render ARIA property bindings as attributes
leonsenft Jul 8, 2025
5c3344b
fixup! feat(core): render ARIA property bindings as attributes
leonsenft Jul 18, 2025
e69e3bf
fixup! feat(core): render ARIA property bindings as attributes
leonsenft Jul 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/compiler-cli/src/ngtsc/typecheck/src/dom.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {makeTemplateDiagnostic} from '../diagnostics';

import {TypeCheckSourceResolver} from './tcb_util';

const REGISTRY = new DomElementSchemaRegistry();
export const REGISTRY = new DomElementSchemaRegistry();
const REMOVE_XHTML_REGEX = /^:xhtml:/;

/**
Expand Down
21 changes: 3 additions & 18 deletions packages/compiler-cli/src/ngtsc/typecheck/src/type_check_block.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ import {
wrapForDiagnostics,
wrapForTypeChecker,
} from './diagnostics';
import {DomSchemaChecker} from './dom';
import {DomSchemaChecker, REGISTRY} from './dom';
import {Environment} from './environment';
import {astToTypescript, getAnyExpression} from './expression';
import {OutOfBandDiagnosticRecorder} from './oob';
Expand Down Expand Up @@ -1206,7 +1206,7 @@ class TcbDomSchemaCheckerOp extends TcbOp {

if (isPropertyBinding && binding.name !== 'style' && binding.name !== 'class') {
// A direct binding to a property.
const propertyName = ATTR_TO_PROP.get(binding.name) ?? binding.name;
const propertyName = REGISTRY.getMappedPropName(binding.name);

if (isTemplateElement) {
this.tcb.domSchemaChecker.checkTemplateElementProperty(
Expand Down Expand Up @@ -1418,21 +1418,6 @@ class TcbComponentNodeOp extends TcbOp {
}
}

/**
* Mapping between attributes names that don't correspond to their element property names.
* Note: this mapping has to be kept in sync with the equally named mapping in the runtime.
*/
const ATTR_TO_PROP = new Map(
Object.entries({
'class': 'className',
'for': 'htmlFor',
'formaction': 'formAction',
'innerHtml': 'innerHTML',
'readonly': 'readOnly',
'tabindex': 'tabIndex',
}),
);

/**
* A `TcbOp` which generates code to check "unclaimed inputs" - bindings on an element which were
* not attributed to any directive or component, and are instead processed against the HTML element
Expand Down Expand Up @@ -1481,7 +1466,7 @@ class TcbUnclaimedInputsOp extends TcbOp {
elId = this.scope.resolve(this.target);
}
// A direct binding to a property.
const propertyName = ATTR_TO_PROP.get(binding.name) ?? binding.name;
const propertyName = REGISTRY.getMappedPropName(binding.name);
const prop = ts.factory.createElementAccessExpression(
elId,
ts.factory.createStringLiteral(propertyName),
Expand Down
121 changes: 101 additions & 20 deletions .../test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/GOLDEN_PARTIAL.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,86 @@
/****************************************************************************************************
* PARTIAL FILE: aria_dom_properties.js
****************************************************************************************************/
import { Component } from '@angular/core';
import * as i0 from "@angular/core";
export class MyComponent {
constructor() {
this.disabled = '';
this.readonly = '';
this.label = '';
}
}
MyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: MyComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
<input [attr.aria-disabled]="disabled" [aria-readonly]="readonly" [ariaLabel]="label">
`, isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyComponent, decorators: [{
type: Component,
args: [{
template: `
<input [attr.aria-disabled]="disabled" [aria-readonly]="readonly" [ariaLabel]="label">
`,
}]
}] });

/****************************************************************************************************
* PARTIAL FILE: aria_dom_properties.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class MyComponent {
disabled: string;
readonly: string;
label: string;
static ɵfac: i0.ɵɵFactoryDeclaration<MyComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<MyComponent, "ng-component", never, {}, {}, never, never, true, never>;
}

/****************************************************************************************************
* PARTIAL FILE: aria_properties.js
****************************************************************************************************/
import { Component, Directive } from '@angular/core';
import * as i0 from "@angular/core";
class MyDir {
}
MyDir.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyDir, deps: [], target: i0.ɵɵFactoryTarget.Directive });
MyDir.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: MyDir, isStandalone: true, selector: "[myDir]", ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyDir, decorators: [{
type: Directive,
args: [{ selector: '[myDir]' }]
}] });
export class MyComponent {
constructor() {
this.disabled = '';
this.readonly = '';
this.label = '';
}
}
MyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: MyComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
<input myDir [attr.aria-disabled]="disabled" [aria-readonly]="readonly" [ariaLabel]="label">
`, isInline: true, dependencies: [{ kind: "directive", type: MyDir, selector: "[myDir]" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyComponent, decorators: [{
type: Component,
args: [{
template: `
<input myDir [attr.aria-disabled]="disabled" [aria-readonly]="readonly" [ariaLabel]="label">
`,
imports: [MyDir],
}]
}] });

/****************************************************************************************************
* PARTIAL FILE: aria_properties.d.ts
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class MyComponent {
disabled: string;
readonly: string;
label: string;
static ɵfac: i0.ɵɵFactoryDeclaration<MyComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<MyComponent, "ng-component", never, {}, {}, never, never, true, never>;
}

/****************************************************************************************************
* PARTIAL FILE: bind.js
****************************************************************************************************/
Expand Down Expand Up @@ -349,26 +432,25 @@ import * as i0 from "@angular/core";
export class ButtonDir {
}
ButtonDir.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: ButtonDir, deps: [], target: i0.ɵɵFactoryTarget.Directive });
ButtonDir.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: ButtonDir, isStandalone: false, selector: "button", inputs: { al: ["aria-label", "al"] }, ngImport: i0 });
ButtonDir.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: ButtonDir, isStandalone: false, selector: "button", inputs: { label: "label" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: ButtonDir, decorators: [{
type: Directive,
args: [{
selector: 'button',
standalone: false
standalone: false,
}]
}], propDecorators: { al: [{
type: Input,
args: ['aria-label']
}], propDecorators: { label: [{
type: Input
}] } });
export class MyComponent {
}
MyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: MyComponent, isStandalone: false, selector: "ng-component", ngImport: i0, template: '<button [title]="1" [attr.id]="2" [tabindex]="3" aria-label="{{1 + 3}}"></button>', isInline: true, dependencies: [{ kind: "directive", type: ButtonDir, selector: "button", inputs: ["aria-label"] }] });
MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: MyComponent, isStandalone: false, selector: "ng-component", ngImport: i0, template: '<button [title]="1" [attr.id]="2" [tabindex]="3" label="{{1 + 3}}"></button>', isInline: true, dependencies: [{ kind: "directive", type: ButtonDir, selector: "button", inputs: ["label"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyComponent, decorators: [{
type: Component,
args: [{
template: '<button [title]="1" [attr.id]="2" [tabindex]="3" aria-label="{{1 + 3}}"></button>',
standalone: false
template: '<button [title]="1" [attr.id]="2" [tabindex]="3" label="{{1 + 3}}"></button>',
standalone: false,
}]
}] });
export class MyMod {
Expand All @@ -386,9 +468,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDE
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class ButtonDir {
al: any;
label: any;
static ɵfac: i0.ɵɵFactoryDeclaration<ButtonDir, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<ButtonDir, "button", never, { "al": { "alias": "aria-label"; "required": false; }; }, {}, never, never, false, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<ButtonDir, "button", never, { "label": { "alias": "label"; "required": false; }; }, {}, never, never, false, never>;
}
export declare class MyComponent {
static ɵfac: i0.ɵɵFactoryDeclaration<MyComponent, never>;
Expand All @@ -408,26 +490,25 @@ import * as i0 from "@angular/core";
export class ButtonDir {
}
ButtonDir.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: ButtonDir, deps: [], target: i0.ɵɵFactoryTarget.Directive });
ButtonDir.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: ButtonDir, isStandalone: false, selector: "button", inputs: { al: ["aria-label", "al"] }, ngImport: i0 });
ButtonDir.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: ButtonDir, isStandalone: false, selector: "button", inputs: { label: "label" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: ButtonDir, decorators: [{
type: Directive,
args: [{
selector: 'button',
standalone: false
standalone: false,
}]
}], propDecorators: { al: [{
type: Input,
args: ['aria-label']
}], propDecorators: { label: [{
type: Input
}] } });
export class MyComponent {
}
MyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: MyComponent, isStandalone: false, selector: "ng-component", ngImport: i0, template: '<button [title]="1" [id]="2" tabindex="{{0 + 3}}" aria-label="hello-{{1 + 3}}-{{2 + 3}}"></button>', isInline: true, dependencies: [{ kind: "directive", type: ButtonDir, selector: "button", inputs: ["aria-label"] }] });
MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: MyComponent, isStandalone: false, selector: "ng-component", ngImport: i0, template: '<button [title]="1" [id]="2" tabindex="{{0 + 3}}" label="hello-{{1 + 3}}-{{2 + 3}}"></button>', isInline: true, dependencies: [{ kind: "directive", type: ButtonDir, selector: "button", inputs: ["label"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyComponent, decorators: [{
type: Component,
args: [{
template: '<button [title]="1" [id]="2" tabindex="{{0 + 3}}" aria-label="hello-{{1 + 3}}-{{2 + 3}}"></button>',
standalone: false
template: '<button [title]="1" [id]="2" tabindex="{{0 + 3}}" label="hello-{{1 + 3}}-{{2 + 3}}"></button>',
standalone: false,
}]
}] });
export class MyMod {
Expand All @@ -445,9 +526,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDE
****************************************************************************************************/
import * as i0 from "@angular/core";
export declare class ButtonDir {
al: any;
label: any;
static ɵfac: i0.ɵɵFactoryDeclaration<ButtonDir, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<ButtonDir, "button", never, { "al": { "alias": "aria-label"; "required": false; }; }, {}, never, never, false, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<ButtonDir, "button", never, { "label": { "alias": "label"; "required": false; }; }, {}, never, never, false, never>;
}
export declare class MyComponent {
static ɵfac: i0.ɵɵFactoryDeclaration<MyComponent, never>;
Expand Down
26 changes: 26 additions & 0 deletions ...li/test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/TEST_CASES.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,32 @@
{
"$schema": "../../test_case_schema.json",
"cases": [
{
"description": "should generate attribute instructions for DOM-only ARIA bindings",
"inputFiles": [
"aria_dom_properties.ts"
],
"expectations": [
{
"files": [
"aria_dom_properties.js"
]
}
]
},
{
"description": "should generate ariaProperty instructions for ARIA bindings",
"inputFiles": [
"aria_properties.ts"
],
"expectations": [
{
"files": [
"aria_properties.js"
]
}
]
},
{
"description": "should generate bind instruction",
"inputFiles": [
Expand Down
3 changes: 3 additions & 0 deletions .../compliance/test_cases/r3_view_compiler_bindings/property_bindings/aria_dom_properties.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
if (rf & 2) {
$r3$.ɵɵattribute("aria-readonly", ctx.readonly)("aria-label", ctx.label)("aria-disabled", ctx.disabled);
}
12 changes: 12 additions & 0 deletions .../compliance/test_cases/r3_view_compiler_bindings/property_bindings/aria_dom_properties.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import {Component} from '@angular/core';

@Component({
template: `
<input [attr.aria-disabled]="disabled" [aria-readonly]="readonly" [ariaLabel]="label">
`,
})
export class MyComponent {
disabled = '';
readonly = '';
label = '';
}
4 changes: 4 additions & 0 deletions ...test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/aria_properties.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
if (rf & 2) {
$r3$.ɵɵariaProperty("aria-readonly", ctx.readonly)("ariaLabel", ctx.label);
$r3$.ɵɵattribute("aria-disabled", ctx.disabled);
}
16 changes: 16 additions & 0 deletions ...test/compliance/test_cases/r3_view_compiler_bindings/property_bindings/aria_properties.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import {Component, Directive} from '@angular/core';

@Directive({selector: '[myDir]'})
class MyDir {}

@Component({
template: `
<input myDir [attr.aria-disabled]="disabled" [aria-readonly]="readonly" [ariaLabel]="label">
`,
imports: [MyDir],
})
export class MyComponent {
disabled = '';
readonly = '';
label = '';
}
2 changes: 1 addition & 1 deletion ...t_cases/r3_view_compiler_bindings/property_bindings/chain_bindings_with_interpolations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
template: function MyComponent_Template(rf, ctx) {
…
if (rf & 2) {
$r3$.ɵɵproperty("tabindex", $r3$.ɵɵinterpolate(0 + 3))("aria-label", $r3$.ɵɵinterpolate2("hello-", 1 + 3, "-", 2 + 3))("title", 1)("id", 2);
$r3$.ɵɵproperty("tabindex", $r3$.ɵɵinterpolate(0 + 3))("label", $r3$.ɵɵinterpolate2("hello-", 1 + 3, "-", 2 + 3))("title", 1)("id", 2);
}
}
18 changes: 8 additions & 10 deletions ...t_cases/r3_view_compiler_bindings/property_bindings/chain_bindings_with_interpolations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
import {Component, Directive, Input, NgModule} from '@angular/core';

@Directive({
selector: 'button',
standalone: false
selector: 'button',
standalone: false,
})
export class ButtonDir {
@Input('aria-label') al!: any;
@Input() label!: any;
}


@Component({
template: '<button [title]="1" [id]="2" tabindex="{{0 + 3}}" aria-label="hello-{{1 + 3}}-{{2 + 3}}"></button>',
standalone: false
template:
'<button [title]="1" [id]="2" tabindex="{{0 + 3}}" label="hello-{{1 + 3}}-{{2 + 3}}"></button>',
standalone: false,
})
export class MyComponent {
}
export class MyComponent {}

@NgModule({declarations: [ButtonDir, MyComponent]})
export class MyMod {
}
export class MyMod {}
2 changes: 1 addition & 1 deletion ...e/test_cases/r3_view_compiler_bindings/property_bindings/chain_multiple_bindings_mixed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
template: function MyComponent_Template(rf, ctx) {
…
if (rf & 2) {
$r3$.ɵɵproperty("aria-label", $r3$.ɵɵinterpolate(1 + 3))("title", 1)("tabindex", 3);
$r3$.ɵɵproperty("label", $r3$.ɵɵinterpolate(1 + 3))("title", 1)("tabindex", 3);
$r3$.ɵɵattribute("id", 2);
}
}
19 changes: 8 additions & 11 deletions ...e/test_cases/r3_view_compiler_bindings/property_bindings/chain_multiple_bindings_mixed.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,18 @@
import {Component, Directive, Input, NgModule} from '@angular/core';

@Directive({
selector: 'button',
standalone: false
selector: 'button',
standalone: false,
})
export class ButtonDir {
@Input('aria-label') al!: any;
@Input() label!: any;
}

@Component(
{
template: '<button [title]="1" [attr.id]="2" [tabindex]="3" aria-label="{{1 + 3}}"></button>',
standalone: false
@Component({
template: '<button [title]="1" [attr.id]="2" [tabindex]="3" label="{{1 + 3}}"></button>',
standalone: false,
})
export class MyComponent {
}
export class MyComponent {}

@NgModule({declarations: [ButtonDir, MyComponent]})
export class MyMod {
}
export class MyMod {}
1 change: 1 addition & 0 deletions packages/compiler/src/render3/r3_identifiers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,6 +252,7 @@ export class Identifiers {

static domProperty: o.ExternalReference = {name: 'ɵɵdomProperty', moduleName: CORE};

static ariaProperty: o.ExternalReference = {name: 'ɵɵariaProperty', moduleName: CORE};
static property: o.ExternalReference = {name: 'ɵɵproperty', moduleName: CORE};

static animationEnterListener: o.ExternalReference = {
Expand Down
Loading