diff --git a/.changeset/large-dodos-notice.md b/.changeset/large-dodos-notice.md new file mode 100644 index 000000000..8d809c4fa --- /dev/null +++ b/.changeset/large-dodos-notice.md @@ -0,0 +1,5 @@ +--- +'@lion/icon': minor +--- + +fix(icon): single pronounciation in JAWS/FF diff --git a/packages/icon/README.md b/packages/icon/README.md index a2663d314..bb41c5078 100644 --- a/packages/icon/README.md +++ b/packages/icon/README.md @@ -73,8 +73,8 @@ export const iconSets = () => html` font-size: 10px; } -
- +
+ ${name}
`, diff --git a/packages/icon/src/LionIcon.js b/packages/icon/src/LionIcon.js index ea86a4eeb..101badef3 100644 --- a/packages/icon/src/LionIcon.js +++ b/packages/icon/src/LionIcon.js @@ -145,6 +145,9 @@ export class LionIcon extends LitElement { _renderSvg(svgObject) { validateSvg(svgObject); render(svgObject, this); + if (this.firstElementChild) { + this.firstElementChild.setAttribute('aria-hidden', 'true'); + } } async _onIconIdChanged(prevIconId) { diff --git a/packages/icon/test/lion-icon.test.js b/packages/icon/test/lion-icon.test.js index cea89e5fa..bf1c80a1e 100644 --- a/packages/icon/test/lion-icon.test.js +++ b/packages/icon/test/lion-icon.test.js @@ -61,6 +61,11 @@ describe('lion-icon', () => { await expect(el).to.be.accessible(); }); + it('expect the svg icon to be aria-hidden', async () => { + const icon = await fixture(html``); + expect(icon.children[0].getAttribute('aria-hidden')).to.equal('true'); + }); + it('expects svg-icons to have the attribute `focusable="false"` so the icon doesn\'t appear in tab-order in IE/Edge', async () => { const icon = await fixture(html``); expect(icon.children[0].getAttribute('focusable')).to.equal('false');