fix(compiler): Add support for `aria-invalid` #63748

JeanMeche · 2025-09-11T23:17:03Z

The aria-invalid attribute was supported but the ariaInvalid property was unknown by the schema.

The `aria-invalid` attribute was supported but the `ariaInvalid` property was unknown by the schema. fixes angular#63744

samvloeberghs · 2025-09-12T08:38:13Z

@JeanMeche can we please add support for aria-errormessage (ariaErrormessage) as well please?
I don't see that one in the list of supported attributes.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-errormessage

packages/compiler/src/schema/dom_element_schema_registry.ts

thePunderWoman

LGTM

Review appreciated, but is not blocking.

josephperrott

LGTM

Reviewed-for: fw-security

jelbourn

LGTM

Reviewed-for: fw-security

ngbot · 2025-09-12T22:37:39Z

I see that you just added the action: merge label, but the following checks are still failing:
status "google-internal-tests" is failing

If you want your PR to be merged, it has to pass all the CI checks.

If you can't get the PR to a green state due to flakes or broken main, please try rebasing to main and/or restarting the CI job. If that fails and you believe that the issue is not due to your change, please contact the caretaker and ask for help.

leonsenft · 2025-09-15T16:57:16Z

packages/compiler/src/schema/dom_element_schema_registry.ts

