mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
f008045ded
https://github.com/angular/angular/pull/62630 made it so that all ARIA property bindings would write to their corresponding attribute instead. The primary motivation for this change was to ensure that ARIA attributes were always rendered correctly on the server, where the emulated DOM may not correctly reflect ARIA properties as attributes. Furthermore, this change added support for binding to ARIA attributes using the property binding syntax (e.g. `[aria-label]`). Unfortunately, https://github.com/angular/angular/pull/62630 relied on the incorrect assumptions that an ARIA property name could be converted to its attribute name (without hardcoding the conversion), and that the value of an ARIA property matched its corresponding attribute. For example, the `ariaLabelledByElements` property's value is an array of DOM elements, while the corresponding `aria-labelledby` attribute's value is a string containing the IDs of the DOM elements. This partially reverts https://github.com/angular/angular/pull/62630 so that only property bindings with ARIA attribute names (begin with `aria-`) are converted to attribute bindings. * `[ariaLabel]` will revert to binding to the `ariaLabel` property. * `[aria-label]` will continue binding to the `aria-label` attribute. Note the only difference between `[aria-label]` and `[attr.aria-label]` is that the former will attempt to bind to inputs of the same name while the latter will not. PR Close #63925
40 lines
1 KiB
TypeScript
40 lines
1 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright Google LLC All Rights Reserved.
|
|
*
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://angular.dev/license
|
|
*/
|
|
|
|
import {Component} from '@angular/core';
|
|
import {ssr} from './hydration_utils';
|
|
|
|
describe('renderApplication', () => {
|
|
it('should render ARIA attributes from attribute bindings', async () => {
|
|
@Component({
|
|
selector: 'app',
|
|
standalone: true,
|
|
template: '<div [attr.aria-label]="label"></div>',
|
|
})
|
|
class SomeComponent {
|
|
label = 'some label';
|
|
}
|
|
|
|
const html = await ssr(SomeComponent);
|
|
expect(html).toContain('aria-label="some label"');
|
|
});
|
|
|
|
it('should render ARIA attributes using property binding syntax', async () => {
|
|
@Component({
|
|
selector: 'app',
|
|
standalone: true,
|
|
template: '<div [aria-label]="label"></div>',
|
|
})
|
|
class SomeComponent {
|
|
label = 'a third label';
|
|
}
|
|
|
|
const html = await ssr(SomeComponent);
|
|
expect(html).toContain('aria-label="a third label"');
|
|
});
|
|
});
|