feat: Adding a new ariaLabelledby prop for use with Assistive Technol…

…ogies

src/components/ReactSlider/ReactSlider.jsx

@@ -261,6 +261,13 @@ class ReactSlider extends React.Component {
         // eslint-disable-next-line zillow/react/require-default-props
         ariaLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
 
+        /**
+         * aria-labelledby for screen-readers to apply to the thumbs.
+         * Used when slider rendered with separate label.
+         */
+        // eslint-disable-next-line zillow/react/require-default-props
+        ariaLabelledby: PropTypes.string,
+
         /**
          * aria-valuetext for screen-readers.
          * Can be a static string, or a function that returns a string.
@@ -995,6 +1002,7 @@ class ReactSlider extends React.Component {
             'aria-label': Array.isArray(this.props.ariaLabel)
                 ? this.props.ariaLabel[i]
                 : this.props.ariaLabel,
+            'aria-labelledby': this.props.ariaLabelledby,
         };
 
         const state = {

src/components/ReactSlider/ReactSlider.md

@@ -49,6 +49,7 @@ Double slider
     trackClassName="example-track"
     defaultValue={[0, 100]}
     ariaLabel={['Lower thumb', 'Upper thumb']}
+    ariaLabelledby="Slider label"
     ariaValuetext={state => `Thumb value ${state.valueNow}`}
     renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
     pearling
@@ -65,6 +66,7 @@ Multi slider
     trackClassName="example-track"
     defaultValue={[0, 50, 100]}
     ariaLabel={['Leftmost thumb', 'Middle thumb', 'Rightmost thumb']}
+    ariaLabelledby="Slider label"
     renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
     pearling
     minDistance={10}
@@ -80,6 +82,7 @@ Vertical slider
     trackClassName="example-track"
     defaultValue={[0, 50, 100]}
     ariaLabel={['Lowest thumb', 'Middle thumb', 'Top thumb']}
+    ariaLabelledby="Slider label"
     renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
     orientation="vertical"
     invert
@@ -99,6 +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"
     renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
     orientation="vertical"
     invert