ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(icon): single pronounciation in JAWS/FF

Browse source
This commit is contained in:
erik 2020-10-21 10:36:39 +02:00 committed by qa46hx
parent 51732b0e4f
commit 978af941ba
4 changed files with 15 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/large-dodos-notice.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/icon': minor
---
fix(icon): single pronounciation in JAWS/FF

4
packages/icon/README.md
View file

@ -73,8 +73,8 @@ export const iconSets = () => html`
font-size: 10px; font-size: 10px;
} }
</style> </style>
<div class="demo-icon__container" title="lion:space:${name}"> <div class="demo-icon__container">
<lion-icon icon-id="lion:space:${name}" aria-label="icon: ${name}"></lion-icon> <lion-icon icon-id="lion:space:${name}" aria-label="${name}"></lion-icon>
<span class="demo-icon__name">${name}</span> <span class="demo-icon__name">${name}</span>
</div> </div>
`, `,

3
packages/icon/src/LionIcon.js
View file

@ -145,6 +145,9 @@ export class LionIcon extends LitElement {
_renderSvg(svgObject) { _renderSvg(svgObject) {
validateSvg(svgObject); validateSvg(svgObject);
render(svgObject, this); render(svgObject, this);
if (this.firstElementChild) {
this.firstElementChild.setAttribute('aria-hidden', 'true');
}
} }
async _onIconIdChanged(prevIconId) { async _onIconIdChanged(prevIconId) {

5
packages/icon/test/lion-icon.test.js
View file

@ -61,6 +61,11 @@ describe('lion-icon', () => {
await expect(el).to.be.accessible(); await expect(el).to.be.accessible();
}); });
it('expect the svg icon to be aria-hidden', async () => {
const icon = await fixture(html`<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>`);
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 () => { 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`<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>`); const icon = await fixture(html`<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>`);
expect(icon.children[0].getAttribute('focusable')).to.equal('false'); expect(icon.children[0].getAttribute('focusable')).to.equal('false');