diff options
| author | Derick Montague <derick.montague@ibm.com> | 2020-06-28 18:17:32 +0300 |
|---|---|---|
| committer | Derick Montague <derick.montague@ibm.com> | 2020-07-01 16:35:09 +0300 |
| commit | 74466b852979859e4b8c9a448123460098fdbbf5 (patch) | |
| tree | 1e42f3cecea7f088a8cdd26ab6f2b505524a3ced /src/components/AppNavigation | |
| parent | a7ec6293c9b63a617aea2a0110edf33a6a3c9dbc (diff) | |
| download | webui-vue-74466b852979859e4b8c9a448123460098fdbbf5.tar.xz | |
Resolve hidden focus within closed navigation
When the primary navigation is closed a keyboard user can still tab
into the menu. This can be confusing since the user can not visibly
determine what element as focus. This occurs because we chose not to
hide and show the menu. This simplifies the solution for users relying
on assistive technology.
This change will show a keyboard user the navigation when they tab into
it. This removes any confusion of where the user's keyboard focus is
without having to complicate the solution used for assistive technology
users.
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I17fa9f257610c3c40844660b341ccc6af2ee3b4e
Diffstat (limited to 'src/components/AppNavigation')
| -rw-r--r-- | src/components/AppNavigation/AppNavigation.vue | 3 |
1 files changed, 2 insertions, 1 deletions
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue index 8e7b8fbf..9c5295ad 100644 --- a/src/components/AppNavigation/AppNavigation.vue +++ b/src/components/AppNavigation/AppNavigation.vue @@ -253,7 +253,8 @@ svg { z-index: $zindex-fixed + 2; } - &.open { + &.open, + &:focus-within { transform: translateX(0); transition-timing-function: $entrance-easing--productive; } |