Accessibility fixes
- Add tab index order to navigation.
- Minor CSS changes.
Change-Id: I402d3cb8c1ac14bd930a5efcf472c1d249cfe00a
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/common/styles/base/buttons.scss b/app/common/styles/base/buttons.scss
index 6bda87f..2f53391 100644
--- a/app/common/styles/base/buttons.scss
+++ b/app/common/styles/base/buttons.scss
@@ -3,7 +3,7 @@
@include fontFamilyBold;
text-transform: none;
border-radius: 3px;
- padding: .5rem 1rem .5rem;
+ padding: .5rem 2rem .5rem;
height: auto;
border: 0;
overflow: hidden;
@@ -55,7 +55,7 @@
}
.btn-secondary {
color: $secbtn__text;
- background: $white;
+ background: transparent;
border: 2px solid $secbtn__border;
min-height: 40px;
&:hover {
diff --git a/app/common/styles/base/colors.scss b/app/common/styles/base/colors.scss
index 42fea1b..7308cec 100644
--- a/app/common/styles/base/colors.scss
+++ b/app/common/styles/base/colors.scss
@@ -13,15 +13,15 @@
$btn__disabled-txt: #a6a5a6;
$btn__disabled-bg: #d8d8d8;
-//Disabled table elements
-$disabled-row: #dddee0;
-$disabled-row-txt: #999999;
-
// Dark background
$darkbg__grey: #E3ECEC;
$darkbg__accent: #79a6f6;
$darkbg__primary: #19273c;
+//Disabled table elements
+$disabled-row: #dddee0;
+$disabled-row-txt: #999999;
+
// Light Background
$lightbg__grey: #b8c1c1;
$lightbg__accent: #d8e2fc;
@@ -72,7 +72,7 @@
$not-present: $medium-lightbg;
// Links
-$links: #3f71ec;
+$links: #648FFF;
$links__hover: $lightbg__primary;
$links__visited: #8ea7ea;
$links__disabled: rgba(27, 40, 52, 0.70);
diff --git a/app/common/styles/base/core.scss b/app/common/styles/base/core.scss
index 9cf4b09..3dc8fea 100644
--- a/app/common/styles/base/core.scss
+++ b/app/common/styles/base/core.scss
@@ -12,7 +12,9 @@
a {
color: $links;
- text-decoration: none;
+ &:visited {
+ color: $links__visited;
+ }
&:hover {
text-decoration: underline;
}
diff --git a/app/common/styles/base/icons.scss b/app/common/styles/base/icons.scss
index 8d61548..e499095 100644
--- a/app/common/styles/base/icons.scss
+++ b/app/common/styles/base/icons.scss
@@ -4,9 +4,6 @@
height: 20px;
position: relative;
speak: none;
- &:hover {
- cursor: pointer;
- }
&.icon-as-spacer {
text-indent: -9999px;
}
@@ -17,6 +14,9 @@
stroke: $medblue;
background: $white;
overflow: visible;
+ &:hover {
+ cursor: pointer;
+ }
}
.icon__more-dropdown {
@@ -45,24 +45,11 @@
}
.icon__warning{
- margin-right: .7em;
- margin-top: -2px;
- &:before {
- content: '!';
- color: $alert__error;
- position: absolute;
- left: 55%;
- top: 40%;
- font-size: .7em;
- }
- &:after {
- content: '\025b3';
- position: absolute;
- left: 0;
- top: -10%;
- color: $alert__error;
- font-size: 1.5em;
- }
+ width: 30px;
+ height: 30px;
+ background-image: url(/assets/images/icon-warning.svg);
+ background-repeat: no-repeat;
+ vertical-align: middle;
}
.icon__info{
@@ -84,6 +71,9 @@
top: -50%;
transform: rotate(90deg);
}
+ &.hide {
+ text-align: -9999px;
+ }
}
.icon__down-arrow {
margin-right: 1em;
diff --git a/app/common/styles/base/index.scss b/app/common/styles/base/index.scss
index 81d255d..b8a33b9 100644
--- a/app/common/styles/base/index.scss
+++ b/app/common/styles/base/index.scss
@@ -4,7 +4,7 @@
@import 'mixins';
@import 'core';
@import 'typography';
+@import 'utility';
@import 'buttons';
@import 'forms';
@import 'icons';
-@import 'utility';
\ No newline at end of file
diff --git a/app/common/styles/base/utility.scss b/app/common/styles/base/utility.scss
index d381101..33cf61a 100644
--- a/app/common/styles/base/utility.scss
+++ b/app/common/styles/base/utility.scss
@@ -34,7 +34,7 @@
justify-content: center;
flex-direction: column;
background: transparent;
- border: 0;
+ border: 0px;
margin: 0;
&:hover {
color: $lightbg__accent;
diff --git a/app/common/styles/elements/toggle-filter.scss b/app/common/styles/elements/toggle-filter.scss
index d50f125..6e061a4 100644
--- a/app/common/styles/elements/toggle-filter.scss
+++ b/app/common/styles/elements/toggle-filter.scss
@@ -11,7 +11,7 @@
margin-right: 2em;
margin-bottom: 1em;
button {
- margin: 3px -3px;
+ margin: 3px -4px;
padding: .6em 2em;
min-height: 2.1em;
font-size: .9em;
@@ -21,9 +21,6 @@
&.last {
border-radius: 3px;
}
- &.last {
- border-left: 0;
- }
}
.btn-primary {
border: 2px solid $primebtn__bg;
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index 53e3d27..13dbe44 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -8,7 +8,6 @@
border-bottom: 1px solid $lightbg__grey;
margin: 1.625em 0 1.2em 0;
padding-left: 0;
- padding-right: 0;
.h4 {
padding: 0;
margin: 0 0 .5em 0;
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
index aaec5b4..fe06d0b 100644
--- a/app/common/styles/layout/header.scss
+++ b/app/common/styles/layout/header.scss
@@ -7,7 +7,7 @@
top: 0;
left: 0;
right: 0;
- z-index: 200;
+ z-index: 300;
}
.app__version {