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

fix(alert): change focused element and improve keyboard navigation #30220

Merged
merged 7 commits into from
Mar 6, 2025

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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants