From 87d7eac5c5c59805c3316d7044303464d636fd40 Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Fri, 16 Feb 2024 15:46:52 -0800
Subject: [PATCH] chore(checkbox): fix aria for checkbox list demo

PiperOrigin-RevId: 607822159
---
 checkbox/demo/stories.ts | 63 +++++++++++++++++++++++-----------------
 1 file changed, 37 insertions(+), 26 deletions(-)

diff --git a/checkbox/demo/stories.ts b/checkbox/demo/stories.ts
index f91d888804..263be17a01 100644
--- a/checkbox/demo/stories.ts
+++ b/checkbox/demo/stories.ts
@@ -38,11 +38,16 @@ const withLabels: MaterialStoryInit<StoryKnobs> = {
   styles: [
     labelStyles,
     css`
-      .column {
+      ol {
+        all: unset;
         display: flex;
         flex-direction: column;
       }
 
+      li {
+        all: unset;
+      }
+
       label {
         gap: 0;
       }
@@ -50,31 +55,37 @@ const withLabels: MaterialStoryInit<StoryKnobs> = {
   ],
   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>
     `;
   },
 };