Fix Overview keyboard navigation and focus trapping - #338
Conversation
- Applies `inert` to left admin menu, shell siblings in `#wpbody-content`, and iframes upon entering Overview to prevent Tab from traversing invisible elements. - Extracts the desktop tile close 'X' into a native `<button>` sibling (rather than an inner `<span>`) so it is reachable via Tab. - Updates the global `Enter` listener to let native click events fire when a `<button>` is actively focused.
- OVERVIEW_INERT_ELEMENTS constant replaces two inline arrays - inertWpBodyContentChildren helper replaces two inline loops - Use .inert property only (removes redundant setAttribute/removeAttribute) - Use .inert property for window elements (was setAttribute only) - Remove redundant tabindex="0" on native <button> - Add adminmenuback and desktop-mode-widgets to inert list
AllTerrainDeveloper
left a comment
AllTerrainDeveloper
left a comment
There was a problem hiding this comment.
Hey! Thank you again! I can see a regression added by this pull request. If we have 3 opened windows and one of them is minimized, if we click on the minimized one, it's not restored.
See video:
https://github.com/user-attachments/assets/ef337ca2-2dbb-42c8-b0c4-411d33f77307
A second thing is that we have a rule which is to add tests with each new change :)
Would you mind?
@AllTerrainDeveloper This is actually a core bug - you can reproduce it on the latest trunk as well. I already discussed this in #311, and I've opened PR #312 to address it. |
…gation. - enterOverview/exitOverview correctly toggle inert on background chrome elements, wpbody-content children, and all windows. - Each desktop tile wrapper contains two sibling <button>s (tile + close X). - Enter while focused on a real close button does not exit overview. - enterOverview tolerates a missing #wpbody-content element.
|
Oh Thank you! Didn't realise! too much work lately on Desktop Mode 🤣 |
2 participants
This PR fixes two a11y issues that make the Overview mode keyboard-inaccessible: Tab traverses the entire hidden admin chrome before reaching desktop tiles, and the close X button on each tile is unreachable via keyboard.
Closes #331
Why?
Two root causes:
How?
<button>into a sibling<button>under a wrapper<div>, so both are independently reachable by Tab.