Switch: Set aria-checked value to "true" and "false" (#2450)

Co-authored-by: Austin O'Neil <austinoneil@Austins-MacBook-Pro-2.local>
trimble-oss · Apr 19, 2024 · 4b0ae7e · 4b0ae7e
1 parent 078afdc
commit 4b0ae7e
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 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
@@ -94,12 +94,14 @@ 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();

diff --git 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 aria-checked="false" role="switch" type="checkbox">
           </div>
         </mock:shadow-root>
       </modus-switch>
@@ -33,7 +33,7 @@ describe('modus-switch', () => {
             <div class="switch">
               <span class="slider"></span>
             </div>
-            <input role="switch" aria-disabled="true" disabled type="checkbox">
+            <input aria-checked="false" role="switch" aria-disabled="true" disabled 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
@@ -11,7 +11,7 @@ export class ModusSwitch {
   @Prop() ariaLabel: string | null;
 
   /** (optional) Whether the switch is checked. */
-  @Prop({ mutable: true }) checked: boolean;
+  @Prop({ mutable: true }) checked = false;
 
   /** (optional) Whether the switch is disabled. */
   @Prop() disabled: boolean;
@@ -69,7 +69,7 @@ export class ModusSwitch {
           <span class={`slider`}></span>
         </div>
         <input
-          aria-checked={this.checked}
+          aria-checked={String(this.checked)}
           aria-disabled={this.disabled ? 'true' : undefined}
           aria-label={this.ariaLabel}
           checked={this.checked}