diff --git a/packages/button/src/LionButton.js b/packages/button/src/LionButton.js index 353e793bc..07460592f 100644 --- a/packages/button/src/LionButton.js +++ b/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(); diff --git a/packages/button/stories/index.stories.js b/packages/button/stories/index.stories.js index d12d7b515..a6f54e7ce 100644 --- a/packages/button/stories/index.stories.js +++ b/packages/button/stories/index.stories.js @@ -47,16 +47,4 @@ storiesOf('Buttons|Button', module) `, - ) - .add('Within another form', () => { - const submitForm = () => console.log('hey'); - return html` -
-

Details

- - - - Submit -
- `; - }); + );