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

Fleet UI: Open a modal moves updates active element to modal elements #25020

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

RachelElysia
Copy link
Member

@RachelElysia RachelElysia commented Dec 26, 2024

Issue

Part of #23266

Description

  • Better keyboard accessibility for modals
    • When opening a modal, the keyboard active element is now within the modal and not back on the main page
    • Figured out how to make the focusable element go back to the original element when closing the modal :)
    • Works on current FF, Chrome, not Safari

Screenrecording

Screen.Recording.2024-12-26.at.2.30.18.PM.mov

QA

  • When opening any modal with a keyboard in Chrome or FF, you now can to tab through the modal immediately as it moves the focus to an element within the modal
  • When exiting the modal with keyboard, make the focusable element go back to the original element that was focused before opening the modal

Checklist for submitter

If some of the following don't apply, delete the relevant line.

  • Manual QA for all new/changed functionality

@RachelElysia RachelElysia requested a review from a team as a code owner December 26, 2024 18:08
Copy link

codecov bot commented Dec 26, 2024

Codecov Report

Attention: Patch coverage is 88.88889% with 3 lines in your changes missing coverage. Please review.

Project coverage is 63.79%. Comparing base (ec43ee2) to head (e6d173d).
Report is 1 commits behind head on main.

Files with missing lines Patch % Lines
frontend/components/Modal/Modal.tsx 88.88% 3 Missing ⚠️
Additional details and impacted files
@@           Coverage Diff           @@
##             main   #25020   +/-   ##
=======================================
  Coverage   63.78%   63.79%           
=======================================
  Files        1610     1610           
  Lines      153230   153257   +27     
  Branches     4012     4020    +8     
=======================================
+ Hits        97743    97767   +24     
- Misses      47694    47697    +3     
  Partials     7793     7793           
Flag Coverage Δ
frontend 53.51% <88.88%> (+0.07%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@RachelElysia RachelElysia marked this pull request as draft December 26, 2024 20:32
@RachelElysia
Copy link
Member Author

Converting to draft as I want to test as many modals as possible before review.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

1 participant