ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: cleanup IE11 code LionButton

Browse source
This commit is contained in:
Thijs Louisse 2025-07-30 12:39:05 +02:00 committed by Thijs Louisse
parent 76946d22b4
commit 63454c28ab
4 changed files with 14 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/famous-wasps-march copy.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
add `@slot` and `@customElements` meta data for custom-elements manifest

5
.changeset/famous-wasps-march.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
cleanup IE11 code in LionButton

14
packages/ui/components/button/src/LionButton.js
View file

@ -1,9 +1,11 @@
import { html, LitElement, css } from 'lit'; import { html, LitElement, css } from 'lit';
import { browserDetection, DisabledWithTabIndexMixin, uuid } from '@lion/ui/core.js'; import { DisabledWithTabIndexMixin } from '@lion/ui/core.js';
const isKeyboardClickEvent = (/** @type {KeyboardEvent} */ e) => e.key === ' ' || e.key === 'Enter'; const isKeyboardClickEvent = (/** @type {KeyboardEvent} */ e) => e.key === ' ' || e.key === 'Enter';
const isSpaceKeyboardClickEvent = (/** @type {KeyboardEvent} */ e) => e.key === ' '; const isSpaceKeyboardClickEvent = (/** @type {KeyboardEvent} */ e) => e.key === ' ';
// TODO: simplify html structure, as we got rid of the wrapper element for IE11
/** /**
* @typedef {import('lit').TemplateResult} TemplateResult * @typedef {import('lit').TemplateResult} TemplateResult
*/ */
@ -37,7 +39,7 @@ export class LionButton extends DisabledWithTabIndexMixin(LitElement) {
} }
render() { render() {
return html` <div class="button-content" id="${this._buttonId}"><slot></slot></div> `; return html` <div class="button-content"><slot></slot></div> `;
} }
static get styles() { static get styles() {
@ -126,14 +128,6 @@ export class LionButton extends DisabledWithTabIndexMixin(LitElement) {
this.type = 'button'; this.type = 'button';
this.active = false; this.active = false;
this._buttonId = uuid('button');
if (browserDetection.isIE11) {
this.updateComplete.then(() => {
if (!this.hasAttribute('aria-labelledby')) {
this.setAttribute('aria-labelledby', this._buttonId);
}
});
}
this.__setupEvents(); this.__setupEvents();
} }

14
packages/ui/components/button/test-suites/LionButton.suite.js
View file

@ -203,20 +203,6 @@ export function LionButtonSuite({ klass = LionButton } = {}) {
expect(el.getAttribute('tabindex')).to.equal('5'); expect(el.getAttribute('tabindex')).to.equal('5');
}); });
it('has an aria-labelledby and wrapper element in IE11', async () => {
const browserDetectionStub = sinon.stub(browserDetection, 'isIE11').value(true);
const el = /** @type {LionButton} */ (
await fixture(html`<${tagButton}>foo</${tagButton}>`)
);
expect(el.hasAttribute('aria-labelledby')).to.be.true;
const wrapperId = el.getAttribute('aria-labelledby');
expect(/** @type {ShadowRoot} */ (el.shadowRoot).querySelector(`#${wrapperId}`)).to.exist;
expect(
/** @type {ShadowRoot} */ (el.shadowRoot).querySelector(`#${wrapperId}`),
).dom.to.equal(`<div class="button-content" id="${wrapperId}"><slot></slot></div>`);
browserDetectionStub.restore();
});
it('does not override aria-labelledby when provided by user', async () => { it('does not override aria-labelledby when provided by user', async () => {
const browserDetectionStub = sinon.stub(browserDetection, 'isIE11').value(true); const browserDetectionStub = sinon.stub(browserDetection, 'isIE11').value(true);
const el = /** @type {LionButton} */ ( const el = /** @type {LionButton} */ (