diff --git a/icon/icon_test.ts b/icon/icon_test.ts new file mode 100644 index 0000000000..cb10d8ac18 --- /dev/null +++ b/icon/icon_test.ts @@ -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('', () => { + 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` + check`); + 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` + check`); + 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` + check`); + 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` + + check`); + const icon = root.querySelector('md-icon')!; + + await env.waitForStability(); + + expect(icon.getAttribute('aria-hidden')).toBe('true'); + }); + }); +}); diff --git a/icon/internal/icon.ts b/icon/internal/icon.ts index 5b01f14fdc..c5b4846b78 100644 --- a/icon/internal/icon.ts +++ b/icon/internal/icon.ts @@ -13,4 +13,15 @@ export class Icon extends LitElement { protected override render() { return html``; } + + override connectedCallback() { + super.connectedCallback(); + const ariaHidden = this.getAttribute('aria-hidden'); + if (ariaHidden === 'false') { + this.removeAttribute('aria-hidden'); + return; + } + + this.setAttribute('aria-hidden', 'true'); + } }