Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat : add aria labelled as alias for accessibilityLabelledBy #34725

Closed
wants to merge 11 commits into from
Closed

feat : add aria labelled as alias for accessibilityLabelledBy #34725

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
3e3c787
added aria-labelledBy prop as alias
dakshbhardwaj Sep 19, 2022
8458a78
improved example
dakshbhardwaj Sep 19, 2022
591ccfa
fixed prettier issue
dakshbhardwaj Sep 19, 2022
c94d379
added pr review changes
dakshbhardwaj Sep 26, 2022
1ac9632
Merge branch 'facebook:main' into daksh/add-aria-labelledBy-prop
Sep 26, 2022
bfee11a
pr review changes
dakshbhardwaj Sep 27, 2022
c33b46f
Merge branch 'main' into daksh/add-aria-labelledBy-prop
dakshbhardwaj Sep 27, 2022
dbb9bb1
conflicts resolve
dakshbhardwaj Sep 27, 2022
ed567c1
Merge branch 'main' into daksh/add-aria-labelledBy-prop
dakshbhardwaj Sep 28, 2022
3214b85
Merge branch 'facebook:main' into daksh/add-aria-labelledBy-prop
Sep 28, 2022
2d479e4
Merge branch 'facebook:main' into daksh/add-aria-labelledBy-prop
Oct 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions Libraries/Components/View/View.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,9 @@ const View: React.AbstractComponent<
...restProps
} = otherProps;

const _accessibilityLabelledBy =
restProps['aria-labelledby'] ?? restProps.accessibilityLabelledBy;

const _accessibilityState = {
busy: ariaBusy ?? accessibilityState?.busy,
checked: ariaChecked ?? accessibilityState?.checked,
Expand Down Expand Up @@ -161,6 +164,7 @@ const View: React.AbstractComponent<
accessibilityElementsHidden={
ariaHidden ?? accessibilityElementsHidden
}
accessibilityLabelledBy={_accessibilityLabelledBy}
importantForAccessibility={
ariaHidden === true
? 'no-hide-descendants'
Expand Down
7 changes: 7 additions & 0 deletions Libraries/Components/View/ViewPropTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -542,6 +542,13 @@ export type ViewProps = $ReadOnly<{|
*/
'aria-hidden'?: ?boolean,

/**
* It reperesents the nativeID of the associated label text. When the assistive technology focuses on the component with this props, the text is read aloud.
*
* @platform android
*/
'aria-labelledby'?: ?string | ?Array<string>,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Array of string isn't the web type. It would be comma separated IDs in a single string


/**
* Views that are only used to layout their children or otherwise don't draw
* anything may be automatically removed from the native hierarchy as an
Expand Down
14 changes: 14 additions & 0 deletions packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1446,4 +1446,18 @@ exports.examples = [
);
},
},
{
title: 'TextInput with aria-labelledby attribute"',
render(): React.Element<typeof View> {
return (
<View>
<Text nativeID="testAriaLabelledBy">Phone Number</Text>
<TextInput
aria-labelledby={'testAriaLabelledBy'}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where is the support for this implemented in TextInput, Text, Image components?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@necolas I was checking this to update the docs and it seems that Text doesn't ever support accessibilityLabelledBy

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh good to know

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've just opened a PR removing it, #35327

style={styles.default}
/>
</View>
);
},
},
];