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

Feat/accessibility state alias #34524

Closed

Conversation

ankit-tailor
Copy link
Contributor

@ankit-tailor ankit-tailor commented Aug 29, 2022

Summary

This adds aliasing for accessibility state, it's used as requested on #34424.

Changelog

[General] [Added] - Add aria-disabled, aria-busy, aria-checked, aria-expanded and aria-selected prop to core components

Test Plan

<View
  aria-disabled={true}
  aria-selected={false}
  aria-checked={true}
  aria-expanded={true}
  aria-busy={true}
  style={{backgroundColor: '#527FE4', padding: 5}}>
  <Text style={{fontSize: 11}}>Blue background</Text>
</View>

@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 Aug 29, 2022
@ankit-tailor
Copy link
Contributor Author

Hi @necolas, I will be adding other components to this PR.

@facebook-github-bot 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 Aug 29, 2022
@react-native-bot react-native-bot added the Type: Enhancement A new feature or enhancement of an existing feature. label Aug 29, 2022
@necolas
Copy link
Contributor

necolas commented Aug 29, 2022

Please take a look at the failing tests. thanks

@ankit-tailor
Copy link
Contributor Author

Yes, looking into it.

@analysis-bot
Copy link

analysis-bot commented Aug 30, 2022

Platform Engine Arch Size (bytes) Diff
android hermes arm64-v8a 7,639,245 +1,010
android hermes armeabi-v7a 7,051,502 +999
android hermes x86 7,940,841 +1,009
android hermes x86_64 7,912,841 +1,002
android jsc arm64-v8a 9,513,506 +1,270
android jsc armeabi-v7a 8,289,111 +1,255
android jsc x86 9,452,839 +1,272
android jsc x86_64 10,043,907 +1,276

Base commit: 62f83a9
Branch: main

@analysis-bot
Copy link

analysis-bot commented Aug 30, 2022

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

Base commit: 62f83a9
Branch: main

@facebook-github-bot
Copy link
Contributor

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

@ankit-tailor
Copy link
Contributor Author

Hi @necolas, I've added alias for core components. Just wanted clarification regarding failing test cases for undefined values.

@necolas
Copy link
Contributor

necolas commented Aug 31, 2022

If in review a member of RN wants to do things differently for undefined values, they can bring that up. But you should update the snapshots so tests pass.

@ankit-tailor
Copy link
Contributor Author

@necolas updated all snapshots.

@facebook-github-bot
Copy link
Contributor

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

@ankit-tailor
Copy link
Contributor Author

@necolas @jacdebug Updated the latest changes, Let me know if anything else needs to be done.

@facebook-github-bot
Copy link
Contributor

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

@react-native-bot
Copy link
Collaborator

This pull request was successfully merged by @ankit-tailor in 98d84e5.

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

@react-native-bot react-native-bot added the Merged This PR has been merged. label Sep 8, 2022
facebook-github-bot pushed a commit that referenced this pull request Oct 26, 2022
Summary:
`aria-checked` prop should accept `mixed` as value as given [here](https://www.w3.org/WAI/GL/wiki/Using_WAI-ARIA_aria-checked%3Dmixed) and also [accessibilityState.checked](https://reactnative.dev/docs/accessibility#accessibilitystate) accepts mixed to represent checkboxes. This change refers to issue #34424 and PR #34524

## Changelog

[General] [Added] - Added `mixed` value for `aria-checked`.

Pull Request resolved: #34633

Test Plan:
```js
<TouchableOpacity
  accessibilityRole="checkbox"
  aria-checked="mixed"
  accessibilityHint="click me to change state">
  <Text>Checkbox example</Text>
</TouchableOpacity>
```

Reviewed By: lunaleaps

Differential Revision: D39382158

Pulled By: necolas

fbshipit-source-id: fa026274111305cc0bcbb42ed974ca1be7d779a5
OlimpiaZurek pushed a commit to OlimpiaZurek/react-native that referenced this pull request May 22, 2023
Summary:
This adds aliasing for accessibility state, it's used as requested on facebook#34424.

- [aria-disabled](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) to equivalent [accessibilityState.disabled](https://reactnative.dev/docs/accessibility#accessibilitystate)
- [aria-busy](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-busy) to equivalent [accessibilityState.busy](https://reactnative.dev/docs/accessibility#accessibilitystate)
- [aria-checked](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked) to equivalent [accessibilityState.checked](https://reactnative.dev/docs/accessibility#accessibilitystate)
- [aria-expanded](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) to equivalent [accessibilityState.expanded](https://reactnative.dev/docs/accessibility#accessibilitystate)
- [aria-selected](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) to equivalent [accessibilityState.selected](https://reactnative.dev/docs/accessibility#accessibilitystate)

## Changelog

[General] [Added] - Add aria-disabled, aria-busy, aria-checked, aria-expanded and aria-selected prop to core components

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

Pull Request resolved: facebook#34524

Test Plan:
```js
<View
  aria-disabled={true}
  aria-selected={false}
  aria-checked={true}
  aria-expanded={true}
  aria-busy={true}
  style={{backgroundColor: '#527FE4', padding: 5}}>
  <Text style={{fontSize: 11}}>Blue background</Text>
</View>
```

Reviewed By: cipolleschi

Differential Revision: D39137790

Pulled By: jacdebug

fbshipit-source-id: 27b5c56e91731ba36bb4754d9862286a7a8191bc
OlimpiaZurek pushed a commit to OlimpiaZurek/react-native that referenced this pull request May 22, 2023
Summary:
`aria-checked` prop should accept `mixed` as value as given [here](https://www.w3.org/WAI/GL/wiki/Using_WAI-ARIA_aria-checked%3Dmixed) and also [accessibilityState.checked](https://reactnative.dev/docs/accessibility#accessibilitystate) accepts mixed to represent checkboxes. This change refers to issue facebook#34424 and PR facebook#34524

## Changelog

[General] [Added] - Added `mixed` value for `aria-checked`.

Pull Request resolved: facebook#34633

Test Plan:
```js
<TouchableOpacity
  accessibilityRole="checkbox"
  aria-checked="mixed"
  accessibilityHint="click me to change state">
  <Text>Checkbox example</Text>
</TouchableOpacity>
```

Reviewed By: lunaleaps

Differential Revision: D39382158

Pulled By: necolas

fbshipit-source-id: fa026274111305cc0bcbb42ed974ca1be7d779a5
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
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. Needs TypeScript Update Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. Type: Enhancement A new feature or enhancement of an existing feature.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants