fix(slider): ensure slider and input are both labelled by the label w…

…hen applicable (#10400) Co-authored-by: DAK <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jan 14, 2022 · c235676 · c235676
1 parent e95d6ad
commit c235676
Showing 1 changed file with 2 additions and 5 deletions.
diff --git a/packages/react/src/components/Slider/Slider.js b/packages/react/src/components/Slider/Slider.js
@@ -603,10 +603,7 @@ export default class Slider extends PureComponent {
             ? classNames(`${prefix}--form-item`, className)
             : `${prefix}--form-item`
         }>
-        <label
-          htmlFor={`${id}-input-for-slider`}
-          className={labelClasses}
-          id={labelId}>
+        <label htmlFor={id} className={labelClasses} id={labelId}>
           {labelText}
         </label>
         <div className={`${prefix}--slider-container`}>
@@ -630,7 +627,6 @@ export default class Slider extends PureComponent {
               role="slider"
               id={id}
               tabIndex={0}
-              aria-labelledby={labelId}
               aria-valuemax={max}
               aria-valuemin={min}
               aria-valuenow={value}
@@ -657,6 +653,7 @@ export default class Slider extends PureComponent {
             name={name}
             className={inputClasses}
             value={value}
+            aria-labelledby={!ariaLabelInput ? labelId : null}
             aria-label={ariaLabelInput ? ariaLabelInput : null}
             disabled={disabled}
             required={required}