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/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">