Work around iOS VoiceOver labeling issue with Slider (#1398)

* Work around iOS VoiceOver labeling issue with Slider

Author: devongovett

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

@@ -153,8 +153,11 @@ export function useSlider(
   };
 
   if (labelProps.htmlFor) {
-    // Override the `for` attribute to point to the first thumb instead of the group element.
-    labelProps.htmlFor = labelProps.htmlFor ? getSliderThumbId(state, 0) : undefined,
+    // Ideally the `for` attribute should point to the first thumb, but VoiceOver on iOS
+    // causes this to override the `aria-labelledby` on the thumb. This causes the first
+    // thumb to only be announced as the slider label rather than its individual name as well.
+    // See https://bugs.webkit.org/show_bug.cgi?id=172464.
+    delete labelProps.htmlFor;
     labelProps.onClick = () => {
       // Safari does not focus <input type="range"> elements when clicking on an associated <label>,
       // so do it manually. In addition, make sure we show the focus ring.

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

@@ -30,10 +30,10 @@ describe('useSlider', () => {
         label: 'Slider'
       });
 
-      let {props: {labelProps, containerProps}, inputProps} = result.current;
+      let {props: {labelProps, containerProps}} = result.current;
 
       expect(containerProps.role).toBe('group');
-      expect(labelProps.htmlFor).toBe(inputProps.id);
+      expect(labelProps.htmlFor).toBe(undefined); // https://bugs.webkit.org/show_bug.cgi?id=172464
     });
 
     it('should have the right labels when setting aria-label', () => {

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

@@ -45,7 +45,9 @@ describe('RangeSlider', function () {
 
     let label = document.getElementById(labelId);
     expect(label).toHaveTextContent('The Label');
-    expect(label).toHaveAttribute('for', getAllByRole('slider')[0].id);
+    // https://bugs.webkit.org/show_bug.cgi?id=172464
+    // expect(label).toHaveAttribute('for', getAllByRole('slider')[0].id);
+    expect(label).not.toHaveAttribute('for');
 
     // Shows value as well
     let output = getByRole('status');

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

@@ -44,7 +44,9 @@ describe('Slider', function () {
 
     let label = document.getElementById(labelId);
     expect(label).toHaveTextContent(/^The Label$/);
-    expect(label).toHaveAttribute('for', getByRole('slider').id);
+    // https://bugs.webkit.org/show_bug.cgi?id=172464
+    // expect(label).toHaveAttribute('for', getByRole('slider').id);
+    expect(label).not.toHaveAttribute('for');
 
     // Shows value as well
     let output = getByRole('status');