From cf258e0efdc362004ae69d646f9a80e47cc36e01 Mon Sep 17 00:00:00 2001
From: Austin O'Neil <austinoneil@Austins-MacBook-Pro-2.local>
Date: Sat, 20 Apr 2024 13:02:34 -0700
Subject: [PATCH 1/6] Replace brittle unit test with e2e test that more
 precisely tests the behavior

---
 .../modus-switch/modus-switch.e2e.ts          | 28 +++++++++++++++++--
 .../modus-switch/modus-switch.spec.tsx        | 21 +-------------
 2 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/stencil-workspace/src/components/modus-switch/modus-switch.e2e.ts b/stencil-workspace/src/components/modus-switch/modus-switch.e2e.ts
index 99ac99d04..970a5082b 100644
--- a/stencil-workspace/src/components/modus-switch/modus-switch.e2e.ts
+++ b/stencil-workspace/src/components/modus-switch/modus-switch.e2e.ts
@@ -94,14 +94,12 @@ describe('modus-switch', () => {
     const input = await page.find('modus-switch >>> input');
     expect(await modusSwitch.getProperty('checked')).toBeTruthy();
     expect(await input.getProperty('checked')).toBeTruthy();
-    expect(await input.getAttribute('aria-checked').toLowerCase()).toEqual('true');
 
     await element.click();
     await page.waitForChanges();
 
     expect(await modusSwitch.getProperty('checked')).toBeFalsy();
     expect(await input.getProperty('checked')).toBeFalsy();
-    expect(await input.getAttribute('aria-checked').toLowerCase()).toEqual('false');
   });
   it('renders with medium size', async () => {
     const page = await newE2EPage();
@@ -118,4 +116,30 @@ describe('modus-switch', () => {
     const element = await page.find('modus-switch >>> .modus-switch');
     expect(element).toHaveClass('small');
   });
+
+  it('does not include "id" on input when "label" is not provided', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<modus-switch></modus-switch>');
+
+    const element = await page.find('modus-switch >>> input');
+    expect(element).not.toHaveAttribute('id');
+  });
+
+  it('renders "id" on input when "label" is provided', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<modus-switch label="test label"></modus-switch>');
+
+    const element = await page.find('modus-switch >>> input');
+    expect(element).toHaveAttribute('id');
+    expect(element.id).toEqual('test label');
+  });
+
+  it('sets tabindex to -1 when disabled', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<modus-switch disabled></modus-switch>');
+
+    const element = await page.find('modus-switch >>> .modus-switch');
+    expect(element).toHaveAttribute('tabindex');
+    expect(element.getAttribute('tabindex')).toEqual('-1');
+  });
 });
