From d2e468b30b6d756fd713305d0ac33f2ef739733f Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Thu, 17 Dec 2020 18:46:19 -0500
Subject: [PATCH 1/2] Work around iOS VoiceOver labeling issue with Slider

---
 packages/@react-aria/slider/src/useSlider.ts              | 7 +++++--
 packages/@react-aria/slider/test/useSlider.test.js        | 2 +-
 packages/@react-spectrum/slider/test/RangeSlider.test.tsx | 4 +++-
 packages/@react-spectrum/slider/test/Slider.test.tsx      | 4 +++-
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/@react-aria/slider/src/useSlider.ts b/packages/@react-aria/slider/src/useSlider.ts
index 162a7671941..f67c598672a 100644
--- a/packages/@react-aria/slider/src/useSlider.ts
+++ b/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.
diff --git a/packages/@react-aria/slider/test/useSlider.test.js b/packages/@react-aria/slider/test/useSlider.test.js
index 147d7aa81d7..0df2f10e65b 100644
--- a/packages/@react-aria/slider/test/useSlider.test.js
+++ b/packages/@react-aria/slider/test/useSlider.test.js
@@ -33,7 +33,7 @@ describe('useSlider', () => {
       let {props: {labelProps, containerProps}, inputProps} = 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', () => {
diff --git a/packages/@react-spectrum/slider/test/RangeSlider.test.tsx b/packages/@react-spectrum/slider/test/RangeSlider.test.tsx
index dc2759bb026..3bb6d424041 100644
--- a/packages/@react-spectrum/slider/test/RangeSlider.test.tsx
+++ b/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');
diff --git a/packages/@react-spectrum/slider/test/Slider.test.tsx b/packages/@react-spectrum/slider/test/Slider.test.tsx
index 02878baa806..114701817dd 100644
--- a/packages/@react-spectrum/slider/test/Slider.test.tsx
+++ b/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');

From 37078c16bcc55c70dfd8ffcbdd87378d7d2f7d02 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Thu, 17 Dec 2020 18:55:36 -0500
Subject: [PATCH 2/2] Lint

---
 packages/@react-aria/slider/test/useSlider.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@react-aria/slider/test/useSlider.test.js b/packages/@react-aria/slider/test/useSlider.test.js
index 0df2f10e65b..861bee71372 100644
--- a/packages/@react-aria/slider/test/useSlider.test.js
+++ b/packages/@react-aria/slider/test/useSlider.test.js
@@ -30,7 +30,7 @@ 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(undefined); // https://bugs.webkit.org/show_bug.cgi?id=172464