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', () => {