fix(overlay): hide from screen readers while animating

[thetaPC]

Issue number: resolves #29857

---

What is the current behavior?

Screen readers like Android Talkback would not have the focus ring on the correct element. For example, Talkback would announce the buttons correctly within action sheet but the focus ring was no where to be seen.

After digging around, the focus rings are located out of screen because the action sheet is mounted to the DOM out of the screen first then transitions into the screen. There are some screen readers that do not behave as expected when an element uses transform styles like action sheet.

https://github.com/user-attachments/assets/5a700bcc-3149-47a9-96ff-0aef99dd2bb3

What is the new behavior?

• When an overlay is being animated (presenting or dismissing), the overlay will hide from screen readers. This allows the element to navigate to its correct destination for screen readers to interact with. Plus, we shouldn't allow screen readers to interact with content in the middle of an animation. It could lead to some confusion.

Does this introduce a breaking change?

• [ ] Yes
• [x] No

Other information

Dev build: 8.3.3-dev.11729276019.194c165c

A physical Android device will be needed, the issue does not appear in simulators

Components that need to be tested because they use overlays:

• Action sheet
• Alert
• Loading
• Modal
• Popover
• Select w/ action sheet interface
• Select w/ alert interface
• Select w/ popover interface
• Toast

How to test:

1. Create a starter app (any framework will do)
2. Add an action sheet
3. Build app for mobile devices

ionic build

ionic cap add ios
ionic cap add android

ionic cap copy && ionic cap sync

4. Open the app in Android Studio: ionic cap open android
5. Connect the Android device to Android Studio
6. Open app in Android device
7. Launch Talkback
8. Navigate back to the app
9. Open action sheet
10. Swipe over to the action sheet's buttons
11. Notice that the buttons don't have a focus ring
12. Go back to the starter
13. Install the dev build
14. Add the components to the app
15. Sync app: ionic cap copy && ionic cap sync
16. Relaunch the app on the Android device
17. Verify that the focus ring appears on the action sheet's buttons
18. Verify that the other overlays are working as intended

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 23, 2024 5:33pm

[ghost]

Issue number: resolves #29857

What is the current behavior?

Screen readers like Android Talkback would not have the focus ring on the correct element. For example, Talkback would announce the buttons correctly within action sheet but the focus ring was no where to be seen.

After digging around, the focus rings are located out of screen because the action sheet is mounted to the DOM out of the screen first then transitions into the screen. There are some screen readers that do not behave as expected when an element uses transform styles like action sheet.

ion-select-missing-focus.mp4

What is the new behavior?

• When an overlay is being animated (presenting or dismissing), the overlay will hide from screen readers. This allows the element to navigate to its correct destination for screen readers to interact with. Plus, we shouldn't allow screen readers to interact with content in the middle of an animation. It could lead to some confusion.

Does this introduce a breaking change?

• [ ] Yes
• [x] No

Other information

Dev build: 8.3.3-dev.11729276019.194c165c

A physical Android device will be needed, the issue does not appear in simulators

Components that need to be tested because they use overlays:

• Action sheet
• Alert
• Loading
• Modal
• Popover
• Select w/ action sheet interface
• Select w/ alert interface
• Select w/ popover interface
• Toast

How to test:

1. Create a starter app (any framework will do)
2. Add an action sheet
3. Build app for mobile devices

ionic build

ionic cap add ios
ionic cap add android

ionic cap copy && ionic cap sync

4. Open the app in Android Studio: ionic cap open android
5. Connect the Android device to Android Studio
6. Open app in Android device
7. Launch Talkback
8. Navigate back to the app
9. Open action sheet
10. Swipe over to the action sheet's buttons
11. Notice that the buttons don't have a focus ring
12. Go back to the starter
13. Install the dev build
14. Add the components to the app
15. Sync app: ionic cap copy && ionic cap sync
16. Relaunch the app on the Android device
17. Verify that the focus ring appears on the action sheet's buttons
18. Verify that the other overlays are working as intended

@