mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
4138aca91f
Allow binding to ARIA attributes using property binding syntax _without_ the `attr.` prefix. For example, `[aria-label]="expr"` is now valid, and equivalent to `[ariaLabel]="expr"`. Both examples bind to either a matching input or the `aria-label` HTML attribute, rather than the `ariaLabel` DOM property. Binding ARIA properties as attributes will ensure they are rendered correctly on the server, where the emulated DOM may not correctly reflect ARIA properties as attributes. Reuse the DOM schema registry from the compiler to map property names in type check blocks. PR Close #62630
54 lines
1.4 KiB
TypeScript
54 lines
1.4 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 from their corresponding property bindings', async () => {
|
|
@Component({
|
|
selector: 'app',
|
|
standalone: true,
|
|
template: '<div [ariaLabel]="label"></div>',
|
|
})
|
|
class SomeComponent {
|
|
label = 'some other label';
|
|
}
|
|
|
|
const html = await ssr(SomeComponent);
|
|
expect(html).toContain('aria-label="some other 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"');
|
|
});
|
|
});
|