mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
feat(icon): add aria-hidden true by default
PiperOrigin-RevId: 551024866
This commit is contained in:
parent
fb1c6039e7
commit
08d50e231d
71
icon/icon_test.ts
Normal file
71
icon/icon_test.ts
Normal file
@ -0,0 +1,71 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2023 Google LLC
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*/
|
||||
|
||||
// import 'jasmine'; (google3-only)
|
||||
import './icon.js';
|
||||
|
||||
import {html} from 'lit';
|
||||
|
||||
import {Environment} from '../testing/environment.js';
|
||||
import {createTokenTests} from '../testing/tokens.js';
|
||||
|
||||
import {MdIcon} from './icon.js';
|
||||
|
||||
describe('<md-icon>', () => {
|
||||
const env = new Environment();
|
||||
|
||||
describe('.styles', () => {
|
||||
createTokenTests(MdIcon.styles);
|
||||
});
|
||||
|
||||
describe('accessiblity', () => {
|
||||
it('sets aria-hidden to true by default', async () => {
|
||||
const root = env.render(html`
|
||||
<md-icon>check</md-icon>`);
|
||||
const icon = root.querySelector('md-icon')!;
|
||||
|
||||
await env.waitForStability();
|
||||
|
||||
expect(icon.getAttribute('aria-hidden')).toBe('true');
|
||||
});
|
||||
|
||||
it('sets aria-hidden is removed when initalized as false', async () => {
|
||||
const root = env.render(html`
|
||||
<md-icon aria-hidden="false">check</md-icon>`);
|
||||
const icon = root.querySelector('md-icon')!;
|
||||
|
||||
await env.waitForStability();
|
||||
|
||||
expect(icon.hasAttribute('aria-hidden')).toBe(false);
|
||||
});
|
||||
|
||||
it('allows overriding aria-hidden after first render', async () => {
|
||||
const root = env.render(html`
|
||||
<md-icon>check</md-icon>`);
|
||||
const icon = root.querySelector('md-icon')!;
|
||||
|
||||
await env.waitForStability();
|
||||
|
||||
expect(icon.getAttribute('aria-hidden')).toBe('true');
|
||||
|
||||
icon.removeAttribute('aria-hidden');
|
||||
await env.waitForStability();
|
||||
|
||||
expect(icon.hasAttribute('aria-hidden')).toBe(false);
|
||||
});
|
||||
|
||||
it('overrides invalid aria-hidden values to true', async () => {
|
||||
const root = env.render(html`
|
||||
<!-- @ts-ignore:disable-next-line:no-incompatible-type-binding -->
|
||||
<md-icon aria-hidden="foo">check</md-icon>`);
|
||||
const icon = root.querySelector('md-icon')!;
|
||||
|
||||
await env.waitForStability();
|
||||
|
||||
expect(icon.getAttribute('aria-hidden')).toBe('true');
|
||||
});
|
||||
});
|
||||
});
|
@ -13,4 +13,15 @@ export class Icon extends LitElement {
|
||||
protected override render() {
|
||||
return html`<slot></slot>`;
|
||||
}
|
||||
|
||||
override connectedCallback() {
|
||||
super.connectedCallback();
|
||||
const ariaHidden = this.getAttribute('aria-hidden');
|
||||
if (ariaHidden === 'false') {
|
||||
this.removeAttribute('aria-hidden');
|
||||
return;
|
||||
}
|
||||
|
||||
this.setAttribute('aria-hidden', 'true');
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user