chore(checkbox): fix aria for checkbox list demo

PiperOrigin-RevId: 607822159
material-components · Feb 16, 2024 · 87d7eac · 87d7eac
1 parent 4d26841
commit 87d7eac
Showing 1 changed file with 37 additions and 26 deletions.
diff --git a/checkbox/demo/stories.ts b/checkbox/demo/stories.ts
@@ -38,43 +38,54 @@ const withLabels: MaterialStoryInit<StoryKnobs> = {
   styles: [
     labelStyles,
     css`
-      .column {
+      ol {
+        all: unset;
         display: flex;
         flex-direction: column;
       }
 
+      li {
+        all: unset;
+      }
+
       label {
         gap: 0;
       }
     `,
   ],
   render({disabled}) {
     return html`
-      <div class="column" role="group" aria-label="Animals">
-        <label>
-          <md-checkbox
-            ?disabled=${disabled}
-            aria-label="Cats"
-            touch-target="wrapper"></md-checkbox>
-          Cats
-        </label>
-        <label>
-          <md-checkbox
-            checked
-            ?disabled=${disabled}
-            aria-label="dogs"
-            touch-target="wrapper"></md-checkbox>
-          Dogs
-        </label>
-        <label>
-          <md-checkbox
-            indeterminate
-            ?disabled=${disabled}
-            aria-label="Birds"
-            touch-target="wrapper"></md-checkbox>
-          Birds
-        </label>
-      </div>
+      <ol aria-label="Animals">
+        <li>
+          <label>
+            <md-checkbox
+              ?disabled=${disabled}
+              aria-label="Cats"
+              touch-target="wrapper"></md-checkbox>
+            Cats
+          </label>
+        </li>
+        <li>
+          <label>
+            <md-checkbox
+              checked
+              ?disabled=${disabled}
+              aria-label="dogs"
+              touch-target="wrapper"></md-checkbox>
+            Dogs
+          </label>
+        </li>
+        <li>
+          <label>
+            <md-checkbox
+              indeterminate
+              ?disabled=${disabled}
+              aria-label="Birds"
+              touch-target="wrapper"></md-checkbox>
+            Birds
+          </label>
+        </li>
+      </ol>
     `;
   },
 };