From adfa29a049a16c30e6d9148776cf05d19889b95c Mon Sep 17 00:00:00 2001
From: Thijs Louisse <Thijs.Louisse@ing.com>
Date: Mon, 19 Sep 2022 18:07:46 +0200
Subject: [PATCH] fix(switch): remove one of the two nested role="switch"

---
 .changeset/afraid-nails-tap.md                |  5 ++++
 .../ui/components/switch/src/LionSwitch.js    |  3 ---
 .../switch/test/lion-switch.test.js           | 27 ++++++++++++++-----
 3 files changed, 26 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/afraid-nails-tap.md

diff --git a/.changeset/afraid-nails-tap.md b/.changeset/afraid-nails-tap.md
new file mode 100644
index 000000000..72bc175fe
--- /dev/null
+++ b/.changeset/afraid-nails-tap.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[switch] remove one of the two role="switch" (nested-interactive). Only leave it on the switch-button.
diff --git a/packages/ui/components/switch/src/LionSwitch.js b/packages/ui/components/switch/src/LionSwitch.js
index e9a2fd193..d282b3938 100644
--- a/packages/ui/components/switch/src/LionSwitch.js
+++ b/packages/ui/components/switch/src/LionSwitch.js
@@ -80,9 +80,6 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
 
   connectedCallback() {
     super.connectedCallback();
-    if (!this.role) {
-      this.role = 'switch';
-    }
     this.addEventListener('checked-changed', this.__handleButtonSwitchCheckedChanged);
     if (this._labelNode) {
       this._labelNode.addEventListener('click', this._toggleChecked);
diff --git a/packages/ui/components/switch/test/lion-switch.test.js b/packages/ui/components/switch/test/lion-switch.test.js
index e79d138ec..37b1af4b2 100644
--- a/packages/ui/components/switch/test/lion-switch.test.js
+++ b/packages/ui/components/switch/test/lion-switch.test.js
@@ -10,7 +10,7 @@ import '@lion/ui/define/lion-switch.js';
 /**
  * @typedef {import('../src/LionSwitchButton.js').LionSwitchButton} LionSwitchButton
  * @typedef {import('lit').TemplateResult} TemplateResult
- * @typedef {import('../../form-core/types/FormControlMixinTypes.js').FormControlHost} FormControlHost
+ * @typedef {import('@lion/ui/types/form-core.js').FormControlHost} FormControlHost
  */
 
 const IsTrue = class extends Validator {
@@ -215,10 +215,25 @@ describe('lion-switch', () => {
     expect(el.showsFeedbackFor).to.eql(['info']);
   });
 
-  it('should not cause error by setting an attribute in the constructor', async () => {
-    const div = await fixture(html`<div></div>`);
-    const el = /** @type {LionSwitch} */ (document.createElement('lion-switch'));
-    div.appendChild(el);
-    expect(el.role).to.equal('switch');
+  describe('Accessibility', () => {
+    it('passes axe a11y audit', async () => {
+      const el = await fixture(html`<lion-switch name="hi" label="My label"></lion-switch>`);
+      await expect(el).to.be.accessible();
+
+      el.checked = true;
+      await el.updateComplete;
+      await expect(el).to.be.accessible();
+    });
+
+    it('passes axe a11y audit when disabled', async () => {
+      const el = await fixture(
+        html`<lion-switch name="hi" label="My label" disabled></lion-switch>`,
+      );
+      await expect(el).to.be.accessible();
+
+      el.checked = true;
+      await el.updateComplete;
+      await expect(el).to.be.accessible();
+    });
   });
 });