Fix the tabbing order in the primary and secondary navigation
The main navigation will follow a natural tabbing order.
When the secondary menu is expanded with the keyboard, the
first item in the secondary menu will be in focus.
Tabbing after the last item in the secondary menu will return
focus to the primary menu.
- Restructures markup so secondary menu is nested in primary
navigation
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I4ecb17ef6721ee443310f81e1554620352c145a4
diff --git a/app/common/styles/directives/app-navigation.scss b/app/common/styles/directives/app-navigation.scss
index dc045e4..1e21659 100644
--- a/app/common/styles/directives/app-navigation.scss
+++ b/app/common/styles/directives/app-navigation.scss
@@ -38,7 +38,6 @@
left: 0;
top: 0;
bottom: 0;
- z-index: 99;
list-style-type: none;
margin: 0;
padding: 0;
@@ -122,61 +121,64 @@
}
}
}
-}
-// Second Level Navigation
-.nav__second-level {
- position: fixed;
- background: $nav__second-level-color;
- top: 0;
- bottom: 0;
- left: -245px;
- width: $nav__seclvlWidth;
- z-index: 97;
- padding: 0;
- margin: 0;
- list-style-type: none;
- @include fastTransition-all;
- &.opened {
- left: $nav__toplvlWidth;
- box-shadow: 7px 0 28px -10px $darkgrey;
- @include fastTransition-all;
- }
- a {
- padding: 1.2em 1em 1.2em 1em;
+ // Second Level Navigation
+ .nav__second-level {
+ position: fixed;
+ background: $nav__second-level-color;
+ top: 0;
+ bottom: 0;
+ left: -245px;
+ width: $nav__seclvlWidth;
+ z-index: -1;
+ padding: 0;
+ margin: 0;
+ list-style-type: none;
display: block;
- color: $black;
- text-decoration: none;
- position: relative;
- font-weight: 400;
- &:hover {
- background: $white;
+ @include fastTransition-all;
+ &.opened {
+ left: $nav__toplvlWidth;
+ box-shadow: 7px 0 28px -10px $darkgrey;
+ @include fastTransition-all;
}
- }
+ a {
+ padding: 1.2em 1em 1.2em 1em;
+ display: block;
+ color: $black;
+ text-decoration: none;
+ position: relative;
+ font-weight: 400;
+ text-align: left;
+ border-bottom: 1px solid transparent;
+ &:hover {
+ background: $white;
+ }
+ }
- li {
- a:after{
- content: '\203A';
- position: absolute;
- font-size: 2em;
- font-weight: 700;
- top: 50%;
- right: .6em;
- transform: translateY(-59%);
- color: $nav__second-level-text-color;
- opacity: 0;
- }
- &.active {
- a {font-weight: 700;}
- }
- &.active,
- &:focus,
- &:hover {
- a {color: $nav__second-level-text-color;}
- a:after {
- opacity: 1;
- right: .3em;
- @include fastTransition-all;
+ li {
+ a:after{
+ content: '\203A';
+ position: absolute;
+ font-size: 2em;
+ font-weight: 700;
+ top: 50%;
+ right: .6em;
+ transform: translateY(-59%);
+ color: $nav__second-level-text-color;
+ opacity: 0;
+ }
+ &.active {
+ a {font-weight: 700;}
+ }
+ &.active,
+ &:focus,
+ &:hover {
+ a {color: $nav__second-level-text-color;}
+ a:after {
+ opacity: 1;
+ right: .3em;
+ @include fastTransition-all;
+ }
}
}
}