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/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/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/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/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 8022709..b118f10 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"/>