fix(TagsInput): fix a11y issues

lumada-design · Aug 18, 2023 · 4948021 · 4948021
1 parent a66b3cc
commit 4948021
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/packages/core/src/components/TagsInput/TagsInput.stories.tsx b/packages/core/src/components/TagsInput/TagsInput.stories.tsx
@@ -45,6 +45,7 @@ export const Main: StoryObj<HvTagsInputProps> = {
     label: "Enter your tags",
     description: "This is where you enter your tags",
     placeholder: "Enter value",
+    "aria-label": "The label",
     disabled: false,
     readOnly: false,
     required: false,
@@ -76,41 +77,45 @@ export const Variants: StoryObj<HvTagsInputProps> = {
     return (
       <div className={css(styles.root)}>
         <HvTagsInput
-          id="tags-list-5"
+          id="tags-list-variants-1"
           label="Required"
           aria-label="Required"
           placeholder="Enter value"
           required
           value={[{ label: "tag 1" }, { label: "tag 2" }, { label: "tag 3" }]}
         />
         <HvTagsInput
-          id="tags-list-6"
+          id="tags-list-variants-2"
           label="Disabled"
           aria-label="Disabled"
           placeholder="Enter value"
           disabled
           value={[
-            { label: "tag 1", disabled: true },
-            { label: "tag 2", disabled: true },
-            { label: "tag 3", disabled: true },
+            { label: "tag 4", disabled: true },
+            { label: "tag 5", disabled: true },
+            { label: "tag 6", disabled: true },
           ]}
         />
         <HvTagsInput
-          id="tags-list-7"
+          id="tags-list-variants-3"
           label="Readonly"
           aria-label="Readonly"
           placeholder="Enter value"
           readOnly
-          value={[{ label: "tag 1" }, { label: "tag 2" }, { label: "tag 3" }]}
+          value={[{ label: "tag 7" }, { label: "tag 8" }, { label: "tag 9" }]}
         />
         <HvTagsInput
-          id="tags-list-8"
+          id="tags-list-variants-4"
           label="Invalid"
           aria-label="Invalid"
           placeholder="Enter value"
           status="invalid"
           statusMessage="Oh no!"
-          value={[{ label: "tag 1" }, { label: "tag 2" }, { label: "tag 3" }]}
+          value={[
+            { label: "tag 10" },
+            { label: "tag 11" },
+            { label: "tag 12" },
+          ]}
         />
       </div>
     );
@@ -385,6 +390,7 @@ export const TagsCounterValidation: StoryObj<HvTagsInputProps> = {
         maxTagsQuantity={3}
         countCharProps={{
           "aria-label": `You have inserted ${tagsLength} tags`,
+          role: "status",
         }}
       />
     );

diff --git a/packages/core/src/components/TagsInput/TagsInput.tsx b/packages/core/src/components/TagsInput/TagsInput.tsx
@@ -599,7 +599,7 @@ export const HvTagsInput = (props: HvTagsInputProps) => {
                   gutters: classes.listItemGutters,
                   root: classes.listItemRoot,
                 }}
-                id={`tag-${i}`}
+                id={setId(elementId, `tag-${i}`)}
               >
                 <HvTag
                   label={label}
@@ -637,7 +637,7 @@ export const HvTagsInput = (props: HvTagsInputProps) => {
               root: classes.tagInputContainerRoot,
               gutters: classes.listItemGutters,
             }}
-            id={`tag-${value.length}`}
+            id={setId(elementId, `tag-${value.length}`)}
           >
             <HvInput
               value={tagInput}