mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
fix(a11y): TextInput aria-label handling (#53051)
Summary: The `aria-label` prop was ignored on `TextInput` component. Which resulted in screen reader not able to read it. This PR forwards `aria-label` to `accessibilityLabel` in a manner similar to e.g. `View` and `Text` ## Changelog: <!-- Help reviewers and the release process by writing your own changelog entry. Pick one each for the category and type tags: [ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message For more details, see: https://reactnative.dev/contributing/changelogs-in-pull-requests --> [GENERAL] [FIXED] - a11y: fix `aria-label` on `TextInput` Pull Request resolved: https://github.com/facebook/react-native/pull/53051 Test Plan: Run RNTester => TextInput => Accessibility section under Accessibility Inspector or screen reader. iOS fixed: https://github.com/user-attachments/assets/68c3a2ef-7dfe-479c-97fc-cbe72108c45c iOS baseline: https://github.com/user-attachments/assets/2e8372ba-10dc-47d2-b6b1-9f664000de7d Reviewed By: andrewdacenko Differential Revision: D79635413 Pulled By: rshest fbshipit-source-id: dd2f583d67c6c6c6393e02c5fe534308e1e2f921
This commit is contained in:
committed by
React Native Bot
parent
4c781e4fbd
commit
1ca723220d
@@ -451,6 +451,19 @@ const examples: Array<RNTesterModuleExample> = [
|
||||
return <ToggleDefaultPaddingExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Accessibility',
|
||||
render: function (): React.Node {
|
||||
return (
|
||||
<View>
|
||||
<Text>accessibilityLabel prop</Text>
|
||||
<ExampleTextInput accessibilityLabel="This is Accessibility Label" />
|
||||
<Text>aria-label prop</Text>
|
||||
<ExampleTextInput aria-label="This is Aria Label" />
|
||||
</View>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
module.exports = ({
|
||||
|
||||
Reference in New Issue
Block a user