diff --git a/stencil-workspace/src/components/modus-switch/modus-switch.spec.tsx b/stencil-workspace/src/components/modus-switch/modus-switch.spec.tsx
index 7beba3317..6a55ca37e 100644
--- a/stencil-workspace/src/components/modus-switch/modus-switch.spec.tsx
+++ b/stencil-workspace/src/components/modus-switch/modus-switch.spec.tsx
@@ -14,26 +14,7 @@ describe('modus-switch', () => {
             <div class="switch">
               <span class="slider"></span>
             </div>
-            <input aria-checked="false" role="switch" type="checkbox">
-          </div>
-        </mock:shadow-root>
-      </modus-switch>
-    `);
-  });
-
-  it('sets tabindex to -1 when disabled', async () => {
-    const page = await newSpecPage({
-      components: [ModusSwitch],
-      html: '<modus-switch disabled></modus-switch>',
-    });
-    expect(page.root).toEqualHtml(`
-      <modus-switch disabled>
-        <mock:shadow-root>
-          <div class="disabled medium modus-switch" tabindex="-1">
-            <div class="switch">
-              <span class="slider"></span>
-            </div>
-            <input aria-checked="false" role="switch" aria-disabled="true" disabled type="checkbox">
+            <input role="switch" type="checkbox">
           </div>
         </mock:shadow-root>
       </modus-switch>

From 731e869499f18046f87bbc39b11f5c0a38bc8672 Mon Sep 17 00:00:00 2001
From: Austin O'Neil <austinoneil@Austins-MacBook-Pro-2.local>
Date: Sat, 20 Apr 2024 13:12:44 -0700
Subject: [PATCH 2/6] Made requested changes

---
 stencil-workspace/src/components/modus-switch/modus-switch.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stencil-workspace/src/components/modus-switch/modus-switch.tsx b/stencil-workspace/src/components/modus-switch/modus-switch.tsx
index 17b0042b3..7cd0bc9e1 100644
--- a/stencil-workspace/src/components/modus-switch/modus-switch.tsx
+++ b/stencil-workspace/src/components/modus-switch/modus-switch.tsx
@@ -69,11 +69,11 @@ export class ModusSwitch {
           <span class={`slider`}></span>
         </div>
         <input
-          aria-checked={String(this.checked)}
           aria-disabled={this.disabled ? 'true' : undefined}
           aria-label={this.ariaLabel}
           checked={this.checked}
           disabled={this.disabled}
+          id={this.label}
           ref={(el) => (this.checkboxInput = el as HTMLInputElement)}
           role="switch"
           type="checkbox"></input>

From 9013ebe3ab3c42a7ee078423a568f0da6eced267 Mon Sep 17 00:00:00 2001
From: Austin O'Neil <austinoneil@Austins-MacBook-Pro-2.local>
Date: Fri, 26 Apr 2024 16:19:30 -0700
Subject: [PATCH 3/6] Add check to e2e test

---
 .../src/components/modus-switch/modus-switch.e2e.ts            | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/stencil-workspace/src/components/modus-switch/modus-switch.e2e.ts b/stencil-workspace/src/components/modus-switch/modus-switch.e2e.ts
index 970a5082b..c4f7f5106 100644
--- a/stencil-workspace/src/components/modus-switch/modus-switch.e2e.ts
+++ b/stencil-workspace/src/components/modus-switch/modus-switch.e2e.ts
@@ -46,11 +46,12 @@ describe('modus-switch', () => {
 
     await page.setContent('<modus-switch></modus-switch>');
     const component = await page.find('modus-switch');
+    const input = await page.find('modus-switch >>> input');
+    expect(await input.getProperty('checked')).toBeFalsy();
 
     component.setProperty('checked', 'true');
     await page.waitForChanges();
 
-    const input = await page.find('modus-switch >>> input');
     expect(await input.getProperty('checked')).toBeTruthy();
   });
 

From e78f617e8c1748d1e03ff11f0792667f5c236f2a Mon Sep 17 00:00:00 2001
From: Austin O'Neil <austinoneil@Austins-MacBook-Pro-2.local>
Date: Fri, 26 Apr 2024 22:20:30 -0700
Subject: [PATCH 4/6] add id to switch, label

---
 .../modus-switch/modus-switch.e2e.ts          | 26 ++++++++-----------
 .../modus-switch/modus-switch.spec.tsx        |  2 +-
 .../components/modus-switch/modus-switch.tsx  |  8 +++---
 3 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/stencil-workspace/src/components/modus-switch/modus-switch.e2e.ts b/stencil-workspace/src/components/modus-switch/modus-switch.e2e.ts
index c4f7f5106..f3de11ad1 100644
--- a/stencil-workspace/src/components/modus-switch/modus-switch.e2e.ts
+++ b/stencil-workspace/src/components/modus-switch/modus-switch.e2e.ts
@@ -118,29 +118,25 @@ describe('modus-switch', () => {
     expect(element).toHaveClass('small');
   });
 
-  it('does not include "id" on input when "label" is not provided', async () => {
+  it('sets tabindex to -1 when disabled', async () => {
     const page = await newE2EPage();
-    await page.setContent('<modus-switch></modus-switch>');
+    await page.setContent('<modus-switch disabled></modus-switch>');
 
-    const element = await page.find('modus-switch >>> input');
-    expect(element).not.toHaveAttribute('id');
+    const element = await page.find('modus-switch >>> .modus-switch');
+    expect(element).toHaveAttribute('tabindex');
+    expect(element.getAttribute('tabindex')).toEqual('-1');
   });
 
-  it('renders "id" on input when "label" is provided', async () => {
+  it('renders with "for" on label equal to "id" on input', async () => {
     const page = await newE2EPage();
     await page.setContent('<modus-switch label="test label"></modus-switch>');
 
-    const element = await page.find('modus-switch >>> input');
-    expect(element).toHaveAttribute('id');
-    expect(element.id).toEqual('test label');
-  });
+    const input = await page.find('modus-switch >>> input');
+    const id = await input.getAttribute('id');
 
-  it('sets tabindex to -1 when disabled', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<modus-switch disabled></modus-switch>');
+    const label = await page.find('modus-switch >>> label');
+    const forAttr = await label.getAttribute('for');
 
-    const element = await page.find('modus-switch >>> .modus-switch');
-    expect(element).toHaveAttribute('tabindex');
-    expect(element.getAttribute('tabindex')).toEqual('-1');
+    expect(id).toEqual(forAttr);
   });
 });
diff --git a/stencil-workspace/src/components/modus-switch/modus-switch.spec.tsx b/stencil-workspace/src/components/modus-switch/modus-switch.spec.tsx
index 6a55ca37e..7a9473248 100644
--- a/stencil-workspace/src/components/modus-switch/modus-switch.spec.tsx
+++ b/stencil-workspace/src/components/modus-switch/modus-switch.spec.tsx
@@ -14,7 +14,7 @@ describe('modus-switch', () => {
             <div class="switch">
               <span class="slider"></span>
             </div>
-            <input role="switch" type="checkbox">
+            <input id="mwc_id_0_switch_input" role="switch" type="checkbox">
           </div>
         </mock:shadow-root>
       </modus-switch>
diff --git a/stencil-workspace/src/components/modus-switch/modus-switch.tsx b/stencil-workspace/src/components/modus-switch/modus-switch.tsx
index 7cd0bc9e1..da7dd95d2 100644
--- a/stencil-workspace/src/components/modus-switch/modus-switch.tsx
+++ b/stencil-workspace/src/components/modus-switch/modus-switch.tsx
@@ -1,4 +1,5 @@
 // eslint-disable-next-line
+import { generateElementId } from '../../utils/utils';
 import { Component, Prop, h, Event, EventEmitter, Listen } from '@stencil/core';
 
 @Component({
@@ -25,6 +26,7 @@ export class ModusSwitch {
   /** An event that fires on switch click. */
   @Event() switchClick: EventEmitter<boolean>;
 
+  private generatedId = generateElementId() + '_switch_input';
   checkboxInput: HTMLInputElement;
 
   @Listen('keydown')
@@ -71,13 +73,13 @@ export class ModusSwitch {
         <input
           aria-disabled={this.disabled ? 'true' : undefined}
           aria-label={this.ariaLabel}
-          checked={this.checked}
           disabled={this.disabled}
-          id={this.label}
+          id={this.generatedId}
+          checked={this.checked}
           ref={(el) => (this.checkboxInput = el as HTMLInputElement)}
           role="switch"
           type="checkbox"></input>
-        {this.label ? <label>{this.label}</label> : null}
+        {this.label ? <label htmlFor={this.generatedId}>{this.label}</label> : null}
       </div>
     );
   }

From d2aac04a54d4984b79c01143dd2a30f70d5b7210 Mon Sep 17 00:00:00 2001
From: Austin O'Neil <austin.m.oneil@gmail.com>
Date: Sat, 4 May 2024 22:23:21 -0700
Subject: [PATCH 5/6] delete duplicate checked

---
 stencil-workspace/src/components/modus-switch/modus-switch.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/stencil-workspace/src/components/modus-switch/modus-switch.tsx b/stencil-workspace/src/components/modus-switch/modus-switch.tsx
index f6ceb1854..767576ab7 100644
--- a/stencil-workspace/src/components/modus-switch/modus-switch.tsx
+++ b/stencil-workspace/src/components/modus-switch/modus-switch.tsx
@@ -76,7 +76,6 @@ export class ModusSwitch {
           checked={this.checked}
           disabled={this.disabled}
           id={this.generatedId}
-          checked={this.checked}
           ref={(el) => (this.checkboxInput = el as HTMLInputElement)}
           role="switch"
           type="checkbox"></input>

From 6cba23c5534a04baa2c123b3f9cef24ad82665ba Mon Sep 17 00:00:00 2001
From: Austin O'Neil <austin.m.oneil@gmail.com>
Date: Mon, 6 May 2024 17:40:26 -0700
Subject: [PATCH 6/6] add lint disabling for `h` import

---
 stencil-workspace/src/components/modus-switch/modus-switch.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/stencil-workspace/src/components/modus-switch/modus-switch.tsx b/stencil-workspace/src/components/modus-switch/modus-switch.tsx
index 767576ab7..92bb345dd 100644
--- a/stencil-workspace/src/components/modus-switch/modus-switch.tsx
+++ b/stencil-workspace/src/components/modus-switch/modus-switch.tsx
@@ -1,5 +1,6 @@
 // eslint-disable-next-line
 import { generateElementId } from '../../utils/utils';
+// eslint-disable-next-line
 import { Component, Prop, h, Event, EventEmitter, Listen } from '@stencil/core';
 
 @Component({