[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
This commit is contained in:
Nicolas Gallagher
2018-08-17 15:16:38 -07:00
parent fcc4fbf678
commit f062eded40
2 changed files with 7 additions and 0 deletions
@@ -7,6 +7,11 @@ import Switch from '..';
const checkboxSelector = 'input[type="checkbox"]'; const checkboxSelector = 'input[type="checkbox"]';
describe('components/Switch', () => { describe('components/Switch', () => {
test('accessibilityLabel is applied to native checkbox', () => {
const component = shallow(<Switch accessibilityLabel="switch" />);
expect(component.find(checkboxSelector).prop('aria-label')).toBe('switch');
});
describe('disabled', () => { describe('disabled', () => {
test('when "false" a default checkbox is rendered', () => { test('when "false" a default checkbox is rendered', () => {
const component = shallow(<Switch />); const component = shallow(<Switch />);
+2
View File
@@ -67,6 +67,7 @@ class Switch extends Component<*> {
render() { render() {
const { const {
accessibilityLabel,
activeThumbColor, activeThumbColor,
activeTrackColor, activeTrackColor,
disabled, disabled,
@@ -115,6 +116,7 @@ class Switch extends Component<*> {
]; ];
const nativeControl = createElement('input', { const nativeControl = createElement('input', {
accessibilityLabel,
checked: value, checked: value,
disabled: disabled, disabled: disabled,
onBlur: this._handleFocusState, onBlur: this._handleFocusState,