Accessibility fixes
- Add tab index order to navigation.
- Minor CSS changes.
Change-Id: I402d3cb8c1ac14bd930a5efcf472c1d249cfe00a
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
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')}">
diff --git a/app/common/directives/log-event.html b/app/common/directives/log-event.html
index bf2cc1f..70d7dee 100644
--- a/app/common/directives/log-event.html
+++ b/app/common/directives/log-event.html
@@ -15,7 +15,7 @@
<label class="control-check">
<input type="checkbox" name="events__check" ng-click="event.selected= ! event.selected"
ng-checked="event.selected"/>
- <span class="control__indicator"></span>
+ <div class="control__indicator"></div>
</label>
</div>
<div class="column small-9 large-9 event-log__event-info"