ionic-framework

mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00

Files

José Rio 4df0e0f4c0 fix(alert): change focused element and improve keyboard navigation (#30220 )

Issue number: internal

## What is the current behavior?
> Once Alert gets open the focusable element was the ion-alert itself.
> <img width="279" alt="Screenshot 2025-02-27 at 18 07 19"
src="https://github.com/user-attachments/assets/50ad3b75-ba32-4dd1-b17e-c5a5bf16f93b"
/>


## What is the new behavior?
In order to mimick native alert a11y behaviour...

Changed the focused element based on the amount of existing buttons.
> If there is only 1 button, it should be that one focused
> <img width="304" alt="Screenshot 2025-02-27 at 18 04 52"
src="https://github.com/user-attachments/assets/e273f65a-5347-4a29-a156-f6e57852f0dc"
/>

> Otherwise it should focus the `.alert-wrapper` container
> <img width="284" alt="Screenshot 2025-02-27 at 18 05 02"
src="https://github.com/user-attachments/assets/4a8507f3-a31f-40b9-8cd7-478ec881e3ed"
/>
>
> **NOTE**: The yellow outline it's just for demo purposes, it was not
implemented 🤪


## Does this introduce a breaking change?

- [ ] Yes
- [X] No


## Other information
- Also updated support to the shiftTab keyboard navigation.
- Updated tests and screenshots with the latest changes.

---------

Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>

2025-03-06 11:16:04 +00:00