Accessibility fixes

- Add tab index order to navigation.
- Minor CSS changes.

Change-Id: I402d3cb8c1ac14bd930a5efcf472c1d249cfe00a
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>

1 files changed, 13 insertions, 15 deletions

diff --git a/app/common/directives/app-navigation.html b/app/common/directives/app-navigation.html
index c07e136..661b4a5 100644
--- a/app/common/directives/app-navigation.html
+++ b/app/common/directives/app-navigation.html
@@ -3,16 +3,16 @@
 		<li>
 			<a class="btn-overview" ng-class="{opened: firstLevel == 'overview'}" href="#/overview/system" 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" class="nav-icon">
+					<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 40 40" style="enable-background:new 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>
 		</li>
 		<li>
-			<button class="btn-health" ng-class="{opened: firstLevel == 'server-health'}" ng-click="change('server-health')" tabindex="9">
+			<button class="btn-health" ng-class="{opened: firstLevel == 'server-health'}" ng-click="change('server-health')" tabindex="2">
 				<span>
-					<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 40 40" class="nav-icon">
+					<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 40 40" style="enable-background:new 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"/>
@@ -29,9 +29,9 @@
 			</button>
 		</li>
 		<li>
-			<button class="btn-control" ng-class="{opened: firstLevel == 'server-control'}" ng-click="change('server-control')">
+			<button class="btn-control" ng-class="{opened: firstLevel == 'server-control'}" ng-click="change('server-control')" tabindex="3">
 				<span>
-					<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px" viewBox="0 0 40 40" class="nav-icon">
+					<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 40 40" style="enable-background:new 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"/>
@@ -44,9 +44,10 @@
 			</button>
 		</li>
 		<li>
-			<button class="btn-config" ng-class="{opened: firstLevel == 'configuration'}" ng-click="change('configuration')">
+			<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" class="nav-icon">
+				<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+						 viewBox="0 0 40 40" style="enable-background:new 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
@@ -59,7 +60,7 @@
 				Configuration</span></button>
 		</li>
 		<li>
-			<button class="btn-users" ng-class="{opened: firstLevel == 'users'}" ng-click="change('users')">
+			<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>
@@ -71,18 +72,18 @@
 	<!--</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="7" ng-click="closeSubnav()">Event log</a></li>
+			<a href="#/server-health/event-log" tabindex="3" 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">Hardware inventory</a></li>
+			<a href="#/server-health/inventory-overview" tabindex="4">Hardware inventory</a></li>
 		<li ng-class="{'active': (path == '/server-health/sensors-overview' || path == '/server-health/sensors')}">
-			<a href="#/server-health/sensors-overview" ng-click="closeSubnav()">Sensor data</a></li>
+			<a href="#/server-health/sensors-overview" ng-click="closeSubnav()" tabindex="5">Sensor data</a></li>
 		<!--<li ng-class="{'active': (path == '/server-health/power-consumption')}"><a href="#/server-health/power-consumption" tabindex="4" ng-click="closeSubnav()">Power consumption</a></li>-->
 		<li ng-class="{'active': (path == '/server-health/unit-id')}">
 			<a href="#/server-health/unit-id" tabindex="6" ng-click="closeSubnav()">Server indicator</a></li>
 		<!--<li ng-class="{'active': (path == '/server-health/diagnostics')}"><a href="#/server-health/diagnostics" ng-click="closeSubnav()">Diagnostics</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')}" tabindex="3">
+		<li ng-class="{'active': (path == '/server-control' || path == '/server-control/power-operations')}">
 			<a href="#/server-control/power-operations" ng-click="closeSubnav()">Server power operations</a></li>
 		<li ng-class="{'active': (path == '/server-control/bmc-reboot')}">
 			<a href="#/server-control/bmc-reboot" tabindex="8" ng-click="closeSubnav()">Reboot BMC</a></li>
@@ -94,9 +95,6 @@
 			<a href="#/configuration/network" ng-click="closeSubnav()">Network settings</a></li>
 		<li ng-class="{'active': (path == '/configuration' || path == '/configuration/firmware')}">
 			<a href="#/configuration/firmware" ng-click="closeSubnav()">Firmware</a></li>
-		<!--<li ng-class="{'active': (path == '/configuration/date-time')}"><a href="#/configuration/date-time" ng-click="closeSubnav()">Date & Time</a></li>-->
-		<!--<li ng-class="{'active': (path == '/configuration/security')}"><a href="#/configuration/security" ng-click="closeSubnav()">Security</a></li>-->
-		<!--<li ng-class="{'active': (path == '/configuration/file')}"><a href="#/configuration/file" ng-click="closeSubnav()">Configuration File</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')}">