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
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 8e7b8fb..9c5295a 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -253,7 +253,8 @@
z-index: $zindex-fixed + 2;
}
- &.open {
+ &.open,
+ &:focus-within {
transform: translateX(0);
transition-timing-function: $entrance-easing--productive;
}