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/directives/app-navigation.html b/app/common/directives/app-navigation.html
index f69bfc7..379aa3d 100644
--- a/app/common/directives/app-navigation.html
+++ b/app/common/directives/app-navigation.html
@@ -1,109 +1,126 @@
<nav class="nav__wrapper">
<ul id="nav__top-level" ng-style="navStyle">
<li>
- <a class="btn-overview" ng-class="{opened: firstLevel == 'overview'}" href="#/overview/server" ng-click="change('overview')" tabindex="1">
- <span class="">
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 40 40" xml:space="preserve" class="nav-icon">
- <path d="M23.9,18.2l3.3,3.3l1.1-1.1L23.9,16l-7.8,7.8l-3.3-3.3l-1.1,1.1l4.4,4.4L23.9,18.2z"/>
- <path d="M5,8v24h30V8H5z M33,30H7V12h26V30z"/>
- </svg>
- Server overview</span></a>
+ <a class="btn-overview" ng-class="{opened: firstLevel == 'overview'}" href="#/overview/server" ng-click="change('overview')">
+ <span>
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" class="nav-icon"><path d="M23.9 18.2l3.3 3.3 1.1-1.1-4.4-4.4-7.8 7.8-3.3-3.3-1.1 1.1 4.4 4.4 7.8-7.8z"/><path d="M5 8v24h30V8H5zm28 22H7V12h26v18z"/></svg>
+ Server overview
+ </span>
+ </a>
</li>
<li>
- <button class="btn-health" ng-class="{opened: firstLevel == 'server-health'}" ng-click="change('server-health')" tabindex="2">
+ <button class="btn-health"
+ ng-class="{opened: firstLevel == 'server-health'}"
+ ng-click="change('server-health')">
<span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 40 40" xml:space="preserve" class="nav-icon">
- <polyline class="st0" points="32,12.9 32,16 8,16 8,8 27,8 "/>
- <rect x="8" y="16" class="st0" width="24" height="8"/>
- <rect x="8" y="24" class="st0" width="24" height="8"/>
- <line class="st0" x1="19" y1="12" x2="27" y2="12"/>
- <line class="st0" x1="11" y1="12" x2="13" y2="12"/>
- <line class="st0" x1="19" y1="20" x2="27" y2="20"/>
- <line class="st0" x1="11" y1="20" x2="13" y2="20"/>
- <line class="st0" x1="19" y1="28" x2="27" y2="28"/>
- <line class="st0" x1="11" y1="28" x2="13" y2="28"/>
- <polygon points="36.4,4 37.5,5.1 32.4,10.2 29.5,7.4 30.7,6.2 32.4,8 "/>
- </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" class="nav-icon"><path class="st0" d="M32 12.9V16H8V8h19M8 16h24v8H8zM8 24h24v8H8zM19 12h8M11 12h2M19 20h8M11 20h2M19 28h8M11 28h2"/><path d="M36.4 4l1.1 1.1-5.1 5.1-2.9-2.8 1.2-1.2L32.4 8z"/></svg>
Server health
</span>
</button>
+ <ul class="nav__second-level btn-health"
+ ng-style="navStyle"
+ ng-class="{opened: (showSubMenu && firstLevel == 'server-health')}">
+ <li ng-class="{'active': (path == '/server-health/event-log')}">
+ <a href="#/server-health/event-log" ng-click="closeSubnav()"
+ tabindex="{{(showSubMenu && firstLevel == 'server-health') ? 0 : -1}}">Event log</a>
+ </li>
+ <li ng-class="{'active': (path == '/server-health/inventory-overview' || path == '/server-health/inventory')}">
+ <a href="#/server-health/inventory-overview" ng-click="closeSubnav()"
+ tabindex="{{(showSubMenu && firstLevel == 'server-health') ? 0 : -1}}">Hardware status</a>
+ </li>
+ <li ng-class="{'active': (path == '/server-health/sensors-overview' || path == '/server-health/sensors')}">
+ <a href="#/server-health/sensors-overview" ng-click="closeSubnav()"
+ tabindex="{{(showSubMenu && firstLevel == 'server-health') ? 0 : -1}}">Sensors</a>
+ </li>
+ <li ng-class="{'active': (path == '/server-health/sys-log')}" ng-show="dataService.configJson.redfishSupportEnabled">
+ <a href="#/server-health/sys-log" ng-click="closeSubnav()"
+ tabindex="{{(showSubMenu && firstLevel == 'server-health') ? 0 : -1}}">System Logs</a>
+ </li>
+ </ul>
</li>
<li>
- <button class="btn-control" ng-class="{opened: firstLevel == 'server-control'}" ng-click="change('server-control')" tabindex="3">
+ <button class="btn-control" ng-class="{opened: firstLevel == 'server-control'}" ng-click="change('server-control')">
<span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 40 40" xml:space="preserve" class="nav-icon">
- <line class="st0" x1="8" y1="12" x2="32" y2="12"/>
- <line class="st0" x1="8" y1="20" x2="32" y2="20"/>
- <line class="st0" x1="8" y1="28" x2="32" y2="28"/>
- <line class="st1" x1="24" y1="28" x2="28" y2="28"/>
- <line class="st1" x1="18" y1="20" x2="22" y2="20"/>
- <line class="st1" x1="12" y1="12" x2="16" y2="12"/>
- </svg>
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" class="nav-icon"><path class="st0" d="M8 12h24M8 20h24M8 28h24"/><path class="st1" d="M24 28h4M18 20h4M12 12h4"/></svg>
Server control
</span>
</button>
+ <ul class="nav__second-level btn-control"
+ ng-style="navStyle"
+ ng-class="{opened: (showSubMenu && firstLevel == 'server-control')}">
+ <li ng-class="{'active': (path == '/server-control' || path == '/server-control/power-operations')}">
+ <a href="#/server-control/power-operations" ng-click="closeSubnav()"
+ tabindex="{{(showSubMenu && firstLevel == 'server-control') ? 0 : -1}}">Server power operations</a>
+ </li>
+ <li ng-class="{'active': (path == '/server-control/power-usage')}">
+ <a href="#/server-control/power-usage" ng-click="closeSubnav()"
+ tabindex="{{(showSubMenu && firstLevel == 'server-control') ? 0 : -1}}">Manage power usage</a>
+ </li>
+ <li ng-class="{'active': (path == '/server-control/server-led')}">
+ <a href="#/server-control/server-led" ng-click="closeSubnav()"
+ tabindex="{{(showSubMenu && firstLevel == 'server-control') ? 0 : -1}}">Server LED</a>
+ </li>
+ <li ng-class="{'active': (path == '/server-control/bmc-reboot')}">
+ <a href="#/server-control/bmc-reboot" ng-click="closeSubnav()"
+ tabindex="{{(showSubMenu && firstLevel == 'server-control') ? 0 : -1}}">Reboot BMC</a>
+ </li>
+ <li ng-class="{'active': (path == '/server-control/remote-console')}">
+ <a href="#/server-control/remote-console" ng-click="closeSubnav()"
+ tabindex="{{(showSubMenu && firstLevel == 'server-control') ? 0 : -1}}">Serial over LAN console</a>
+ </li>
+ <li ng-class="{'active': (path == '/server-control/kvm')}">
+ <a href="#/server-control/kvm" ng-click="closeSubnav()"
+ tabindex="{{(showSubMenu && firstLevel == 'server-control') ? 0 : -1}}">KVM</a>
+ </li>
+ <li ng-class="{'active': (path == '/configuration' || path == '/configuration/virtual-media')}">
+ <a href="#/configuration/virtual-media" ng-click="closeSubnav()"
+ tabindex="{{(showSubMenu && firstLevel == 'server-control') ? 0 : -1}}">Virtual Media</a>
+ </li>
+ </ul>
</li>
<li>
- <button class="btn-config" ng-class="{opened: firstLevel == 'configuration'}" ng-click="change('configuration')" tabindex="4">
- <span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 40 40" xml:space="preserve" class="nav-icon">
- <path d="M31.5,20c0-0.6-0.1-1.2-0.2-1.8L35,15l-3.1-5.1l-4.4,1.4c-1.1-0.9-2.3-1.6-3.6-2.1L23,5h-6l-1,4.2c-1.3,0.5-2.5,1.2-3.6,2.1
- L8.1,9.9L5,15l3.7,3.2c-0.1,0.6-0.2,1.2-0.2,1.8c0,0.6,0.1,1.2,0.2,1.8L5,25l3.1,5.1l4.4-1.4c1.1,0.9,2.3,1.6,3.6,2.1l1,4.2h6l1-4.2
- c1.3-0.5,2.5-1.2,3.6-2.1l4.4,1.4L35,25l-3.7-3.2C31.4,21.2,31.5,20.6,31.5,20z M32.4,25.4L31,27.7l-2.9-0.9l-1.1-0.4l-0.9,0.7
- c-0.9,0.8-1.9,1.3-2.9,1.7l-1,0.4L22,30.3L21.4,33h-2.8L18,30.3l-0.2-1.1l-1-0.4c-1.1-0.4-2.1-1-2.9-1.7l-0.9-0.7l-1.1,0.4L9,27.7
- l-1.4-2.3l2.4-2.1l0.8-0.7l-0.2-1.1c-0.1-0.5-0.1-1-0.1-1.5c0-0.4,0-0.9,0.1-1.5l0.2-1.1L10,16.7l-2.4-2.1L9,12.3l2.9,0.9l1.1,0.4
- l0.9-0.7c0.9-0.8,1.9-1.3,2.9-1.7l1-0.4L18,9.7L18.6,7h2.8L22,9.7l0.2,1.1l1,0.4c1.1,0.4,2.1,1,2.9,1.7l0.9,0.7l1.1-0.4l2.9-0.9
- l1.4,2.3L30,16.7l-0.8,0.7l0.2,1.1c0.1,0.6,0.1,1,0.1,1.5s0,0.9-0.1,1.5l-0.2,1.1l0.8,0.7L32.4,25.4z"/>
- <path d="M20,15c-2.8,0-5,2.2-5,5s2.2,5,5,5s5-2.2,5-5S22.8,15,20,15z M20,23c-1.7,0-3-1.3-3-3c0-1.7,1.3-3,3-3c1.7,0,3,1.3,3,3C23,21.7,21.7,23,20,23z"/>
- </svg>
- Server configuration</span></button>
- </li>
- <li>
- <button class="btn-users" ng-class="{opened: firstLevel == 'users'}" ng-click="change('users')" tabindex="5">
- <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="nav-icon"><path d="M16 21c5.523 0 10-4.477 10-10S21.523 1 16 1 6 5.477 6 11s4.477 10 10 10zm0-18c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8zM24 23H8a4 4 0 0 0-4 4v4h24v-4a4 4 0 0 0-4-4z"/></svg></span>
- <span>Users</span>
+ <button class="btn-config" ng-class="{opened: firstLevel == 'configuration'}" ng-click="change('configuration')">
+ <span>
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" class="nav-icon"><path d="M31.5 20c0-.6-.1-1.2-.2-1.8L35 15l-3.1-5.1-4.4 1.4c-1.1-.9-2.3-1.6-3.6-2.1L23 5h-6l-1 4.2c-1.3.5-2.5 1.2-3.6 2.1L8.1 9.9 5 15l3.7 3.2c-.1.6-.2 1.2-.2 1.8 0 .6.1 1.2.2 1.8L5 25l3.1 5.1 4.4-1.4c1.1.9 2.3 1.6 3.6 2.1l1 4.2h6l1-4.2c1.3-.5 2.5-1.2 3.6-2.1l4.4 1.4L35 25l-3.7-3.2c.1-.6.2-1.2.2-1.8zm.9 5.4L31 27.7l-2.9-.9-1.1-.4-.9.7c-.9.8-1.9 1.3-2.9 1.7l-1 .4-.2 1.1-.6 2.7h-2.8l-.6-2.7-.2-1.1-1-.4c-1.1-.4-2.1-1-2.9-1.7l-.9-.7-1.1.4-2.9.9-1.4-2.3 2.4-2.1.8-.7-.2-1.1c-.1-.5-.1-1-.1-1.5 0-.4 0-.9.1-1.5l.2-1.1-.8-.7-2.4-2.1L9 12.3l2.9.9 1.1.4.9-.7c.9-.8 1.9-1.3 2.9-1.7l1-.4.2-1.1.6-2.7h2.8l.6 2.7.2 1.1 1 .4c1.1.4 2.1 1 2.9 1.7l.9.7 1.1-.4 2.9-.9 1.4 2.3-2.4 2.1-.8.7.2 1.1c.1.6.1 1 .1 1.5s0 .9-.1 1.5l-.2 1.1.8.7 2.4 2.1z"/><path d="M20 15c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"/></svg>
+ Server configuration
+ </span>
</button>
+ <ul class="nav__second-level btn-firmware"
+ ng-style="navStyle"
+ ng-class="{opened: (showSubMenu && firstLevel == 'configuration')}">
+ <li ng-class="{'active': (path == '/configuration' || path == '/configuration/network')}">
+ <a href="#/configuration/network" ng-click="closeSubnav()"
+ tabindex="{{(showSubMenu && firstLevel == 'configuration') ? 0 : -1}}">Network settings</a>
+ </li>
+ <li ng-class="{'active': (path == '/configuration' || path == '/configuration/snmp')}">
+ <a href="#/configuration/snmp" ng-click="closeSubnav()"
+ tabindex="{{(showSubMenu && firstLevel == 'configuration') ? 0 : -1}}">SNMP settings</a>
+ </li>
+ <li ng-class="{'active': (path == '/configuration' || path == '/configuration/firmware')}">
+ <a href="#/configuration/firmware" ng-click="closeSubnav()"
+ tabindex="{{(showSubMenu && firstLevel == 'configuration') ? 0 : -1}}">Firmware</a>
+ </li>
+ <li ng-class="{'active': (path == '/configuration' || path == '/configuration/date-time')}">
+ <a href="#/configuration/date-time" ng-click="closeSubnav()"
+ tabindex="{{(showSubMenu && firstLevel == 'configuration') ? 0 : -1}}">Date and time settings</a>
+ </li>
+ </ul>
</li>
- </ul>
- <ul class="nav__second-level btn-health" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'server-health')}">
- <li ng-class="{'active': (path == '/server-health/event-log')}">
- <a href="#/server-health/event-log" tabindex="6" ng-click="closeSubnav()">Event log</a></li>
- <li ng-class="{'active': (path == '/server-health/inventory-overview' || path == '/server-health/inventory')}" ng-click="closeSubnav()">
- <a href="#/server-health/inventory-overview" tabindex="7">Hardware status</a></li>
- <li ng-class="{'active': (path == '/server-health/sensors-overview' || path == '/server-health/sensors')}">
- <a href="#/server-health/sensors-overview" ng-click="closeSubnav()" tabindex="8">Sensors</a></li>
- <li ng-class="{'active': (path == '/server-health/sys-log')}" ng-show="dataService.configJson.redfishSupportEnabled">
- <a href="#/server-health/sys-log" ng-click="closeSubnav()" tabindex="9">System Logs</a></li>
- </ul>
- <ul class="nav__second-level btn-control" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'server-control')}">
- <li ng-class="{'active': (path == '/server-control' || path == '/server-control/power-operations')}">
- <a href="#/server-control/power-operations" tabindex="10" ng-click="closeSubnav()">Server power operations</a>
+ <li>
+ <button class="btn-users" ng-class="{opened: firstLevel == 'users'}" ng-click="change('users')">
+ <span>
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="nav-icon"><path d="M16 21c5.523 0 10-4.477 10-10S21.523 1 16 1 6 5.477 6 11s4.477 10 10 10zm0-18c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8zm8 20H8a4 4 0 0 0-4 4v4h24v-4a4 4 0 0 0-4-4z"/></svg>
+ Users
+ </span>
+ </button>
+ <ul class="nav__second-level btn-users"
+ ng-style="navStyle"
+ ng-class="{opened: (showSubMenu && firstLevel == 'users')}">
+ <li ng-class="{'active': (path == '/users' || path == '/users/manage-accounts')}">
+ <a href="#/users/manage-accounts" ng-click="closeSubnav()"
+ tabindex="{{ (showSubMenu && firstLevel == 'users') ? 0 : -1}}">Manage user account</a>
+ </li>
+ </ul>
</li>
- <li ng-class="{'active': (path == '/server-control/power-usage')}">
- <a href="#/server-control/power-usage" tabindex="11" ng-click="closeSubnav()">Manage power usage</a></li>
- <li ng-class="{'active': (path == '/server-control/server-led')}">
- <a href="#/server-control/server-led" tabindex="12" ng-click="closeSubnav()">Server LED</a></li>
- <li ng-class="{'active': (path == '/server-control/bmc-reboot')}">
- <a href="#/server-control/bmc-reboot" tabindex="13" ng-click="closeSubnav()">Reboot BMC</a></li>
- <li ng-class="{'active': (path == '/server-control/remote-console')}">
- <a href="#/server-control/remote-console" tabindex="14" ng-click="closeSubnav()">Serial over LAN console</a></li>
- <li ng-class="{'active': (path == '/server-control/kvm')}">
- <a href="#/server-control/kvm" tabindex="15" ng-click="closeSubnav()">KVM</a></li>
- <li ng-class="{'active': (path == '/configuration' || path == '/configuration/virtual-media')}">
- <a href="#/configuration/virtual-media" tabindex="16" ng-click="closeSubnav()">Virtual Media</a></li>
- </ul>
- <ul class="nav__second-level btn-firmware" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'configuration')}">
- <li ng-class="{'active': (path == '/configuration' || path == '/configuration/network')}">
- <a href="#/configuration/network" tabindex="17" ng-click="closeSubnav()">Network settings</a></li>
- <li ng-class="{'active': (path == '/configuration' || path == '/configuration/snmp')}">
- <a href="#/configuration/snmp" tabindex="18" ng-click="closeSubnav()">SNMP settings</a></li>
- <li ng-class="{'active': (path == '/configuration' || path == '/configuration/firmware')}">
- <a href="#/configuration/firmware" tabindex="19" ng-click="closeSubnav()">Firmware</a></li>
- <li ng-class="{'active': (path == '/configuration' || path == '/configuration/date-time')}">
- <a href="#/configuration/date-time" tabindex="20" ng-click="closeSubnav()">Date and time settings</a></li>
- </ul>
- <ul class="nav__second-level btn-users" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'users')}">
- <li ng-class="{'active': (path == '/users' || path == '/users/manage-accounts')}">
- <a href="#/users/manage-accounts" tabindex="21" ng-click="closeSubnav()">Manage user accounts</a></li>
</ul>
</nav>
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;
+ }
}
}
}