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.

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

Adds accessiblity actions on core components #31532

Conversation

dennisurtubia
Copy link
Contributor

Summary

Android: Adding custom actions (#30854).
Adds accessiblity actions on core components (Button, TextInput, Text, and Picker).

Changelog

[General] [Added] - Adds accessiblity actions on core components

Test Plan

  • npm test
  • Rendering of components on RNTesterApp using talkback:
    • Check if accessibility actions were available;
      image
    • Trigger activate action for all components;
      image

Notes

  • For TextInput an unexpected error is raised:
    image

@facebook-github-bot
Copy link
Contributor

Hi @dennisurtubia!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

@analysis-bot
Copy link

analysis-bot commented May 16, 2021

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

Base commit: b2ec89f

@facebook-github-bot 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 May 16, 2021
@facebook-github-bot
Copy link
Contributor

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

@analysis-bot
Copy link

analysis-bot commented May 16, 2021

Platform Engine Arch Size (bytes) Diff
android hermes arm64-v8a 9,274,646 +456
android hermes armeabi-v7a 8,791,211 +461
android hermes x86 9,736,140 +457
android hermes x86_64 9,702,215 +465
android jsc arm64-v8a 10,881,809 +212
android jsc armeabi-v7a 10,391,398 +198
android jsc x86 10,910,034 +206
android jsc x86_64 11,518,016 +215

Base commit: b2ec89f

@amarlette amarlette linked an issue May 17, 2021 that may be closed by this pull request
@amarlette amarlette requested a review from kacieb May 17, 2021 16:18
@lunaleaps
Copy link
Contributor

@dennisurtubia Thanks for this PR! Can we also add the examples you're using to test Button and Picker? Also, are you able to test on iOS as well?

Copy link
Contributor

@lunaleaps lunaleaps left a comment

Choose a reason for hiding this comment

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

How are the props passed to Picker.ios.js? Were you able to test on this platform? If not, I can help test it out. In addition, would be helpful to add your test cases to RNTester

@@ -115,6 +120,10 @@ type PickerProps = $ReadOnly<{|
* The string used for the accessibility label. Will be read once focused on the picker but not on change.
*/
accessibilityLabel?: ?string,

accessible?: ?boolean,
Copy link
Contributor

Choose a reason for hiding this comment

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

We should add a comment for each prop as well as the other props do

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Okay, I will improve this!

@dennisurtubia
Copy link
Contributor Author

How are the props passed to Picker.ios.js? Were you able to test on this platform? If not, I can help test it out. In addition, would be helpful to add your test cases to RNTester

Hey, @lunaleaps, unfortunately I can't test on iOS.

On the issue, it is only mentioned that the Android platform has implemented the properties accessibilityActions and onAccessibilityAction, but, I can try to add these props to iOS!

Of course! I will add the tests to the RNTester.

Thank you for your suggestions!

@dennisurtubia dennisurtubia force-pushed the feat/accessibility-actions-core-components branch from 26a708b to e7d1287 Compare May 20, 2021 00:56
@dennisurtubia
Copy link
Contributor Author

dennisurtubia commented May 20, 2021

How are the props passed to Picker.ios.js? Were you able to test on this platform? If not, I can help test it out. In addition, would be helpful to add your test cases to RNTester

Hello, @lunaleaps!

I checked how the props are passed to Picker.ios.js, and on the file, we can see that all props from ViewProps are passed, and, ViewProps have all required props (accessibilityActions and onAccessibilityAction).

@dennisurtubia dennisurtubia requested a review from lunaleaps May 20, 2021 01:04
@facebook-github-bot
Copy link
Contributor

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

Copy link
Contributor

@lunaleaps lunaleaps left a comment

Choose a reason for hiding this comment

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

Thanks @dennisurtubia! Have imported it and tested on iOS and Android! I can take a look into why TextInput is failing

@dennisurtubia
Copy link
Contributor Author

Thanks @dennisurtubia! Have imported it and tested on iOS and Android! I can take a look into why TextInput is failing

Nice! I can resolve the conflict found in the AccessibilityExample.js file.
Thanks again for all your help!

@facebook-github-bot
Copy link
Contributor

@lunaleaps merged this pull request in 4471715.

@facebook-github-bot facebook-github-bot added the Merged This PR has been merged. label May 26, 2021
@amarlette
Copy link

Thank you @dennisurtubia for your contribution to a more accessible React Native! I'd like to highlight your contribution on Twitter, do you have a Twitter handle I can tag?

@dennisurtubia
Copy link
Contributor Author

Thank you @dennisurtubia for your contribution to a more accessible React Native! I'd like to highlight your contribution on Twitter, do you have a Twitter handle I can tag?

Yes! @dennisurtubia my username. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Accessibility CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Merged This PR has been merged.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Android: Adding custom actions
5 participants