fix(button): make JAWS/IE11 work with inner button

Author: erikkroes

packages/button/src/LionButton.js

@@ -22,7 +22,13 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
     return html`
       <div class="btn">
         ${this._renderBefore()}
-        <slot></slot>
+        ${this.constructor.__isIE11()
+          ? html`
+              <div id="${this._buttonId}"><slot></slot></div>
+            `
+          : html`
+              <slot></slot>
+            `}
         ${this._renderAfter()}
         <slot name="_button"></slot>
         <div class="click-area"></div>
@@ -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;
+  }
 }

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(`<lion-button>foo</lion-button>`);
@@ -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(`<lion-button>foo</lion-button>`);
+      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(
+        `<div id="${wrapperId}"><slot></slot></div>`,
+      );
+      restoreMockIsIE11();
+    });
   });
 
   describe('form integration', () => {