chore: fix demo a11y for switch and checkbox

PiperOrigin-RevId: 556113327

checkbox/demo/stories.ts

@@ -49,31 +49,31 @@ const withLabels: MaterialStoryInit<StoryKnobs> = {
   render({disabled}) {
     return html`
       <div class="column" role="group" aria-label="Animals">
-        <label role="presentation">
+        <label>
           <md-checkbox
             ?disabled=${disabled}
             aria-label="Cats"
             touch-target="wrapper"
           ></md-checkbox>
-          <span aria-hidden="true">Cats</span>
+          Cats
         </label>
-        <label role="presentation">
+        <label>
           <md-checkbox
             checked
             ?disabled=${disabled}
             aria-label="dogs"
             touch-target="wrapper"
           ></md-checkbox>
-          <span aria-hidden="true">Dogs</span>
+          Dogs
         </label>
-        <label role="presentation">
+        <label>
           <md-checkbox
             indeterminate
             ?disabled=${disabled}
             aria-label="Birds"
             touch-target="wrapper"
           ></md-checkbox>
-          <span aria-hidden="true">Birds</span>
+          Birds
         </label>
       </div>
     `;

switch/demo/demo.ts

@@ -8,7 +8,7 @@ import './index.js';
 import './material-collection.js';
 
 import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
-import {boolInput, Knob, textInput} from './index.js';
+import {boolInput, Knob} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
@@ -18,10 +18,6 @@ const collection =
       new Knob('selected', {defaultValue: false, ui: boolInput()}),
       new Knob('icons', {defaultValue: false, ui: boolInput()}),
       new Knob('showOnlySelectedIcon', {defaultValue: false, ui: boolInput()}),
-      new Knob('value', {defaultValue: 'on', ui: textInput()}),
-      new Knob('name', {defaultValue: '', ui: textInput()}),
-      new Knob('aria-label', {defaultValue: '', ui: textInput()}),
-      new Knob('aria-labelledby', {defaultValue: '', ui: textInput()}),
     ]);
 
 collection.addStories(...materialInitsToStoryInits(stories));

switch/demo/stories.ts

@@ -7,7 +7,7 @@
 import '@material/web/switch/switch.js';
 
 import {labelStyles, MaterialStoryInit} from './material-collection.js';
-import {html, nothing} from 'lit';
+import {css, html} from 'lit';
 
 /** Knob types for Switch stories. */
 export interface StoryKnobs {
@@ -15,45 +15,62 @@ export interface StoryKnobs {
   selected: boolean;
   icons: boolean;
   showOnlySelectedIcon: boolean;
-  value: string;
-  name: string;
-  'aria-label': string;
-  'aria-labelledby': string;
 }
 
 const standard: MaterialStoryInit<StoryKnobs> = {
-  name: '<md-switch>',
+  name: 'Switch',
   render(knobs) {
     return html`
       <md-switch
-          .disabled=${knobs.disabled}
-          .selected=${knobs.selected}
-          .icons=${knobs.icons}
-          .showOnlySelectedIcon=${knobs.showOnlySelectedIcon}
-          .value=${knobs.value}
-          aria-label=${knobs['aria-label'] || nothing}
-          aria-labelledby=${knobs['aria-labelledby'] || nothing}>
-      </md-switch>`;
+        aria-label="An example switch"
+        .disabled=${knobs.disabled}
+        .selected=${knobs.selected}
+        .icons=${knobs.icons}
+        .showOnlySelectedIcon=${knobs.showOnlySelectedIcon}
+      ></md-switch>`;
   }
 };
 
 const labeled: MaterialStoryInit<StoryKnobs> = {
-  name: 'Labeled',
-  styles: labelStyles,
+  name: 'With labels',
+  styles: [
+    labelStyles, css`
+      .column {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        width: 200px;
+      }
+
+      label {
+        justify-content: space-between;
+      }
+    `
+  ],
   render(knobs) {
     return html`
-      <label>
-        Switch
-        <md-switch
-          .disabled=${knobs.disabled}
-          .selected=${knobs.selected}
-          .icons=${knobs.icons}
-          .showOnlySelectedIcon=${knobs.showOnlySelectedIcon}
-          .value=${knobs.value}
-          aria-label=${knobs['aria-label'] || nothing}
-          aria-labelledby=${knobs['aria-labelledby'] || nothing}>
-        </md-switch>
-      </label>`;
+      <div class="column" role="group" aria-label="Settings">
+        <label>
+          Wi-Fi
+          <md-switch
+            aria-label="Wi-Fi"
+            .disabled=${knobs.disabled}
+            .icons=${knobs.icons}
+            .showOnlySelectedIcon=${knobs.showOnlySelectedIcon}
+          ></md-switch>
+        </label>
+        <label>
+          Bluetooth
+          <md-switch
+            aria-label="Bluetooth"
+            selected
+            .disabled=${knobs.disabled}
+            .icons=${knobs.icons}
+            .showOnlySelectedIcon=${knobs.showOnlySelectedIcon}
+          ></md-switch>
+        </label>
+      </div>
+    `;
   }
 };