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>
diff --git a/app/common/directives/app-header.html b/app/common/directives/app-header.html
index a21d06a..03d7049 100644
--- a/app/common/directives/app-header.html
+++ b/app/common/directives/app-header.html
@@ -1,10 +1,10 @@
-<div id="header__wrapper">
+<div id="header__wrapper" role="banner">
<!-- HEADER -->
<header id="header">
<span class="app__version float-left">OpenBMC for IBM Power Systems {{dataService.app_version}}</span>
<a href="" class="header__logout" ng-click="logout()">Log out</a>
</header>
-<div class="header__functions-wrapper" role="heading">
+<div class="header__functions-wrapper" aria-label="header">
<div class="logo__wrapper"><img src="assets/images/logo.svg" class="header__logo" alt="company logo"/></div>
<div class="header__server-name">
<p class="header__hostname">[[hostname needed]]</p>
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')}">
diff --git a/app/common/directives/confirm.html b/app/common/directives/confirm.html
index a38cf60..aade7dd 100644
--- a/app/common/directives/confirm.html
+++ b/app/common/directives/confirm.html
@@ -5,6 +5,6 @@
</div>
<div class="inline__confirm-buttons">
<button class="btn-primary" ng-click="accept()">Yes</button>
- <button class="btn-primary" ng-click="cancel()">No</button>
+ <button class="btn-primary default" ng-click="cancel()">No</button>
</div>
</div>
\ No newline at end of file
diff --git a/app/common/directives/log-event.html b/app/common/directives/log-event.html
index addb098..08efcf1 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>
+ <span class="control__indicator accessible-text">select log event</span>
</label>
</div>
<div class="column small-9 large-10 event-log__event-info"
@@ -29,8 +29,8 @@
<p class="inline event__description">{{event.Severity}}</p>
</div>
<div class="column small-1 large-1">
- <button class="accord-trigger" ng-class="{'active': event.meta}"
- ng-click="event.meta = ! event.meta"></button>
+ <span class="button accord-trigger" ng-class="{'active': event.meta}"
+ ng-click="event.meta = ! event.meta"></span>
</div>
</div>
<div class="row event__metadata-row" ng-class="{'active': event.meta}">
diff --git a/app/common/directives/log-filter.html b/app/common/directives/log-filter.html
index 38ca2e0..eac263f 100644
--- a/app/common/directives/log-filter.html
+++ b/app/common/directives/log-filter.html
@@ -1,4 +1,4 @@
-<section id="event-filter" class="row column">
+<section id="event-filter" class="row column" aria-label="event log filtering">
<div class="inline event__severity-filter">
<p class="filter-label">Filter by severity</p>
<button class="inline first" ng-click="toggleSeverityAll()"
diff --git a/app/common/styles/base/colors.scss b/app/common/styles/base/colors.scss
index abf5424..c45fd2e 100644
--- a/app/common/styles/base/colors.scss
+++ b/app/common/styles/base/colors.scss
@@ -45,7 +45,7 @@
// Status colors
$error-color: #e62425;
$status-ok: #34bc6e;
-$status-ok-light: #bcefce;
+$status-ok-light: #cceedf;
$status-warn: #ffb000;
// Alerts
@@ -77,7 +77,7 @@
// Threshold graphs
$thresh-critical: $error-color;
$thresh-warning: #ffb001;
-$thresh-normal: $lightgrey;
+$thresh-normal: #cceedf;
//Inventory
$active: #c6b6f5;
diff --git a/app/common/styles/components/form-elements.scss b/app/common/styles/components/form-elements.scss
index 767d76f..5c87a35 100644
--- a/app/common/styles/components/form-elements.scss
+++ b/app/common/styles/components/form-elements.scss
@@ -112,6 +112,7 @@
height: 20px;
background: $white;
border: 1px solid $lightbg__grey;
+ font-size: 0;
}
/* Hover and focus states */
diff --git a/app/common/styles/directives/app-navigation.scss b/app/common/styles/directives/app-navigation.scss
index 997ab7c..f91457c 100644
--- a/app/common/styles/directives/app-navigation.scss
+++ b/app/common/styles/directives/app-navigation.scss
@@ -51,7 +51,7 @@
.nav-icon {
@include navIcons;
}
- .button, button, a {
+ .button, a, .nav__btn {
background: transparent;
height: auto;
border: 0;
@@ -84,6 +84,7 @@
padding: 1em;
border-radius: 0;
border-bottom: 1px solid $lightgrey;
+ cursor: pointer;
.nav__icon-help__outer {
stroke: $black;
}
diff --git a/app/common/styles/elements/inline-confirm.scss b/app/common/styles/elements/inline-confirm.scss
index b01c576..c65e5de 100644
--- a/app/common/styles/elements/inline-confirm.scss
+++ b/app/common/styles/elements/inline-confirm.scss
@@ -28,10 +28,14 @@
margin: 0 10px;
border-radius: 4px;
&:focus,
- &:hover {
+ &.default {
background: $primebtn__bg;
border: 2px solid $primebtn__bg;
}
+ &:hover {
+ background: darken($primebtn__bg, 10%);
+ border: 2px solid $primebtn__bg;
+ }
}
@media (min-width: 900px) {
position: absolute;