Skip to content

Conversation

joselrio
Copy link
Contributor

@joselrio joselrio commented Feb 27, 2025

Issue number: internal

What is the current behavior?

Once Alert gets open the focusable element was the ion-alert itself.
Screenshot 2025-02-27 at 18 07 19

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
Screenshot 2025-02-27 at 18 04 52

Otherwise it should focus the .alert-wrapper container
Screenshot 2025-02-27 at 18 05 02

NOTE: The yellow outline it's just for demo purposes, it was not implemented 🤪

Does this introduce a breaking change?

  • Yes
  • No

Other information

  • Also updated support to the shiftTab keyboard navigation.
  • Updated tests and screenshots with the latest changes.
@joselrio joselrio requested a review from a team as a code owner February 27, 2025 18:08
@joselrio joselrio requested a review from BenOsodrac February 27, 2025 18:08
Copy link

vercel bot commented Feb 27, 2025

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 Mar 5, 2025 4:28pm
@github-actions github-actions bot added the package: core @ionic/core package label Feb 27, 2025
@joselrio joselrio changed the title fix(IonAlert): Change focused element and improve keyboard navigation. fix(IonAlert): change focused element and improve keyboard navigation. Feb 27, 2025
@brandyscarney brandyscarney changed the title fix(IonAlert): change focused element and improve keyboard navigation. fix(alert): change focused element and improve keyboard navigation Mar 4, 2025
Copy link
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

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

Minor request

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

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

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

LGTM

@joselrio joselrio added this pull request to the merge queue Mar 5, 2025
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to no response for status checks Mar 5, 2025
@joselrio joselrio added this pull request to the merge queue Mar 6, 2025
Merged via the queue into main with commit 4df0e0f Mar 6, 2025
49 checks passed
@joselrio joselrio deleted the ROU-11159 branch March 6, 2025 11:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

3 participants