better aria-label values for Slider

NYPL · Oct 3, 2023 · 0ed1b21 · 0ed1b21
1 parent 74eb782
commit 0ed1b21
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 51 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 ## Updates
 
 - Temporarily renaming `FilterBar`, `MultiSelect`, `MultiSelectGroup`, `useMultiSelect`, and `useFilterBar` Storybook page files so they don't show up in the Storybook sidebar.
+- Updates the `Slider` component to use appropriate `aria-label` values for the slider thumbs and text input fields.
 
 ## 2.0.1 (September 28, 2023)
 

diff --git a/src/components/Slider/Slider.mdx b/src/components/Slider/Slider.mdx
@@ -7,10 +7,10 @@ import Link from "../Link/Link";
 
 # Slider
 
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `0.25.4`   |
-| Latest            | `2.0.0`    |
+| Component Version | DS Version   |
+| ----------------- | ------------ |
+| Added             | `0.25.4`     |
+| Latest            | `Prerelease` |
 
 ## Table of Contents
 

diff --git a/src/components/Slider/Slider.test.tsx b/src/components/Slider/Slider.test.tsx
@@ -131,7 +131,7 @@ describe("Slider", () => {
       expect(slider).toHaveAttribute("aria-valuemin", "0");
       expect(slider).toHaveAttribute("aria-valuemax", "100");
       expect(slider).toHaveAttribute("aria-valuenow", "50");
-      expect(slider).toHaveAttribute("aria-labelledBy", "sliderId-label");
+      expect(slider).toHaveAttribute("aria-label", "Label - slider handle");
     });
 
     it("renders the '(Required)' text in the label or hides it", () => {
@@ -174,7 +174,10 @@ describe("Slider", () => {
       );
 
       expect(screen.queryByText(/Label/i)).not.toBeInTheDocument();
-      expect(screen.getByRole("slider")).toHaveAttribute("aria-label", "Label");
+      expect(screen.getByRole("slider")).toHaveAttribute(
+        "aria-label",
+        "Label - slider handle"
+      );
     });
 
     it("hides the min/max static values", () => {
@@ -634,12 +637,18 @@ describe("Slider", () => {
       // This is set so the starting thumb can't go past the current end value.
       expect(slider[0]).toHaveAttribute("aria-valuemax", "75");
       expect(slider[0]).toHaveAttribute("aria-valuenow", "25");
-      expect(slider[0]).toHaveAttribute("aria-labelledBy", "sliderId-label");
+      expect(slider[0]).toHaveAttribute(
+        "aria-label",
+        "Label - slider handle for start value"
+      );
       // This is set so the ending thumb can't go below the current start value.
       expect(slider[1]).toHaveAttribute("aria-valuemin", "25");
       expect(slider[1]).toHaveAttribute("aria-valuemax", "100");
       expect(slider[1]).toHaveAttribute("aria-valuenow", "75");
-      expect(slider[1]).toHaveAttribute("aria-labelledBy", "sliderId-label");
+      expect(slider[1]).toHaveAttribute(
+        "aria-label",
+        "Label - slider handle for end value"
+      );
     });
 
     it("hides the label but adds it as an aria-label attribute", () => {
@@ -658,11 +667,11 @@ describe("Slider", () => {
       expect(screen.queryByText(/Label/i)).not.toBeInTheDocument();
       expect(screen.getAllByRole("slider")[0]).toHaveAttribute(
         "aria-label",
-        "Custom Label - start value"
+        "Custom Label - slider handle for start value"
       );
       expect(screen.getAllByRole("slider")[1]).toHaveAttribute(
         "aria-label",
-        "Custom Label - end value"
+        "Custom Label - slider handle for end value"
       );
     });
 

diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
@@ -252,7 +252,7 @@ export const Slider = chakra(
           },
         };
         const updatedLabel = !isRangeSlider
-          ? labelText
+          ? `${labelText} - value`
           : `${labelText} - ${type} value`;
         return (
           <TextInput
@@ -278,14 +278,15 @@ export const Slider = chakra(
           <ChakraRangeSlider
             // Both slider thumbs need values and should be in an array.
             aria-label={
-              !showLabel
-                ? [`${labelText} - start value`, `${labelText} - end value`]
-                : undefined
-            }
-            // Both slider thumbs need values and should be in an array,
-            // even if it's the same label.
-            aria-labelledby={
-              showLabel ? [`${id}-label`, `${id}-label`] : undefined
+              showLabel
+                ? [
+                    `${labelText} - slider handle for start value`,
+                    `${labelText} - slider handle for end value`,
+                  ]
+                : [
+                    `${labelText} - slider handle for start value`,
+                    `${labelText} - slider handle for end value`,
+                  ]
             }
             value={currentValue as number[]}
             // Make the thumbs larger.
@@ -300,8 +301,7 @@ export const Slider = chakra(
           </ChakraRangeSlider>
         ) : (
           <ChakraSlider
-            aria-label={!showLabel ? labelText : undefined}
-            aria-labelledby={`${id}-label`}
+            aria-label={`${labelText} - slider handle`}
             value={currentValue as number}
             // Make the thumb larger.
             size="lg"

diff --git a/src/components/Slider/__snapshots__/Slider.test.tsx.snap b/src/components/Slider/__snapshots__/Slider.test.tsx.snap
@@ -89,7 +89,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 1`] = `
         />
       </div>
       <div
-        aria-labelledby="defaultRangeSlider-label"
+        aria-label="Label - slider handle for start value"
         aria-orientation="horizontal"
         aria-valuemax={75}
         aria-valuemin={0}
@@ -114,7 +114,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 1`] = `
         tabIndex={0}
       />
       <div
-        aria-labelledby="defaultRangeSlider-label"
+        aria-label="Label - slider handle for end value"
         aria-orientation="horizontal"
         aria-valuemax={100}
         aria-valuemin={25}
@@ -286,7 +286,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 2`] = `
         />
       </div>
       <div
-        aria-labelledby="errored-label"
+        aria-label="Label - slider handle for start value"
         aria-orientation="horizontal"
         aria-valuemax={75}
         aria-valuemin={0}
@@ -311,7 +311,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 2`] = `
         tabIndex={0}
       />
       <div
-        aria-labelledby="errored-label"
+        aria-label="Label - slider handle for end value"
         aria-orientation="horizontal"
         aria-valuemax={100}
         aria-valuemin={25}
@@ -487,7 +487,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 3`] = `
         />
       </div>
       <div
-        aria-labelledby="required-label"
+        aria-label="Label - slider handle for start value"
         aria-orientation="horizontal"
         aria-valuemax={75}
         aria-valuemin={0}
@@ -512,7 +512,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 3`] = `
         tabIndex={0}
       />
       <div
-        aria-labelledby="required-label"
+        aria-label="Label - slider handle for end value"
         aria-orientation="horizontal"
         aria-valuemax={100}
         aria-valuemin={25}
@@ -680,7 +680,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 4`] = `
       </div>
       <div
         aria-disabled={true}
-        aria-labelledby="disabled-label"
+        aria-label="Label - slider handle for start value"
         aria-orientation="horizontal"
         aria-valuemax={75}
         aria-valuemin={0}
@@ -705,7 +705,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 4`] = `
       />
       <div
         aria-disabled={true}
-        aria-labelledby="disabled-label"
+        aria-label="Label - slider handle for end value"
         aria-orientation="horizontal"
         aria-valuemax={100}
         aria-valuemin={25}
@@ -861,7 +861,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 5`] = `
         />
       </div>
       <div
-        aria-label="Label - start value"
+        aria-label="Label - slider handle for start value"
         aria-orientation="horizontal"
         aria-valuemax={75}
         aria-valuemin={0}
@@ -886,7 +886,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 5`] = `
         tabIndex={0}
       />
       <div
-        aria-label="Label - end value"
+        aria-label="Label - slider handle for end value"
         aria-orientation="horizontal"
         aria-valuemax={100}
         aria-valuemin={25}
@@ -1011,7 +1011,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 6`] = `
         />
       </div>
       <div
-        aria-labelledby="noVisibleValues-label"
+        aria-label="Label - slider handle for start value"
         aria-orientation="horizontal"
         aria-valuemax={75}
         aria-valuemin={0}
@@ -1036,7 +1036,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 6`] = `
         tabIndex={0}
       />
       <div
-        aria-labelledby="noVisibleValues-label"
+        aria-label="Label - slider handle for end value"
         aria-orientation="horizontal"
         aria-valuemax={100}
         aria-valuemin={25}
@@ -1133,7 +1133,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 7`] = `
         />
       </div>
       <div
-        aria-label="Label - start value"
+        aria-label="Label - slider handle for start value"
         aria-orientation="horizontal"
         aria-valuemax={75}
         aria-valuemin={0}
@@ -1158,7 +1158,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 7`] = `
         tabIndex={0}
       />
       <div
-        aria-label="Label - end value"
+        aria-label="Label - slider handle for end value"
         aria-orientation="horizontal"
         aria-valuemax={100}
         aria-valuemin={25}
@@ -1255,7 +1255,7 @@ exports[`Slider Single Slider renders the UI snapshot correctly 1`] = `
         />
       </div>
       <div
-        aria-labelledby="defaultSlider-label"
+        aria-label="Label - slider handle"
         aria-orientation="horizontal"
         aria-valuemax={100}
         aria-valuemin={0}
@@ -1297,7 +1297,7 @@ exports[`Slider Single Slider renders the UI snapshot correctly 1`] = `
         className="css-79elbk"
       >
         <input
-          aria-label="Label"
+          aria-label="Label - value"
           autoComplete={null}
           className="chakra-input css-0"
           disabled={false}
@@ -1395,7 +1395,7 @@ exports[`Slider Single Slider renders the UI snapshot correctly 2`] = `
         />
       </div>
       <div
-        aria-labelledby="errored-label"
+        aria-label="Label - slider handle"
         aria-orientation="horizontal"
         aria-valuemax={100}
         aria-valuemin={0}
@@ -1438,7 +1438,7 @@ exports[`Slider Single Slider renders the UI snapshot correctly 2`] = `
       >
         <input
           aria-invalid={true}
-          aria-label="Label - There is an error related to this field."
+          aria-label="Label - value - There is an error related to this field."
           autoComplete={null}
           className="chakra-input css-0"
           disabled={false}
@@ -1546,7 +1546,7 @@ exports[`Slider Single Slider renders the UI snapshot correctly 3`] = `
         />
       </div>
       <div
-        aria-labelledby="required-label"
+        aria-label="Label - slider handle"
         aria-orientation="horizontal"
         aria-valuemax={100}
         aria-valuemin={0}
@@ -1588,7 +1588,7 @@ exports[`Slider Single Slider renders the UI snapshot correctly 3`] = `
         className="css-79elbk"
       >
         <input
-          aria-label="Label"
+          aria-label="Label - value"
           aria-required={true}
           autoComplete={null}
           className="chakra-input css-0"
@@ -1690,7 +1690,7 @@ exports[`Slider Single Slider renders the UI snapshot correctly 4`] = `
       </div>
       <div
         aria-disabled={true}
-        aria-labelledby="disabled-label"
+        aria-label="Label - slider handle"
         aria-orientation="horizontal"
         aria-valuemax={100}
         aria-valuemin={0}
@@ -1731,7 +1731,7 @@ exports[`Slider Single Slider renders the UI snapshot correctly 4`] = `
         className="css-79elbk"
       >
         <input
-          aria-label="Label"
+          aria-label="Label - value"
           autoComplete={null}
           className="chakra-input css-0"
           disabled={true}
@@ -1822,7 +1822,7 @@ exports[`Slider Single Slider renders the UI snapshot correctly 5`] = `
         />
       </div>
       <div
-        aria-label="Label"
+        aria-label="Label - slider handle"
         aria-orientation="horizontal"
         aria-valuemax={100}
         aria-valuemin={0}
@@ -1864,7 +1864,7 @@ exports[`Slider Single Slider renders the UI snapshot correctly 5`] = `
         className="css-79elbk"
       >
         <input
-          aria-label="Label"
+          aria-label="Label - value"
           autoComplete={null}
           className="chakra-input css-0"
           disabled={false}
@@ -1948,7 +1948,7 @@ exports[`Slider Single Slider renders the UI snapshot correctly 6`] = `
         />
       </div>
       <div
-        aria-labelledby="noVisibleValues-label"
+        aria-label="Label - slider handle"
         aria-orientation="horizontal"
         aria-valuemax={100}
         aria-valuemin={0}
@@ -2046,7 +2046,7 @@ exports[`Slider Single Slider renders the UI snapshot correctly 7`] = `
         />
       </div>
       <div
-        aria-label="Label"
+        aria-label="Label - slider handle"
         aria-orientation="horizontal"
         aria-valuemax={100}
         aria-valuemin={0}
@@ -2147,7 +2147,7 @@ exports[`Slider Single Slider renders the UI snapshot correctly 8`] = `
         />
       </div>
       <div
-        aria-labelledby="chakra-label"
+        aria-label="Label - slider handle"
         aria-orientation="horizontal"
         aria-valuemax={100}
         aria-valuemin={0}
@@ -2189,7 +2189,7 @@ exports[`Slider Single Slider renders the UI snapshot correctly 8`] = `
         className="css-79elbk"
       >
         <input
-          aria-label="Label"
+          aria-label="Label - value"
           autoComplete={null}
           className="chakra-input css-0"
           disabled={false}
@@ -2288,7 +2288,7 @@ exports[`Slider Single Slider renders the UI snapshot correctly 9`] = `
         />
       </div>
       <div
-        aria-labelledby="props-label"
+        aria-label="Label - slider handle"
         aria-orientation="horizontal"
         aria-valuemax={100}
         aria-valuemin={0}
@@ -2330,7 +2330,7 @@ exports[`Slider Single Slider renders the UI snapshot correctly 9`] = `
         className="css-79elbk"
       >
         <input
-          aria-label="Label"
+          aria-label="Label - value"
           autoComplete={null}
           className="chakra-input css-0"
           disabled={false}