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