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

[IOPID-2107] Adjust TextInput accessibility behavior #326

Merged
merged 2 commits into from
Aug 27, 2024

Conversation

ChrisMattew
Copy link
Collaborator

@ChrisMattew ChrisMattew commented Aug 27, 2024

Short description

Removed accessibilityElementsHidden prop to allow iOS' VoiceOver to access Input element

List of changes proposed in this pull request

  • TextInputBase: removed accessibilityElementsHidden prop

Demo

A11Y iOS
Before After
iOS-a11y-email-insertion-input-focus.mov
iOS-a11y-email-insertion-fix.mov

How to test

Run the application from an iOS physical device with VoiceOver enabled and try to target a TextInputBase element.

@ChrisMattew ChrisMattew added bug Something isn't working a11y labels Aug 27, 2024
@ChrisMattew ChrisMattew self-assigned this Aug 27, 2024
@ChrisMattew ChrisMattew marked this pull request as ready for review August 27, 2024 12:23
@ChrisMattew ChrisMattew requested review from dmnplb and a team as code owners August 27, 2024 12:23
@ChrisMattew ChrisMattew requested a review from Ladirico August 27, 2024 12:23
@dmnplb dmnplb merged commit c692bfd into main Aug 27, 2024
6 checks passed
@dmnplb dmnplb deleted the IOPID-2107-a11y-TextInputBase-focus branch August 27, 2024 12:37
Ladirico added a commit to pagopa/io-app that referenced this pull request Sep 3, 2024
…on screen (#6117)

## Short description
Fixed some accessibility bugs, updated snapshots and updated
`react-native-reanimated` config in `jestConfig.js` file.

## List of changes proposed in this pull request
- Upgrade DS lib version, more infos
[here](pagopa/io-app-design-system#326)
- Fixed the focus behavior on keyboard key press 
- Updated snapshots
- Updated `jestConfig.js` file

## E2E
>[!Tip]
>[![Run e2e
tests](https://github.com/pagopa/io-app/actions/workflows/test-e2e.yml/badge.svg?branch=IOPID-2108-a11y-first-onboarding-email-insertion)](https://github.com/pagopa/io-app/actions/workflows/test-e2e.yml)

## Demo
<details>
<summary>A11Y iOS</summary>

|Before |Announce Error|Keypress Focus|
|-------|-----|------|
|<video
src="https://github.com/user-attachments/assets/b70688e6-30c4-427c-8878-94f0f5abf667"
/>|<video
src="https://github.com/user-attachments/assets/98fec96e-4fe7-4c26-b692-365b8e37b1e2"
/>|<video
src="https://github.com/user-attachments/assets/60f97355-020f-42e2-a08d-393eb21ccc09"
/>|

</details>

<details>
<summary>A11Y Android</summary>

|Before |Announce Error|Keypress Focus|
|-------|-----|------|
|<video
src="https://github.com/user-attachments/assets/279dabcb-30d9-49bb-8329-1f53a85128bc"
/>|<video
src="https://github.com/user-attachments/assets/43fb36ed-6601-4f14-8c8e-883fdb0b24d3"
/>|<video
src="https://github.com/user-attachments/assets/6267289e-dc42-4517-99b5-a7391ef91dc3"
/>|

</details>

## How to test
Using a physical device, enable the screen reader and interact with the
`EmailInsertScreen`.

---------

Co-authored-by: Alice Di Rico <83651704+Ladirico@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants