docs: add accessible label to tag stories (#1606)

solid-design-system · Nov 6, 2024 · 484f683 · 484f683
1 parent 88fa31e
commit 484f683
Showing 1 changed file with 5 additions and 0 deletions.
diff --git a/packages/components/src/templates/tag.stories.ts b/packages/components/src/templates/tag.stories.ts
@@ -25,28 +25,33 @@ export const filterTagGroupMorningstarRating = {
   name: 'Filter Tag Group with Morningstar Rating',
   render: () => html`
     <sd-tag selected>
+      <label class="sr-only">5 stars</label>
       <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
       <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
       <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
       <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
       <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
     </sd-tag>
     <sd-tag>
+      <label class="sr-only">4 stars</label>
       <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
       <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
       <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
       <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
     </sd-tag>
     <sd-tag>
+      <label class="sr-only">3 stars</label>
       <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
       <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
       <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
     </sd-tag>
     <sd-tag>
+      <label class="sr-only">2 stars</label>
       <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
       <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
     </sd-tag>
     <sd-tag>
+      <label class="sr-only">1 star</label>
       <sd-icon name="system/star-filled" color="currentColor"></sd-icon>
     </sd-tag>
   `