fix(button): fix implicit form submission IE11 due to visibility hidden

Author: Joren Broekema

packages/button/src/LionButton.js

@@ -71,7 +71,6 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
 
         :host .btn ::slotted(button) {
           position: absolute;
-          visibility: hidden;
         }
 
         .click-area {
@@ -111,6 +110,22 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
           fill: #adadad;
         }
       `,
+      ...(this.__isIE11() /* visibility hidden in IE11 breaks native button functionality */
+        ? [
+            /* TODO: Make SR-only css mixin? */
+            css`
+              :host .btn ::slotted(button) {
+                clip: rect(0, 0, 0, 0);
+              }
+            `,
+          ]
+        : [
+            css`
+              :host .btn ::slotted(button) {
+                visibility: hidden;
+              }
+            `,
+          ]),
     ];
   }
 
@@ -120,7 +135,6 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
       _button: () => {
         if (!this.constructor._button) {
           this.constructor._button = document.createElement('button');
-          this.constructor._button.setAttribute('slot', '_button');
           this.constructor._button.setAttribute('tabindex', '-1');
         }
         return this.constructor._button.cloneNode();

packages/button/stories/index.stories.js

@@ -47,16 +47,4 @@ storiesOf('Buttons|Button', module)
         </form></lion-form
       >
     `,
-  )
-  .add('Within another form', () => {
-    const submitForm = () => console.log('hey');
-    return html`
-      <form id="form" @submit=${submitForm}>
-        <h3>Details</h3>
-        <input name="input1" />
-        <input name="input2" />
-        <input name="input3" />
-        <lion-button>Submit</lion-button>
-      </form>
-    `;
-  });
+  );