[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

View File

@@ -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(<Switch accessibilityLabel="switch" />);
expect(component.find(checkboxSelector).prop('aria-label')).toBe('switch');
});
describe('disabled', () => {
test('when "false" a default checkbox is rendered', () => {
const component = shallow(<Switch />);

View File

@@ -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,