feat(store-ui): WAI-ARIA

vtex · Aug 24, 2021 · 171ee4d · 171ee4d
1 parent 6399ac9
commit 171ee4d
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 8 deletions.
diff --git a/packages/store-ui/src/atoms/Slider/README.md b/packages/store-ui/src/atoms/Slider/README.md
@@ -64,13 +64,17 @@ function Example() {
 
 ### Props
 
-| Prop       | Type    | Required | Default      |
-| ---------- | ------- | -------- | ------------ |
-| min        | number  | true     |              |
-| max        | number  | true     |              |
-| showValues | boolean | false    | true         |
-| testId     | string  | false    | store-slider |
-| onChange   | void    | false    |              |
+| Prop             | Type    | Required | Default      |
+| ---------------- | ------- | -------- | ------------ |
+| min              | number  | true     |              |
+| max              | number  | true     |              |
+| showValues       | boolean | false    | true         |
+| testId           | string  | false    | store-slider |
+| onChange         | void    | false    |              |
+| onChange         | void    | false    |              |
+| onChange         | void    | false    |              |
+| ariaLabel        | string  | false    |              |
+| getAriaValueText | void    | false    |              |
 
 ## TODO
 

diff --git a/packages/store-ui/src/atoms/Slider/Slider.tsx b/packages/store-ui/src/atoms/Slider/Slider.tsx
@@ -1,14 +1,38 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 
 export type SliderProps = {
+  /**
+   * The minimum value of the slider.
+   */
   min: number
+  /**
+   * The maximum value of the slider.
+   */
   max: number
+  /**
+   * Show selected values.
+   *
+   * @default true
+   */
   showValues?: boolean
   /**
    * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   *
+   * @default 'store-slider'
    */
   testId?: string
+  /**
+   * Callback that fires when the slider value changes.
+   */
   onChange?: (value: { min: number; max: number }) => void
+  /**
+   * Set a human-readable name for the slider.
+   */
+  ariaLabel?: string
+  /**
+   * A function used to set a human-readable value text based on the slider's current value.
+   */
+  getAriaValueText?(value: number, thumb?: 'min' | 'max'): string
 }
 
 const Slider = ({
@@ -17,6 +41,8 @@ const Slider = ({
   onChange,
   testId = 'store-slider',
   showValues = true,
+  ariaLabel,
+  getAriaValueText,
 }: SliderProps) => {
   const [minVal, setMinVal] = useState(min)
   const [maxVal, setMaxVal] = useState(max)
@@ -54,7 +80,13 @@ const Slider = ({
   }, [minVal, maxVal, onChange])
 
   return (
-    <div data-store-slider data-testid={testId}>
+    <div
+      data-store-slider
+      data-testid={testId}
+      aria-label={ariaLabel}
+      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+      role="slider"
+    >
       <div data-store-slider-range>
         <div ref={range} data-store-slider-track />
         <input
@@ -70,6 +102,13 @@ const Slider = ({
           }}
           data-store-slider-thumb="left"
           style={{ zIndex: minVal > max - 100 ? 5 : 'auto' }}
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-valuenow={minVal}
+          aria-label={String(minVal)}
+          aria-labelledby={
+            getAriaValueText ? getAriaValueText(minVal, 'min') : undefined
+          }
         />
         <input
           type="range"
@@ -83,6 +122,13 @@ const Slider = ({
             maxValRef.current = value
           }}
           data-store-slider-thumb="right"
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-valuenow={maxVal}
+          aria-label={String(maxVal)}
+          aria-labelledby={
+            getAriaValueText ? getAriaValueText(maxVal, 'max') : undefined
+          }
         />
       </div>
       {showValues && (