feat : add aria labelled as alias for accessibilityLabelledBy by dakshbhardwaj · Pull Request #34725 · react/react-native

dakshbhardwaj · 2022-09-19T14:17:01Z

Summary

This adds the aria-labelledby prop to the components where it's used as requested on #34424, equivalent accessibilityLabelledBy

Changelog

[General] [Added] - Add aria-modal prop to basic component

TestPlan

Enable talkback.
Open the RNTester app and navigate to the Api's tab
Go to the TextInput with aria-labelledby attribute section

github-actions · 2022-09-19T14:18:01Z

	Warnings
⚠️	📋 Missing Test Plan - Can you add a Test Plan? To do so, add a "## Test Plan" section to your PR description. A Test Plan lets us know how these changes were tested.
⚠️	packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js#L108 - packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js line 108 – Inline style: { color: 'green' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js#L109 - packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js line 109 – Inline style: { color: 'blue' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js#L115 - packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js line 115 – Inline style: { color: 'green' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js#L116 - packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js line 116 – Inline style: { color: 'blue' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js#L124 - packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js line 124 – Inline style: { color: 'green' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js#L125 - packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js line 125 – Inline style: { color: 'blue' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js#L141 - packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js line 141 – Inline style: { color: 'green' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js#L142 - packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js line 142 – Inline style: { color: 'blue' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js#L151 - packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js line 151 – Inline style: { color: 'green' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js#L152 - packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js line 152 – Inline style: { color: 'blue' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js#L391 - packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js line 391 – Inline style: { color: 'white' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js#L517 - packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js line 517 – Inline style: { flex: 1, flexDirection: 'row' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js#L536 - packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js line 536 – Inline style: { flex: 1, flexDirection: 'row' } (react-native/no-inline-styles)
⚠️	packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js#L550 - packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js line 550 – Inline style: { flex: 1, flexDirection: 'row' } (react-native/no-inline-styles)

Generated by 🚫 dangerJS against 2d479e4

analysis-bot · 2022-09-19T14:42:22Z

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	7,768,800	+293
android	hermes	armeabi-v7a	7,169,747	+284
android	hermes	x86	8,081,946	+299
android	hermes	x86_64	8,053,438	+288
android	jsc	arm64-v8a	9,629,465	+239
android	jsc	armeabi-v7a	8,393,889	+233
android	jsc	x86	9,578,879	+237
android	jsc	x86_64	10,171,989	+238

Base commit: fa22a6e
Branch: main

analysis-bot · 2022-09-19T15:32:51Z

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: cb3a5cc
Branch: main

necolas

Let's add unit test snapshots because a number of these new props look like they are being overridden by the "restProps".

This prop should also be added to TextInput, Image, and Text. If there's no support for the underlying prop in RN, just adding the types will be enough.

necolas · 2022-09-20T00:26:59Z

+ *
+ * @platform android
+ */
+ 'aria-labelledby'?: ?string | ?Array<string>,


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

cipolleschi · 2022-09-22T10:47:56Z

Hi @dakshbhardwaj! Thank you for taking this. Could you please address @necolas feedback? 🙏

dakshbhardwaj · 2022-09-26T06:44:42Z

@necolas @cipolleschi I have pushed down the changes

necolas · 2022-09-26T20:38:36Z

+ 'aria-valuemin': ariaValueMin,
+ 'aria-valuenow': ariaValueNow,
+ 'aria-valuetext': ariaValueText,
+ ...otherProps


Please can we alpha-sort props so it's easier to see the aria props grouped together etc. Same for the props applied to the native component. I'm surprised this isn't a lint rule.

necolas · 2022-09-26T20:40:28Z

+ <View>
+ <Text nativeID="testAriaLabelledBy">Phone Number</Text>
+ <TextInput
+ aria-labelledby={'testAriaLabelledBy'}


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

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

Oh good to know

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

necolas · 2022-10-06T17:54:30Z

ping @cipolleschi

facebook-github-bot · 2022-10-07T11:33:23Z

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

cipolleschi · 2022-10-10T10:41:32Z

