feat: Add support for multiple values in ariaLabelledby

zillow · May 18, 2021 · 28eb332 · 28eb332
1 parent 7d8cc4d
commit 28eb332
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/src/components/ReactSlider/ReactSlider.jsx b/src/components/ReactSlider/ReactSlider.jsx
@@ -264,9 +264,14 @@ class ReactSlider extends React.Component {
         /**
          * aria-labelledby for screen-readers to apply to the thumbs.
          * Used when slider rendered with separate label.
+         * Use an array for more than one thumb.
+         * The length of the array must match the number of thumbs in the value array.
          */
         // eslint-disable-next-line zillow/react/require-default-props
-        ariaLabelledby: PropTypes.string,
+        ariaLabelledby: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.arrayOf(PropTypes.string),
+        ]),
 
         /**
          * aria-valuetext for screen-readers.
@@ -1002,7 +1007,9 @@ class ReactSlider extends React.Component {
             'aria-label': Array.isArray(this.props.ariaLabel)
                 ? this.props.ariaLabel[i]
                 : this.props.ariaLabel,
-            'aria-labelledby': this.props.ariaLabelledby,
+            'aria-labelledby': Array.isArray(this.props.ariaLabelledby)
+                ? this.props.ariaLabelledby[i]
+                : this.props.ariaLabelledby,
         };
 
         const state = {

diff --git a/src/components/ReactSlider/ReactSlider.md b/src/components/ReactSlider/ReactSlider.md
@@ -49,7 +49,7 @@ Double slider
     trackClassName="example-track"
     defaultValue={[0, 100]}
     ariaLabel={['Lower thumb', 'Upper thumb']}
-    ariaLabelledby="Slider label"
+    ariaLabelledby={['Left thumb label', 'Right thumb label']}
     ariaValuetext={state => `Thumb value ${state.valueNow}`}
     renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
     pearling
@@ -66,7 +66,7 @@ Multi slider
     trackClassName="example-track"
     defaultValue={[0, 50, 100]}
     ariaLabel={['Leftmost thumb', 'Middle thumb', 'Rightmost thumb']}
-    ariaLabelledby="Slider label"
+    ariaLabelledby={['Left thumb label', 'Middle thumb label', 'Right thumb label']}
     renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
     pearling
     minDistance={10}
@@ -82,7 +82,7 @@ Vertical slider
     trackClassName="example-track"
     defaultValue={[0, 50, 100]}
     ariaLabel={['Lowest thumb', 'Middle thumb', 'Top thumb']}
-    ariaLabelledby="Slider label"
+    ariaLabelledby={['Left thumb label', 'Middle thumb label', 'Right thumb label']}
     renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
     orientation="vertical"
     invert
@@ -102,7 +102,7 @@ Vertical slider with marks at an interval
     defaultValue={[0, 50, 100]}
     marks={25}
     ariaLabel={['Lowest thumb', 'Middle thumb', 'Top thumb']}
-    ariaLabelledby="Slider label"
+    ariaLabelledby={['Left thumb label', 'Middle thumb label', 'Right thumb label']}
     renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
     orientation="vertical"
     invert