mirror of
https://github.com/zoriya/react-native-web.git
synced 2026-05-31 17:53:50 +00:00
[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:
@@ -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 />);
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user