@@ -272,7 +272,8 @@ const _ATTR_TO_PROP = new Map(
    'readonly': 'readOnly',
    'tabindex': 'tabIndex',

-    // https://www.w3.org/TR/wai-aria-1.2/#accessibilityroleandproperties-correspondence
+    // https://www.w3.org/TR/wai-aria-1.2/#accessibilityroleandproperteies-correspondence


Suggested change

// https://www.w3.org/TR/wai-aria-1.2/#accessibilityroleandproperteies-correspondence

// https://www.w3.org/TR/wai-aria-1.2/#accessibilityroleandproperties-correspondence

packages/compiler/src/schema/dom_element_schema_registry.ts

leonsenft

These attribute/property pairs with mismatched names (e.g. aria-controls, ariaControlsElements) break an assumption made in #62630.

#62630 made it so that Angular would always render a property whose name begins with aria as an attribute.

This was largely facilitated by the fact that one can relatively easily convert from ARIA property name to the corresponding attribute name–without needing to retain an exhaustive mapping:

angular/packages/core/src/render3/instructions/aria_property.ts

Line 74 in 2473931

function ariaAttrName(name: string): string {

These mismatched names break this assumption. Attempting to bind [ariaControlsElements]="controls" will incorrectly set the aria-controlselements attribute, when the attribute should just be aria-controls.

In summary, the resulting behavior from this change would be:

Binding	Result	Notes
`aria-control="string"`	✅	Static attribute
`[attr.aria-control]="expr"`	✅	Explicit attribute binding
`[aria-control]="expr"`	✅	Implicit attribute binding
`[ariaControlsElements]="expr"`	❌	Explicit property binding, this gets mapped to the incorrect property name.
`[ariaControls]="expr"`	⚠️	This would get mapped to the correct attribute, but isn't a valid property name.

I'm not certain yet what the best solution here is, just pointing out the problem I see at the moment.

leonsenft · 2025-09-15T17:34:33Z

packages/compiler/src/schema/dom_element_schema_registry.ts

-const SCHEMA: string[] = [
-  '[Element]|textContent,%ariaAtomic,%ariaAutoComplete,%ariaBusy,%ariaChecked,%ariaColCount,%ariaColIndex,%ariaColSpan,%ariaCurrent,%ariaDescription,%ariaDisabled,%ariaExpanded,%ariaHasPopup,%ariaHidden,%ariaKeyShortcuts,%ariaLabel,%ariaLevel,%ariaLive,%ariaModal,%ariaMultiLine,%ariaMultiSelectable,%ariaOrientation,%ariaPlaceholder,%ariaPosInSet,%ariaPressed,%ariaReadOnly,%ariaRelevant,%ariaRequired,%ariaRoleDescription,%ariaRowCount,%ariaRowIndex,%ariaRowSpan,%ariaSelected,%ariaSetSize,%ariaSort,%ariaValueMax,%ariaValueMin,%ariaValueNow,%ariaValueText,%classList,className,elementTiming,id,innerHTML,*beforecopy,*beforecut,*beforepaste,*fullscreenchange,*fullscreenerror,*search,*webkitfullscreenchange,*webkitfullscreenerror,outerHTML,%part,#scrollLeft,#scrollTop,slot' +
+export const SCHEMA: string[] = [
+  '[Element]|textContent,%ariaActiveDescendant,%ariaAtomic,%ariaAutoComplete,%ariaBusy,%ariaChecked,%ariaColCount,%ariaColIndex,%ariaColSpan,%ariaControlsElement,%ariaCurrent,%ariaDescribedByElements,%ariaDescription,%ariaDetailsElements,%ariaDisabled,%ariaErrorMessageElements,%ariaExpanded,%ariaFlowToElements,%ariaHasPopup,%ariaHidden,%ariaInvalid,%ariaKeyShortcuts,%ariaLabel,%ariaLabelledByElements,%ariaLevel,%ariaLive,%ariaModal,%ariaMultiLine,%ariaMultiSelectable,%ariaOrientation,%ariaOwnsElements,%ariaPlaceholder,%ariaPosInSet,%ariaPressed,%ariaReadOnly,%ariaRelevant,%ariaRequired,%ariaRoleDescription,%ariaRowCount,%ariaRowIndex,%ariaRowSpan,%ariaSelected,%ariaSetSize,%ariaSort,%ariaValueMax,%ariaValueMin,%ariaValueNow,%ariaValueText,%classList,className,elementTiming,id,innerHTML,*beforecopy,*beforecut,*beforepaste,*fullscreenchange,*fullscreenerror,*search,*webkitfullscreenchange,*webkitfullscreenerror,outerHTML,%part,#scrollLeft,#scrollTop,slot' +


Suggested change

'[Element]|textContent,%ariaActiveDescendant,%ariaAtomic,%ariaAutoComplete,%ariaBusy,%ariaChecked,%ariaColCount,%ariaColIndex,%ariaColSpan,%ariaControlsElement,%ariaCurrent,%ariaDescribedByElements,%ariaDescription,%ariaDetailsElements,%ariaDisabled,%ariaErrorMessageElements,%ariaExpanded,%ariaFlowToElements,%ariaHasPopup,%ariaHidden,%ariaInvalid,%ariaKeyShortcuts,%ariaLabel,%ariaLabelledByElements,%ariaLevel,%ariaLive,%ariaModal,%ariaMultiLine,%ariaMultiSelectable,%ariaOrientation,%ariaOwnsElements,%ariaPlaceholder,%ariaPosInSet,%ariaPressed,%ariaReadOnly,%ariaRelevant,%ariaRequired,%ariaRoleDescription,%ariaRowCount,%ariaRowIndex,%ariaRowSpan,%ariaSelected,%ariaSetSize,%ariaSort,%ariaValueMax,%ariaValueMin,%ariaValueNow,%ariaValueText,%classList,className,elementTiming,id,innerHTML,*beforecopy,*beforecut,*beforepaste,*fullscreenchange,*fullscreenerror,*search,*webkitfullscreenchange,*webkitfullscreenerror,outerHTML,%part,#scrollLeft,#scrollTop,slot' +

'[Element]|textContent,%ariaActiveDescendantElement,%ariaAtomic,%ariaAutoComplete,%ariaBusy,%ariaChecked,%ariaColCount,%ariaColIndex,%ariaColSpan,%ariaControlsElement,%ariaCurrent,%ariaDescribedByElements,%ariaDescription,%ariaDetailsElements,%ariaDisabled,%ariaErrorMessageElements,%ariaExpanded,%ariaFlowToElements,%ariaHasPopup,%ariaHidden,%ariaInvalid,%ariaKeyShortcuts,%ariaLabel,%ariaLabelledByElements,%ariaLevel,%ariaLive,%ariaModal,%ariaMultiLine,%ariaMultiSelectable,%ariaOrientation,%ariaOwnsElements,%ariaPlaceholder,%ariaPosInSet,%ariaPressed,%ariaReadOnly,%ariaRelevant,%ariaRequired,%ariaRoleDescription,%ariaRowCount,%ariaRowIndex,%ariaRowSpan,%ariaSelected,%ariaSetSize,%ariaSort,%ariaValueMax,%ariaValueMin,%ariaValueNow,%ariaValueText,%classList,className,elementTiming,id,innerHTML,*beforecopy,*beforecut,*beforepaste,*fullscreenchange,*fullscreenerror,*search,*webkitfullscreenchange,*webkitfullscreenerror,outerHTML,%part,#scrollLeft,#scrollTop,slot' +

packages/compiler/src/schema/dom_element_schema_registry.ts

JeanMeche · 2025-09-15T18:07:27Z

We chatted offline with Leon, there needs to be some design discussion to support props that don't realy match their corresponding attribute.

We'll keep this PR a fix to support aria-invalid.

The `aria-invalid` attribute was supported but the `ariaInvalid` property was unknown by the schema. fixes #63744 PR Close #63748

thePunderWoman · 2025-09-15T18:41:22Z

This PR was merged into the repository. The changes were merged into the following branches:

main: 803dc8e
20.3.x: 7fb5a80

fix(compiler): Add support for aria-invalid

64c363c

The `aria-invalid` attribute was supported but the `ariaInvalid` property was unknown by the schema. fixes angular#63744

pullapprove bot requested review from jelbourn, josephperrott and thePunderWoman September 11, 2025 23:17

angular-robot bot added the area: compiler Issues related to `ngc`, Angular's template compiler label Sep 11, 2025

ngbot bot added this to the Backlog milestone Sep 11, 2025

JeanMeche mentioned this pull request Sep 11, 2025

Ergonomic syntax for aria attributes broken #63744

Closed

samvloeberghs previously requested changes Sep 12, 2025

View reviewed changes

packages/compiler/src/schema/dom_element_schema_registry.ts Show resolved Hide resolved

samvloeberghs reviewed Sep 12, 2025

View reviewed changes

packages/compiler/src/schema/dom_element_schema_registry.ts Show resolved Hide resolved

thePunderWoman approved these changes Sep 12, 2025

View reviewed changes

josephperrott approved these changes Sep 12, 2025

View reviewed changes

jelbourn approved these changes Sep 12, 2025

View reviewed changes

JeanMeche added action: merge The PR is ready for merge by the caretaker target: patch This PR is targeted for the next patch release labels Sep 12, 2025

JeanMeche requested a review from leonsenft September 12, 2025 23:04

JeanMeche removed the action: merge The PR is ready for merge by the caretaker label Sep 12, 2025

JeanMeche force-pushed the aria-invalid branch from 8867eac to 77afb7e Compare September 12, 2025 23:06

JeanMeche mentioned this pull request Sep 14, 2025

feat(@angular/cli): add initial set of signal form examples angular/angular-cli#31134

Draft

thePunderWoman removed the request for review from leonsenft September 15, 2025 16:53

thePunderWoman added the action: merge The PR is ready for merge by the caretaker label Sep 15, 2025

leonsenft requested changes Sep 15, 2025

View reviewed changes

thePunderWoman added action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews and removed action: merge The PR is ready for merge by the caretaker labels Sep 15, 2025

JeanMeche force-pushed the aria-invalid branch from 77afb7e to 1f5c30d Compare September 15, 2025 17:27

leonsenft requested changes Sep 15, 2025

View reviewed changes

JeanMeche force-pushed the aria-invalid branch from 1f5c30d to 64c363c Compare September 15, 2025 18:05

leonsenft approved these changes Sep 15, 2025

View reviewed changes

thePunderWoman added action: merge The PR is ready for merge by the caretaker and removed action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews labels Sep 15, 2025

thePunderWoman closed this in 803dc8e Sep 15, 2025

thePunderWoman pushed a commit that referenced this pull request Sep 15, 2025

fix(compiler): Add support for aria-invalid (#63748)

7fb5a80

The `aria-invalid` attribute was supported but the `ariaInvalid` property was unknown by the schema. fixes #63744 PR Close #63748

JeanMeche deleted the aria-invalid branch September 15, 2025 19:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(compiler): Add support for `aria-invalid` #63748

fix(compiler): Add support for `aria-invalid` #63748

JeanMeche commented Sep 11, 2025

Uh oh!

samvloeberghs commented Sep 12, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

thePunderWoman left a comment

Uh oh!

josephperrott left a comment

Uh oh!

jelbourn left a comment

Uh oh!

ngbot bot commented Sep 12, 2025

Uh oh!

leonsenft Sep 15, 2025

Uh oh!

Uh oh!

leonsenft left a comment

Uh oh!

leonsenft Sep 15, 2025

Uh oh!

Uh oh!

JeanMeche commented Sep 15, 2025

Uh oh!

thePunderWoman commented Sep 15, 2025

Uh oh!

Uh oh!

	// https://www.w3.org/TR/wai-aria-1.2/#accessibilityroleandproperteies-correspondence
	// https://www.w3.org/TR/wai-aria-1.2/#accessibilityroleandproperties-correspondence

fix(compiler): Add support for aria-invalid #63748

fix(compiler): Add support for aria-invalid #63748

Conversation

JeanMeche commented Sep 11, 2025

Uh oh!

samvloeberghs commented Sep 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

thePunderWoman left a comment

Choose a reason for hiding this comment

Uh oh!

josephperrott left a comment

Choose a reason for hiding this comment

Uh oh!

jelbourn left a comment

Choose a reason for hiding this comment

Uh oh!

ngbot bot commented Sep 12, 2025

Uh oh!

leonsenft Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

leonsenft left a comment

Choose a reason for hiding this comment

Uh oh!

leonsenft Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

JeanMeche commented Sep 15, 2025

Uh oh!

thePunderWoman commented Sep 15, 2025

Uh oh!

Uh oh!

fix(compiler): Add support for `aria-invalid` #63748

fix(compiler): Add support for `aria-invalid` #63748

samvloeberghs commented Sep 12, 2025 •

edited

Loading