SideNav - Disable keyboard navigation/focus of hidden elements
#1909
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
alex-ju
changed the title
SideNav - fixed navigation elements remaining interactive when minimizedSideNav - fix navigation elements remaining interactive when minimized
alex-ju
changed the title
SideNav - fix navigation elements remaining interactive when minimizedSideNav - Disable keyboard navigation/focus of hidden elements
didoo
reviewed
Jan 26, 2024
| @@ -9,10 +9,10 @@ | |||
| <div class="hds-side-nav__wrapper-header"> | |||
| {{yield to="header"}} | |||
| </div> | |||
| <div class="hds-side-nav__wrapper-body"> | |||
| <div class="hds-side-nav__wrapper-body" inert={{@isMinimized}}> | |||
MelSumner
approved these changes
Jan 29, 2024
alex-ju
force-pushed
the
alex-ju/sidenav-inert
branch
from
8782fd0
to
b67f6f4
Compare
This reverts commit e4b21a2.
alex-ju
force-pushed
the
alex-ju/sidenav-inert
branch
from
b67f6f4
to
590e287
Compare
didoo
reviewed
Feb 9, 2024
.changeset/strong-balloons-repeat.md
Outdated
| "@hashicorp/design-system-components": patch | ||
| --- | ||
|
|
||
| `SideNav` - fixed navigation elements remaining interactive when minimized |
There was a problem hiding this comment.
Suggested change
| `SideNav` - fixed navigation elements remaining interactive when minimized | |
| `SideNav` - fixed issue with navigation elements remaining interactive when minimized |
| let { onToggleMinimizedStatus } = this.args; | ||
|
|
||
| if (typeof onToggleMinimizedStatus === 'function') { | ||
| onToggleMinimizedStatus(this.isMinimized); | ||
| } | ||
| } | ||
|
|
||
| @action | ||
| didInsert(element) { | ||
| this.containersToHide = element.querySelectorAll( |
alex-ju
force-pushed
the
alex-ju/sidenav-inert
branch
from
590e287
to
910a296
Compare
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📌 Summary
Currently, interactive elements within the SideNav are focusable even when the SideNav is minimized/collapsed. This makes them visible and interactive to screen-reader users even though they are not visible.
The usual and easiest way to fix this issue is to set
display: noneon such elements. However, because of the desired fade effect, we can't use this method and we rely on changing thevisibilityof these containers. To fix this issue while preserving the fade effect, we make inert the containers potentially holding such interactive elements.To facilitate the review of this feature I resurrected the demo app previously used for other SideNav improvements.
🔗 External links
Jira ticket: HDS-2936
👀 Component checklist
💬 Please consider using conventional comments when reviewing this PR.