feat: Add role prop to Text component #34976

gabrieldonadel · 2022-10-14T00:09:30Z

Summary

As pointed out by @necolas on #34424 (comment) we forgot we add the role prop mapping to the Text component. This PR adds a new role prop to Text, mapping the web role values to the already existing accessibilityRole prop and moves the roleToAccessibilityRoleMapping to a common file that can be imported by both the Text and View components as requested on #34424. This PR also updates the RNTester AcessebilityExample to include a test using this new prop.

Changelog

[General] [Added] - Add role prop to Text component

Test Plan

Open the RNTester app and navigate to the Accessibility Example page
Test the role prop through the Text with role = heading section

gabrieldonadel · 2022-10-14T00:10:01Z

Libraries/Components/View/ViewAccessibility.d.ts

@@ -286,3 +291,69 @@ export interface AccessibilityPropsIOS {
   */
  accessibilityIgnoresInvertColors?: boolean | undefined;
 }
+
+export type Role =


These were missing on TS

analysis-bot · 2022-10-14T01:00:17Z

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	7,777,909	+486
android	hermes	armeabi-v7a	7,178,967	+537
android	hermes	x86	8,090,829	+399
android	hermes	x86_64	8,062,605	+485
android	jsc	arm64-v8a	9,636,993	+112
android	jsc	armeabi-v7a	8,401,283	+115
android	jsc	x86	9,586,189	+131
android	jsc	x86_64	10,179,350	+124

Base commit: 5d8a712
Branch: main

analysis-bot · 2022-10-14T01:56:57Z

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

Base commit: 5d8a712
Branch: main

jacdebug · 2022-10-14T07:33:34Z

Libraries/Utilities/AcessibilityMapping.js

