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');