Accessibility fixes:

	- changed buttons to spans since not being used in forms
	- added aria roles to html elements
	- changed low contrast colors

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

1 files changed, 9 insertions, 9 deletions

diff --git a/app/common/directives/app-navigation.html b/app/common/directives/app-navigation.html
index 036f674..d5c87c4 100644
--- a/app/common/directives/app-navigation.html
+++ b/app/common/directives/app-navigation.html
@@ -1,7 +1,7 @@
 <nav class="nav__wrapper">
 	<ul id="nav__top-level" ng-style="navStyle">
 		<li>
-			<a class="btn-overview" ng-class="{opened: firstLevel == 'overview'}" href="#/overview/system" ng-click="change('overview')" tabindex="1">
+			<a class="btn-overview nav__btn" 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" 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"/>
@@ -10,7 +10,7 @@
 					Server overview</span></a>
 		</li>
 		<li>
-			<button class="btn-health" ng-class="{opened: firstLevel == 'server-health'}" ng-click="change('server-health')" tabindex="2">
+			<span class="btn-health nav__btn" 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" 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 "/>
@@ -26,10 +26,10 @@
 					</svg>
 					Server health
 				</span>
-			</button>
+			</span>
 		</li>
 		<li>
-			<button class="btn-control" ng-class="{opened: firstLevel == 'server-control'}" ng-click="change('server-control')" tabindex="3">
+			<span class="btn-control nav__btn" 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" 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"/>
@@ -41,10 +41,10 @@
 					</svg>
 					Server control
 				</span>
-			</button>
+			</span>
 		</li>
 		<li>
-			<button class="btn-config" ng-class="{opened: firstLevel == 'configuration'}" ng-click="change('configuration')" tabindex="4">
+			<span class="btn-config nav__btn" 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" 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
@@ -56,13 +56,13 @@
 						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>
+				Server Configuration</span></span>
 		</li>
 		<li>
-			<button class="btn-users" ng-class="{opened: firstLevel == 'users'}" ng-click="change('users')" tabindex="5">
+			<span class="btn-users nav__btn" 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>
+			</span>
 		</li>
 	</ul>
 	<ul class="nav__second-level btn-health" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'server-health')}">