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;
diff --git a/app/overview/controllers/system-overview-controller.html b/app/overview/controllers/system-overview-controller.html
index e555641..c3534da 100644
--- a/app/overview/controllers/system-overview-controller.html
+++ b/app/overview/controllers/system-overview-controller.html
@@ -106,7 +106,7 @@
</div>
</div>
<div class="column small-1 large-1">
- <button class="accord-trigger"></button>
+ <span class="button accord-trigger"></span>
</div>
</div>
</div>
diff --git a/app/server-control/controllers/bmc-reboot-controller.html b/app/server-control/controllers/bmc-reboot-controller.html
index b7ffd39..0468a8f 100644
--- a/app/server-control/controllers/bmc-reboot-controller.html
+++ b/app/server-control/controllers/bmc-reboot-controller.html
@@ -14,14 +14,13 @@
<div class="bmc-reboot-option" ng-class="{disabled: dataService.server_unreachable || dataService.loading, transitionAll: confirm}">
<p>When you reboot the BMC, your web browser loses contact with the BMC for several minutes. When the BMC is back online, you must log in again. If the Log In button is not available when the BMC is brought back online, close your web browser. Then, reopen the web browser and enter your BMC IP address.</p>
<confirm title="Reboot the BMC"
- message="Rebooting the BMC causes your browser to lose contact with the BMC for several minutes."
confirm="confirm"
ng-show="confirm"
callback="reboot"></confirm>
</div>
</div>
<div class="row column">
- <button id="bmc__reboot" class="btn-secondary float-right" ng-click="rebootConfirm()" ng-disabled="dataService.server_unreachable">
+ <button id="bmc__reboot" class="btn-secondary float-right" ng-class="{disabled: confirm}" ng-click="rebootConfirm()" ng-disabled="dataService.server_unreachable">
<i>↻</i> Reboot BMC
</button>
</div>
diff --git a/app/server-control/controllers/power-operations-controller.html b/app/server-control/controllers/power-operations-controller.html
index 4824938..bb2655e 100644
--- a/app/server-control/controllers/power-operations-controller.html
+++ b/app/server-control/controllers/power-operations-controller.html
@@ -25,30 +25,28 @@
<div class="row column power-option" ng-hide="dataService.server_state == 'Running' || dataService.server_state == 'Quiesced'" ng-class="{disabled: dataService.server_unreachable || (confirm && !power_confirm) || dataService.loading, transitionAll: confirm && power_confirm}">
<button id="power__power-on" class="btn-secondary inline" ng-click="togglePower()" role="button" ng-disabled="dataService.server_unreachable"><img src="assets/images/icon-power.svg" alt="power on">Power on</button>
<p class="inline">Attempts to power on the server</p>
-
- <!---<confirm title="power off" message="Power off the server" confirm="power_confirm" ng-show="power_confirm" callback="togglePower"></confirm>-->
</div>
<!-- Power reboot/shutdown options : when server is off all of these are hidden. When one option is selected, the others are disabled. -->
<div class="row column power-option" ng-hide="dataService.server_state == 'Off'" ng-class="{disabled: dataService.server_unreachable || (confirm && !warmboot_confirm) || dataService.loading, transitionAll: confirm && warmboot_confirm}">
<button id="power__warm-boot" class="btn-secondary inline" ng-click="warmRebootConfirm()" role="button" ng-disabled="dataService.server_unreachable"><i>↻</i> Warm reboot</button>
<p class="inline">Attempts to perform an orderly shutdown before restarting the server</p>
- <confirm title="Warm Reboot" confirm="warmboot_confirm" ng-show="warmboot_confirm" callback="warmReboot"></confirm>
+ <confirm title="warm reboot" confirm="warmboot_confirm" ng-show="warmboot_confirm" callback="warmReboot"></confirm>
</div>
<div class="row column power-option" ng-hide="dataService.server_state == 'Off'" ng-class="{disabled: dataService.server_unreachable || (confirm && !coldboot_confirm) || dataService.loading, transitionAll: confirm && coldboot_confirm}">
<button id="power__cold-boot" class="btn-secondary inline" ng-click="coldRebootConfirm()" role="button" ng-disabled="dataService.server_unreachable"><i>↻</i> Cold reboot</button>
<p class="inline">Shuts down the server immediately, then restarts it</p>
- <confirm title="Cold Reboot" confirm="coldboot_confirm" ng-show="coldboot_confirm" cancel="coldbootCancel" callback="coldReboot"></confirm>
+ <confirm title="cold reboot" confirm="coldboot_confirm" ng-show="coldboot_confirm" cancel="coldbootCancel" callback="coldReboot"></confirm>
</div>
<div class="row column power-option" ng-hide="dataService.server_state == 'Off'" ng-class="{disabled: dataService.server_unreachable || (confirm && !orderly_confirm) || dataService.loading, transitionAll: confirm && orderly_confirm}">
<button id="power__soft-shutdown" class="btn-secondary inline" ng-click="orderlyShutdownConfirm()" role="button" ng-disabled="dataService.server_unreachable"><img src="assets/images/icon-power.svg" />Orderly shutdown</button>
<p class="inline">Attempts to stop all software on the server before removing power</p>
- <confirm title="Orderly shutdown" confirm="orderly_confirm" ng-show="orderly_confirm" cancel="orderlyShutdownCancel" callback="orderlyShutdown"></confirm>
+ <confirm title="orderly shutdown" confirm="orderly_confirm" ng-show="orderly_confirm" cancel="orderlyShutdownCancel" callback="orderlyShutdown"></confirm>
</div>
<div class="row column power-option" ng-hide="dataService.server_state == 'Off'" ng-class="{disabled: dataService.server_unreachable || (confirm && !immediately_confirm) || dataService.loading, transitionAll: confirm && immediately_confirm}">
<button id="power__hard-shutdown" class="btn-secondary inline" ng-click="immediateShutdownConfirm()" role="button" ng-disabled="dataService.server_unreachable"><img src="assets/images/icon-power.svg" />Immediate shutdown</button>
<p class="inline">Removes power from the server without waiting for software to stop</p>
- <confirm title="Immediate shutdown" confirm="immediately_confirm" ng-show="immediately_confirm" cancel="immediatelyShutdownCancel" callback="immediateShutdown"></confirm>
+ <confirm title="immediate shutdown" confirm="immediately_confirm" ng-show="immediately_confirm" cancel="immediatelyShutdownCancel" callback="immediateShutdown"></confirm>
</div>
</div>
</div>
\ No newline at end of file
diff --git a/app/server-health/controllers/inventory-overview-controller.html b/app/server-health/controllers/inventory-overview-controller.html
index e47c7b1..9af8166 100644
--- a/app/server-health/controllers/inventory-overview-controller.html
+++ b/app/server-health/controllers/inventory-overview-controller.html
@@ -8,7 +8,7 @@
</div>
</div>
- <section class="row column">
+ <section class="row column" aria-label="hardware filtering">
<!-- search -->
<p class="content-label" aria-label="hardware filter">Filter hardware components</p>
<div class="content__search">
@@ -21,7 +21,7 @@
</div>
</section>
<!-- end search -->
- <section id="inventory-categories" class="row column">
+ <section id="inventory-categories" class="row column" aria-label="hardware list">
<div class="row column header-row">
<div class="column large-12 header__actions-bar">
<div class="inline inventory__heading inventory__device-col">Hardware</div>
@@ -33,7 +33,7 @@
<p class="inline inventory__device-col">{{inventory.title}}</p>
<p class="inline inventory__function-col"></p>
<p class="inline inventory__assoc-event"><!--<a href="#/server-health/event-log">View 3 events</a>--></p>
- <button class="accord-trigger float-right" ng-class="{'active': inventory.expanded}"></button>
+ <span class="accord-trigger button float-right" ng-class="{'active': inventory.expanded}"></span>
<div class="row inventory__metadata" ng-class="{'active': inventory.expanded}" ng-click="$event.stopPropagation()">
<div class="column large-9 no-padding">
<div ng-repeat="item in inventory.items" class="inline inventory__metadata-block">
diff --git a/app/server-health/controllers/log-controller.html b/app/server-health/controllers/log-controller.html
index 2e48093..fce664d 100644
--- a/app/server-health/controllers/log-controller.html
+++ b/app/server-health/controllers/log-controller.html
@@ -3,7 +3,7 @@
<div class="row column">
<h1>Event log</h1>
</div>
- <section class="row column">
+ <section class="row column" aria-label="page header">
<div class="page-header">
<h2 class="inline h4">All events from the BMC</h2>
<div class="event-log__timezone inline float-right">
@@ -22,19 +22,19 @@
</div>
</section>
<!-- Filters -->
- <section class="row column">
+ <section class="row column" aria-label="event log search">
<!-- search -->
<log-search-control></log-search-control>
<!-- filters -->
<log-filter></log-filter>
</section> <!-- end filter -->
- <section id="event-log__events" class="row column">
+ <section id="event-log__events" class="row column" aria-label="event log events">
<div id="event__actions-bar" class="row header__actions-bar no-margin">
<div class="column small-1 large-1 event-log__col-check">
<label class="control-check">
<input type="checkbox" name="events__check-all" ng-model="all" ng-checked="(logs|filter:{selected: true}).length == logs.length"/>
- <span class="control__indicator"></span>
+ <span class="control__indicator accessible-text">select all log events</span>
</label>
</div>
<div class="column small-11 end col-logged-events">
diff --git a/app/server-health/styles/sensors.scss b/app/server-health/styles/sensors.scss
index 7ee09cb..6152683 100644
--- a/app/server-health/styles/sensors.scss
+++ b/app/server-health/styles/sensors.scss
@@ -76,7 +76,7 @@
.content-label {
font-size: 1em;
margin-left: .8em;
- color: lighten($darkgrey, 10%);
+ color: $darkgrey;
}
.sensor__reading {
@include fontCourierBold;
diff --git a/app/users/controllers/user-accounts-controller.html b/app/users/controllers/user-accounts-controller.html
index 2ffc8b6..ea3d6e3 100644
--- a/app/users/controllers/user-accounts-controller.html
+++ b/app/users/controllers/user-accounts-controller.html
@@ -2,12 +2,13 @@
<div class="row column">
<h1>Manage user account</h1>
</div>
- <section class="row column">
+ <section class="row column" aria-label="change password form">
<div class="column small-12 page-header">
<h2 class="h4">Change password</h2>
</div>
<form class="user-manage__form" role="form" action="">
<fieldset>
+ <legend aria-label="user manager" class="accessible-text">Change password form</legend>
<div class="row column">
<label for="user-manage__current-password">Current password</label>
<input id="user-manage__current-password" type="password" class="user-manage__current-password inline"/>