Slider accessibility name calculation fixes for Chrome (#1148) (#1389)

Author: majornista

packages/@react-aria/color/src/useColorSlider.ts

@@ -37,6 +37,8 @@ export function useColorSlider(props: ColorSliderAriaOptions, state: ColorSlider
   let {containerProps, trackProps, labelProps} = useSlider(props, state, trackRef);
   let {inputProps, thumbProps} = useSliderThumb({
     ...props,
+    // Avoid label being repeated on the thumb since it will already be labeled by the group
+    'aria-label': undefined,
     index: 0
   }, state);
 

packages/@react-aria/slider/src/useSliderThumb.ts

@@ -40,7 +40,8 @@ export function useSliderThumb(
     isDisabled,
     validationState,
     trackRef,
-    inputRef
+    inputRef,
+    'aria-label': ariaLabel
   } = opts;
 
   let isVertical = opts.orientation === 'vertical';
@@ -49,10 +50,16 @@ export function useSliderThumb(
   let {addGlobalListener, removeGlobalListener} = useGlobalListeners();
 
   let labelId = sliderIds.get(state);
+  let id = getSliderThumbId(state, index);
+  let thumbId = ariaLabel ? `${id}-thumb` : undefined;
   const {labelProps, fieldProps} = useLabel({
     ...opts,
-    id: getSliderThumbId(state, index),
-    'aria-labelledby': `${labelId} ${opts['aria-labelledby'] ?? ''}`.trim()
+    id,
+    // Override due to a Chrome bug where aria-labelledby cannot be a self-reference.
+    // Instead, we put the label on the thumb element and point to it with aria-labelledby.
+    // See https://bugs.chromium.org/p/chromium/issues/detail?id=1159567
+    'aria-label': undefined,
+    'aria-labelledby': `${labelId} ${opts['aria-labelledby'] ?? ''} ${ariaLabel ? thumbId : ''}`.trim()
   });
 
   const value = state.values[index];
@@ -165,6 +172,8 @@ export function useSliderThumb(
     thumbProps: !isDisabled ? mergeProps(
       moveProps,
       {
+        id: thumbId,
+        'aria-label': ariaLabel,
         onMouseDown: () => {onDown(null);},
         onPointerDown: (e: React.PointerEvent) => {onDown(e.pointerId);},
         onTouchStart: (e: React.TouchEvent) => {onDown(e.changedTouches[0].identifier);}

packages/@react-aria/slider/test/useSliderThumb.test.js

@@ -88,11 +88,15 @@ describe('useSliderThumb', () => {
         return {props0, props1, labelProps, containerProps};
       }).result;
 
-      let {inputProps: inputProps0} = result.current.props0;
-      let {inputProps: inputProps1} = result.current.props1;
+      let {inputProps: inputProps0, thumbProps: thumbProps0} = result.current.props0;
+      let {inputProps: inputProps1, thumbProps: thumbProps1} = result.current.props1;
       let labelId = result.current.containerProps.id;
-      expect(inputProps0).toMatchObject({type: 'range', step: 2, value: 50, min: 10, max: 70, 'aria-label': 'thumb0',  'aria-labelledby': `${labelId} ${inputProps0.id}`});
-      expect(inputProps1).toMatchObject({type: 'range', step: 2, value: 70, min: 50, max: 200, 'aria-label': 'thumb1', 'aria-labelledby': `${labelId} ${inputProps1.id}`});
+      expect(thumbProps0.id).toBe(`${inputProps0.id}-thumb`);
+      expect(thumbProps1.id).toBe(`${inputProps1.id}-thumb`);
+      expect(thumbProps0['aria-label']).toBe('thumb0');
+      expect(thumbProps1['aria-label']).toBe('thumb1');
+      expect(inputProps0).toMatchObject({type: 'range', step: 2, value: 50, min: 10, max: 70, 'aria-labelledby': `${labelId} ${thumbProps0.id}`});
+      expect(inputProps1).toMatchObject({type: 'range', step: 2, value: 70, min: 50, max: 200, 'aria-labelledby': `${labelId} ${thumbProps1.id}`});
     });
   });
 

packages/@react-spectrum/color/test/ColorSlider.test.tsx

@@ -56,11 +56,14 @@ describe('ColorSlider', () => {
     expect(slider).toHaveAttribute('step', '1');
   });
 
-  it('sets aria-label when label is disbaled', () => {
+  it('sets aria-label when label is disabled', () => {
     let {getByRole} = render(<ColorSlider defaultValue={new Color('#000000')} channel="red" label={null} />);
+    let group = getByRole('group');
     let slider = getByRole('slider');
 
-    expect(slider).toHaveAttribute('aria-label', 'Red');
+    expect(group).toHaveAttribute('aria-label', 'Red');
+    expect(slider.parentElement).not.toHaveAttribute('aria-label', 'Red');
+    expect(slider).toHaveAttribute('aria-labelledby', `${group.id}`);
   });
 
   it('the slider is focusable', () => {

packages/@react-spectrum/slider/test/RangeSlider.test.tsx

@@ -31,15 +31,17 @@ describe('RangeSlider', function () {
   });
 
   it('supports label', function () {
-    let {getAllByRole, getByRole} = render(<RangeSlider label="The Label" />);
+    let {getAllByRole, getByLabelText, getByRole} = render(<RangeSlider label="The Label" />);
 
     let group = getByRole('group');
     let labelId = group.getAttribute('aria-labelledby');
     let [leftSlider, rightSlider] = getAllByRole('slider');
-    expect(leftSlider.getAttribute('aria-label')).toBe('Minimum');
-    expect(rightSlider.getAttribute('aria-label')).toBe('Maximum');
-    expect(leftSlider.getAttribute('aria-labelledby')).toBe(`${labelId} ${leftSlider.id}`);
-    expect(rightSlider.getAttribute('aria-labelledby')).toBe(`${labelId} ${rightSlider.id}`);
+    let leftThumb = getByLabelText('Minimum');
+    let rightThumb = getByLabelText('Maximum');
+    expect(leftThumb).toHaveAttribute('id', `${leftSlider.id}-thumb`);
+    expect(rightThumb).toHaveAttribute('id', `${rightSlider.id}-thumb`);
+    expect(leftSlider.getAttribute('aria-labelledby')).toBe(`${labelId} ${leftThumb.id}`);
+    expect(rightSlider.getAttribute('aria-labelledby')).toBe(`${labelId} ${rightThumb.id}`);
 
     let label = document.getElementById(labelId);
     expect(label).toHaveTextContent('The Label');