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;