/rebase

facebook-github-bot · 2022-10-10T10:52:49Z

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

react-native-bot · 2022-10-11T12:55:06Z

This pull request was successfully merged by @dakshbhardwaj in f353119.

^{When will my fix make it into a release? | Upcoming Releases}

Summary: Changelog: [Internal] Add `aria-labelledby` to TS events from changes in #34725 Differential Revision: D40239207 fbshipit-source-id: 27832037bf1de74c2b86c04521b9baaa60c99d44

dakshbhardwaj added 2 commits September 19, 2022 17:33

added aria-labelledBy prop as alias
3e3c787

improved example
8458a78

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Sep 19, 2022

facebook-github-bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Sep 19, 2022

react-native-bot added the Type: Enhancement A new feature or enhancement of an existing feature. label Sep 19, 2022

fixed prettier issue
591ccfa

necolas mentioned this pull request Sep 19, 2022
[w3c] ☂️ Web Props (Part 1) umbrella issue #34424
Closed
70 tasks

necolas suggested changes Sep 19, 2022
View reviewed changes

Comment threadLibraries/Components/View/View.js

dakshbhardwaj changed the title ~~Daksh/add aria labelled by prop~~feat : add aria labelled as alias for accessibilityLabelledBySep 19, 2022

necolas reviewed Sep 20, 2022
View reviewed changes

added pr review changes
c94d379

Merge branch 'facebook:main' into daksh/add-aria-labelledBy-prop
1ac9632

necolas reviewed Sep 26, 2022
View reviewed changes

pr review changes
bfee11a

dakshbhardwaj requested a review from necolas September 27, 2022 08:14

dakshbhardwajand others added 4 commits September 27, 2022 17:54

Merge branch 'main' into daksh/add-aria-labelledBy-prop
c33b46f

conflicts resolve
dbb9bb1

Merge branch 'main' into daksh/add-aria-labelledBy-prop
ed567c1

Merge branch 'facebook:main' into daksh/add-aria-labelledBy-prop
3214b85

necolas approved these changes Sep 29, 2022
View reviewed changes

Merge branch 'facebook:main' into daksh/add-aria-labelledBy-prop
2d479e4

facebook-github-bot closed this in f353119Oct 11, 2022

react-native-bot added the Merged This PR has been merged. label Oct 11, 2022

This was referenced Jul 29, 2026
Add React Native to website docs and remaining repo surfaces open-circle/formisch#170
Merged
chore(capabilities): 🎨 sync the design system to claude.ai/design chicio/chicio-blog#509
Merged

Uh oh!

Conversation

dakshbhardwaj commented Sep 19, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changelog

TestPlan

Uh oh!

github-actionsBot commented Sep 19, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

analysis-bot commented Sep 19, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

analysis-bot commented Sep 19, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

necolas left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

necolasSep 20, 2022

Choose a reason for hiding this comment

Uh oh!

cipolleschi commented Sep 22, 2022

Uh oh!

dakshbhardwaj commented Sep 26, 2022

Uh oh!

necolasSep 26, 2022

Choose a reason for hiding this comment

Uh oh!

necolasSep 26, 2022

Choose a reason for hiding this comment

Uh oh!

gabrieldonadelNov 7, 2022

Choose a reason for hiding this comment

Uh oh!

necolasNov 7, 2022

Choose a reason for hiding this comment

Uh oh!

gabrieldonadelNov 14, 2022

Choose a reason for hiding this comment

Uh oh!

necolas commented Oct 6, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

facebook-github-bot commented Oct 7, 2022

Uh oh!

cipolleschi commented Oct 10, 2022

Uh oh!

facebook-github-bot commented Oct 10, 2022

Uh oh!

react-native-bot commented Oct 11, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

dakshbhardwaj commented Sep 19, 2022•
edited
Loading

github-actionsBot commented Sep 19, 2022•
edited
Loading

analysis-bot commented Sep 19, 2022•
edited
Loading

analysis-bot commented Sep 19, 2022•
edited
Loading

necolas commented Oct 6, 2022•
edited
Loading