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

fix(button): do not override aria-labelledby from user

Browse source
This commit is contained in:
Thijs Louisse 2020-11-11 14:20:46 +01:00
parent c5c4d4ba7c
commit 84ec97a640
2 changed files with 32 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -173,7 +173,11 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
this._buttonId = `button-${Math.random().toString(36).substr(2, 10)}`; this._buttonId = `button-${Math.random().toString(36).substr(2, 10)}`;
if (browserDetection.isIE11) { if (browserDetection.isIE11) {
this.updateComplete.then(() => this.setAttribute('aria-labelledby', this._buttonId)); this.updateComplete.then(() => {
if (!this.hasAttribute('aria-labelledby')) {
this.setAttribute('aria-labelledby', this._buttonId);
}
});
} }
} }

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

@ -211,6 +211,15 @@ describe('lion-button', () => {
browserDetectionStub.restore(); browserDetectionStub.restore();
}); });
it('does not override aria-labelledby when provided by user', async () => {
const browserDetectionStub = sinon.stub(browserDetection, 'isIE11').value(true);
const el = /** @type {LionButton} */ (await fixture(
`<lion-button aria-labelledby="some-id another-id">foo</lion-button>`,
));
expect(el.getAttribute('aria-labelledby')).to.equal('some-id another-id');
browserDetectionStub.restore();
});
it('has a native button node with aria-hidden set to true', async () => { it('has a native button node with aria-hidden set to true', async () => {
const el = /** @type {LionButton} */ (await fixture('<lion-button></lion-button>')); const el = /** @type {LionButton} */ (await fixture('<lion-button></lion-button>'));
@ -239,9 +248,9 @@ describe('lion-button', () => {
<lion-button type="submit">foo</lion-button> <lion-button type="submit">foo</lion-button>
</form> </form>
`); `);
const button = /** @type {LionButton} */ ( const button /** @type {LionButton} */ = /** @type {LionButton} */ (form.querySelector(
/** @type {LionButton} */ (form.querySelector('lion-button')) 'lion-button',
); ));
button.click(); button.click();
expect(formSubmitSpy).to.have.been.calledOnce; expect(formSubmitSpy).to.have.been.calledOnce;
}); });
@ -253,9 +262,9 @@ describe('lion-button', () => {
<lion-button type="submit">foo</lion-button> <lion-button type="submit">foo</lion-button>
</form> </form>
`); `);
const button = /** @type {LionButton} */ ( const button /** @type {LionButton} */ = /** @type {LionButton} */ (form.querySelector(
/** @type {LionButton} */ (form.querySelector('lion-button')) 'lion-button',
); ));
button.dispatchEvent(new KeyboardEvent('keyup', { key: ' ' })); button.dispatchEvent(new KeyboardEvent('keyup', { key: ' ' }));
await aTimeout(0); await aTimeout(0);
await aTimeout(0); await aTimeout(0);
@ -286,9 +295,9 @@ describe('lion-button', () => {
<lion-button type="reset">reset</lion-button> <lion-button type="reset">reset</lion-button>
</form> </form>
`); `);
const btn = /** @type {LionButton} */ ( const btn /** @type {LionButton} */ = /** @type {LionButton} */ (form.querySelector(
/** @type {LionButton} */ (form.querySelector('lion-button')) 'lion-button',
); ));
const firstName = /** @type {HTMLInputElement} */ (form.querySelector( const firstName = /** @type {HTMLInputElement} */ (form.querySelector(
'input[name=firstName]', 'input[name=firstName]',
)); ));
@ -350,9 +359,9 @@ describe('lion-button', () => {
</form> </form>
`); `);
/** @type {LionButton} */ (form.querySelector('lion-button')).dispatchEvent( /** @type {LionButton} */ form
new KeyboardEvent('keyup', { key: ' ' }), .querySelector('lion-button')
); .dispatchEvent(new KeyboardEvent('keyup', { key: ' ' }));
await aTimeout(0); await aTimeout(0);
await aTimeout(0); await aTimeout(0);
@ -410,7 +419,7 @@ describe('lion-button', () => {
it('is fired once', async () => { it('is fired once', async () => {
const clickSpy = /** @type {EventListener} */ (sinon.spy()); const clickSpy = /** @type {EventListener} */ (sinon.spy());
const el = /** @type {LionButton} */ (await fixture( const el = /** @type {LionButton} */ (await fixture(
html`<lion-button @click="${clickSpy}">foo</lion-button>`, html` <lion-button @click="${clickSpy}">foo</lion-button> `,
)); ));
el.click(); el.click();
@ -425,9 +434,11 @@ describe('lion-button', () => {
it('is fired one inside a form', async () => { it('is fired one inside a form', async () => {
const formClickSpy = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault())); const formClickSpy = /** @type {EventListener} */ (sinon.spy(e => e.preventDefault()));
const el = /** @type {HTMLFormElement} */ (await fixture( const el = /** @type {HTMLFormElement} */ (await fixture(
html`<form @click="${formClickSpy}"> html`
<form @click="${formClickSpy}">
<lion-button>foo</lion-button> <lion-button>foo</lion-button>
</form>`, </form>
`,
)); ));
// @ts-ignore // @ts-ignore