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

fix(button): make button more accessible

Browse source
This commit is contained in:
Joren Broekema 2019-11-12 16:31:22 +01:00 committed by Thomas Allmer
parent 66d3d390ae
commit fdedcf2894
2 changed files with 8 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/button/src/LionButton.js
View file

@ -92,7 +92,7 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
padding: 0; padding: 0;
} }
:host(:focus) .btn { :host(:focus:not([disabled])) .btn {
/* if you extend, please overwrite */ /* if you extend, please overwrite */
outline: 2px solid #bde4ff; outline: 2px solid #bde4ff;
} }
@ -137,6 +137,7 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
if (!this.constructor._button) { if (!this.constructor._button) {
this.constructor._button = document.createElement('button'); this.constructor._button = document.createElement('button');
this.constructor._button.setAttribute('tabindex', '-1'); this.constructor._button.setAttribute('tabindex', '-1');
this.constructor._button.setAttribute('aria-hidden', true);
} }
return this.constructor._button.cloneNode(); return this.constructor._button.cloneNode();
}, },

6
packages/button/test/lion-button.test.js
View file

@ -222,6 +222,12 @@ describe('lion-button', () => {
); );
restoreMockIsIE11(); restoreMockIsIE11();
}); });
it.only('has a native button node with aria-hidden set to true', async () => {
const el = await fixture('<lion-button></lion-button>');
expect(el._nativeButtonNode.getAttribute('aria-hidden')).to.equal('true');
});
}); });
describe('form integration', () => { describe('form integration', () => {