From 74466b852979859e4b8c9a448123460098fdbbf5 Mon Sep 17 00:00:00 2001 From: Derick Montague Date: Sun, 28 Jun 2020 10:17:32 -0500 Subject: 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 Change-Id: I17fa9f257610c3c40844660b341ccc6af2ee3b4e --- src/components/AppNavigation/AppNavigation.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src/components') 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; } -- cgit v1.2.3