+'use strict';
+
+// Map role values to AccessibilityRole values
+export const roleToAccessibilityRoleMapping = {


This object roleToAccessibilityRoleMapping needs to in JS VM heap all time after loading this JS. Consider making this is getter function so this object can be deallocated after the call, or better use a switch statement like this.

react-native/packages/normalize-color/index.js

Line 303 in 8422557

function normalizeKeyword(name) {

cc @javache

Sure, I've just refactor it to be a switch statement

Summary: I've been noticing this for a while now, every time that someone changes a file inside rn-tester Danger comments a bunch of warnings regarding inline styles, e.g. #34567 (comment), even though that is disabled inside .eslintrc https://github.com/facebook/react-native/blob/8edf4e9e3adcc85743e3c86a25ab3748b276a3da/packages/rn-tester/.eslintrc#L3 After some investigation, I realized that the problem was that the Eslint Node.js API used by [seadub/danger-plugin-eslint](https://www.npmjs.com/package/seadub/danger-plugin-eslint) was not able to locate any `.eslintrc` files due to the location of the directory where danger is invoked. By using `process.chdir` we can ensure that eslint will run from the root folder and that it will be able to find all .eslintrc files ## Changelog [Internal] [Fixed] - fix eslint config when running Danger Pull Request resolved: #34980 Test Plan: run `yarn danger pr https://github.com/facebook/react-native/pull/34976` After ![image](https://user-images.githubusercontent.com/11707729/195751496-5225a32f-f4b3-4ce2-833f-ae5723f647c0.png) Before ![image](https://user-images.githubusercontent.com/11707729/195751673-34ba87fc-ce50-4020-9688-a486e3021c4f.png) Reviewed By: cortinico Differential Revision: D40384300 Pulled By: yungsters fbshipit-source-id: e68eeafc42567dc9d7297dde3709a989cc70f4e2

Summary: I've been noticing this for a while now, every time that someone changes a file inside rn-tester Danger comments a bunch of warnings regarding inline styles, e.g. facebook#34567 (comment), even though that is disabled inside .eslintrc https://github.com/facebook/react-native/blob/8edf4e9e3adcc85743e3c86a25ab3748b276a3da/packages/rn-tester/.eslintrc#L3 After some investigation, I realized that the problem was that the Eslint Node.js API used by [seadub/danger-plugin-eslint](https://www.npmjs.com/package/seadub/danger-plugin-eslint) was not able to locate any `.eslintrc` files due to the location of the directory where danger is invoked. By using `process.chdir` we can ensure that eslint will run from the root folder and that it will be able to find all .eslintrc files ## Changelog [Internal] [Fixed] - fix eslint config when running Danger Pull Request resolved: facebook#34980 Test Plan: run `yarn danger pr https://github.com/facebook/react-native/pull/34976` After ![image](https://user-images.githubusercontent.com/11707729/195751496-5225a32f-f4b3-4ce2-833f-ae5723f647c0.png) Before ![image](https://user-images.githubusercontent.com/11707729/195751673-34ba87fc-ce50-4020-9688-a486e3021c4f.png) Reviewed By: cortinico Differential Revision: D40384300 Pulled By: yungsters fbshipit-source-id: e68eeafc42567dc9d7297dde3709a989cc70f4e2

gabrieldonadel · 2022-10-20T12:10:21Z

@jacdebug would you mind rereviwing this PR?

jacdebug

Thanks for the fixups, LGTM and sorry for delay!

facebook-github-bot · 2022-10-21T17:30:46Z

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

react-native-bot · 2022-10-24T15:45:05Z

This pull request was successfully merged by @gabrieldonadel in 20718e6.

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

Summary: I've been noticing this for a while now, every time that someone changes a file inside rn-tester Danger comments a bunch of warnings regarding inline styles, e.g. facebook#34567 (comment), even though that is disabled inside .eslintrc https://github.com/facebook/react-native/blob/8edf4e9e3adcc85743e3c86a25ab3748b276a3da/packages/rn-tester/.eslintrc#L3 After some investigation, I realized that the problem was that the Eslint Node.js API used by [seadub/danger-plugin-eslint](https://www.npmjs.com/package/seadub/danger-plugin-eslint) was not able to locate any `.eslintrc` files due to the location of the directory where danger is invoked. By using `process.chdir` we can ensure that eslint will run from the root folder and that it will be able to find all .eslintrc files ## Changelog [Internal] [Fixed] - fix eslint config when running Danger Pull Request resolved: facebook#34980 Test Plan: run `yarn danger pr https://github.com/facebook/react-native/pull/34976` After ![image](https://user-images.githubusercontent.com/11707729/195751496-5225a32f-f4b3-4ce2-833f-ae5723f647c0.png) Before ![image](https://user-images.githubusercontent.com/11707729/195751673-34ba87fc-ce50-4020-9688-a486e3021c4f.png) Reviewed By: cortinico Differential Revision: D40384300 Pulled By: yungsters fbshipit-source-id: e68eeafc42567dc9d7297dde3709a989cc70f4e2

Summary: As pointed out by necolas on facebook#34424 (comment) we forgot we add the `role` prop mapping to the `Text` component. This PR adds a new `role` prop to `Text`, mapping the web `role` values to the already existing `accessibilityRole` prop and moves the `roleToAccessibilityRoleMapping` to a common file that can be imported by both the `Text` and `View` components as requested on facebook#34424. This PR also updates the RNTester AcessebilityExample to include a test using this new prop. ## Changelog [General] [Added] - Add role prop to Text component Pull Request resolved: facebook#34976 Test Plan: 1. Open the RNTester app and navigate to the Accessibility Example page 2. Test the `role` prop through the `Text with role = heading` section Reviewed By: yungsters Differential Revision: D40596039 Pulled By: jacdebug fbshipit-source-id: f72f02e8bd32169423ea517ad18b598b52257b17

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 Oct 14, 2022

gabrieldonadel commented Oct 14, 2022

View reviewed changes

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

gabrieldonadel force-pushed the feat/add-role-to-text branch from 556d37c to 44a7a9b Compare October 14, 2022 00:35

gabrieldonadel force-pushed the feat/add-role-to-text branch from 44a7a9b to 4799069 Compare October 14, 2022 01:01

jacdebug reviewed Oct 14, 2022

View reviewed changes

feat: Add role prop to Text component

d9c2f99

gabrieldonadel force-pushed the feat/add-role-to-text branch from 4799069 to 15da31c Compare October 14, 2022 20:54

chore: Replace accessibilityRole map with getAccessibilityRoleFromRole

02082e4

gabrieldonadel force-pushed the feat/add-role-to-text branch from 15da31c to 02082e4 Compare October 14, 2022 20:56

gabrieldonadel requested a review from jacdebug October 14, 2022 21:23

gabrieldonadel mentioned this pull request Oct 19, 2022

[w3c] ☂️ Web Props (Part 1) umbrella issue #34424

Closed

70 tasks

jacdebug approved these changes Oct 20, 2022

View reviewed changes

necolas approved these changes Oct 20, 2022

View reviewed changes

facebook-github-bot closed this in 20718e6 Oct 24, 2022

gabrieldonadel deleted the feat/add-role-to-text branch October 24, 2022 15:44

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add role prop to Text component #34976

feat: Add role prop to Text component #34976

gabrieldonadel commented Oct 14, 2022

gabrieldonadel Oct 14, 2022

analysis-bot commented Oct 14, 2022 •

edited

Loading

analysis-bot commented Oct 14, 2022 •

edited

Loading

jacdebug Oct 14, 2022

gabrieldonadel Oct 14, 2022

gabrieldonadel commented Oct 20, 2022

jacdebug left a comment

facebook-github-bot commented Oct 21, 2022

react-native-bot commented Oct 24, 2022

feat: Add role prop to Text component #34976

feat: Add role prop to Text component #34976

Conversation

gabrieldonadel commented Oct 14, 2022

Summary

Changelog

Test Plan

gabrieldonadel Oct 14, 2022

Choose a reason for hiding this comment

analysis-bot commented Oct 14, 2022 • edited Loading

analysis-bot commented Oct 14, 2022 • edited Loading

jacdebug Oct 14, 2022

Choose a reason for hiding this comment

gabrieldonadel Oct 14, 2022

Choose a reason for hiding this comment

gabrieldonadel commented Oct 20, 2022

jacdebug left a comment

Choose a reason for hiding this comment

facebook-github-bot commented Oct 21, 2022

react-native-bot commented Oct 24, 2022

analysis-bot commented Oct 14, 2022 •

edited

Loading

analysis-bot commented Oct 14, 2022 •

edited

Loading