From f062eded40a20464149f0675b1d22e236376b38f Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Fri, 17 Aug 2018 15:16:38 -0700 Subject: [PATCH] [fix] Switch applies accessibilityLabel to native control VoiceOver requires that the aria-label for the checkbox is applied to the checkbox itself and not a wrapping element. Fix #1072 --- .../src/exports/Switch/__tests__/index-test.js | 5 +++++ packages/react-native-web/src/exports/Switch/index.js | 2 ++ 2 files changed, 7 insertions(+) diff --git a/packages/react-native-web/src/exports/Switch/__tests__/index-test.js b/packages/react-native-web/src/exports/Switch/__tests__/index-test.js index 04b4f330..dab69396 100644 --- a/packages/react-native-web/src/exports/Switch/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/Switch/__tests__/index-test.js @@ -7,6 +7,11 @@ import Switch from '..'; const checkboxSelector = 'input[type="checkbox"]'; describe('components/Switch', () => { + test('accessibilityLabel is applied to native checkbox', () => { + const component = shallow(); + expect(component.find(checkboxSelector).prop('aria-label')).toBe('switch'); + }); + describe('disabled', () => { test('when "false" a default checkbox is rendered', () => { const component = shallow(); diff --git a/packages/react-native-web/src/exports/Switch/index.js b/packages/react-native-web/src/exports/Switch/index.js index 7a3918a8..796c0155 100644 --- a/packages/react-native-web/src/exports/Switch/index.js +++ b/packages/react-native-web/src/exports/Switch/index.js @@ -67,6 +67,7 @@ class Switch extends Component<*> { render() { const { + accessibilityLabel, activeThumbColor, activeTrackColor, disabled, @@ -115,6 +116,7 @@ class Switch extends Component<*> { ]; const nativeControl = createElement('input', { + accessibilityLabel, checked: value, disabled: disabled, onBlur: this._handleFocusState,