diff --git a/packages/button/src/LionButton.js b/packages/button/src/LionButton.js index 8a7281e32..726d2ff4f 100644 --- a/packages/button/src/LionButton.js +++ b/packages/button/src/LionButton.js @@ -22,7 +22,13 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement)) return html`
${this._renderBefore()} - + ${this.constructor.__isIE11() + ? html` +
+ ` + : html` + + `} ${this._renderAfter()}
@@ -132,6 +138,13 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement)) this.type = 'submit'; this.active = false; this.__setupDelegationInConstructor(); + + if (this.constructor.__isIE11()) { + this._buttonId = `button-${Math.random() + .toString(36) + .substr(2, 10)}`; + this.setAttribute('aria-labelledby', this._buttonId); + } } connectedCallback() { @@ -234,4 +247,10 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement)) __isKeyboardClickEvent(e) { return e.keyCode === 32 /* space */ || e.keyCode === 13 /* enter */; } + + static __isIE11() { + const ua = window.navigator.userAgent; + const result = /Trident/.test(ua); + return result; + } } diff --git a/packages/button/test/lion-button.test.js b/packages/button/test/lion-button.test.js index 713f5ac01..fb37f49fb 100644 --- a/packages/button/test/lion-button.test.js +++ b/packages/button/test/lion-button.test.js @@ -9,6 +9,7 @@ import { keyDownOn, keyUpOn, } from '@polymer/iron-test-helpers/mock-interactions.js'; +import { LionButton } from '../src/LionButton.js'; import '../lion-button.js'; @@ -20,6 +21,16 @@ function getTopElement(el) { return crossBrowserRoot.elementFromPoint(left + width / 2, top + height / 2); } +let originalIsIE11Method; +function mockIsIE11() { + originalIsIE11Method = LionButton.__isIE11; + LionButton.__isIE11 = () => true; +} + +function restoreMockIsIE11() { + LionButton.__isIE11 = originalIsIE11Method; +} + describe('lion-button', () => { it('behaves like native `button` in terms of a11y', async () => { const el = await fixture(`foo`); @@ -198,6 +209,18 @@ describe('lion-button', () => { await el.updateComplete; expect(el.getAttribute('tabindex')).to.equal('5'); }); + + it('has an aria-labelledby and wrapper element in IE11', async () => { + mockIsIE11(); + const el = await fixture(`foo`); + expect(el.hasAttribute('aria-labelledby')).to.be.true; + const wrapperId = el.getAttribute('aria-labelledby'); + expect(el.shadowRoot.querySelector(`#${wrapperId}`)).to.exist; + expect(el.shadowRoot.querySelector(`#${wrapperId}`)).dom.to.equal( + `
`, + ); + restoreMockIsIE11(); + }); }); describe('form integration', () => {