Switch: Completely remove aria-checked from switch, set id on input to be the same as label, replace brittle unit test with more precise e2e test

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');
+  });
 });

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>

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>