From 63454c28abd8b1b9398134712e2bf60a533be0c8 Mon Sep 17 00:00:00 2001
From: Thijs Louisse <Thijs.Louisse@ing.com>
Date: Wed, 30 Jul 2025 12:39:05 +0200
Subject: [PATCH] fix: cleanup IE11 code LionButton

---
 .changeset/famous-wasps-march copy.md              |  5 +++++
 .changeset/famous-wasps-march.md                   |  5 +++++
 packages/ui/components/button/src/LionButton.js    | 14 ++++----------
 .../button/test-suites/LionButton.suite.js         | 14 --------------
 4 files changed, 14 insertions(+), 24 deletions(-)
 create mode 100644 .changeset/famous-wasps-march copy.md
 create mode 100644 .changeset/famous-wasps-march.md

diff --git a/.changeset/famous-wasps-march copy.md b/.changeset/famous-wasps-march copy.md
new file mode 100644
index 000000000..f0b8dc121
--- /dev/null
+++ b/.changeset/famous-wasps-march copy.md	
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+add `@slot` and `@customElements` meta data for custom-elements manifest
diff --git a/.changeset/famous-wasps-march.md b/.changeset/famous-wasps-march.md
new file mode 100644
index 000000000..1f41270c7
--- /dev/null
+++ b/.changeset/famous-wasps-march.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+cleanup IE11 code in LionButton
diff --git a/packages/ui/components/button/src/LionButton.js b/packages/ui/components/button/src/LionButton.js
index ac757a944..dc40c59c6 100644
--- a/packages/ui/components/button/src/LionButton.js
+++ b/packages/ui/components/button/src/LionButton.js
@@ -1,9 +1,11 @@
 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 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
  */
@@ -37,7 +39,7 @@ export class LionButton extends DisabledWithTabIndexMixin(LitElement) {
   }
 
   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() {
@@ -126,14 +128,6 @@ export class LionButton extends DisabledWithTabIndexMixin(LitElement) {
     this.type = 'button';
     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();
   }
 
diff --git a/packages/ui/components/button/test-suites/LionButton.suite.js b/packages/ui/components/button/test-suites/LionButton.suite.js
index 1835bf438..49944af88 100644
--- a/packages/ui/components/button/test-suites/LionButton.suite.js
+++ b/packages/ui/components/button/test-suites/LionButton.suite.js
@@ -203,20 +203,6 @@ export function LionButtonSuite({ klass = LionButton } = {}) {
         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 () => {
         const browserDetectionStub = sinon.stub(browserDetection, 'isIE11').value(true);
         const el = /** @type {LionButton} */ (