Merge pull request #423 from epimorphics/issue/412-a11y

Issue/412 a11y
epimorphics · Aug 15, 2024 · 1ac53a2 · 1ac53a2
2 parents 47c3946 + 6525d5a
commit 1ac53a2
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 23 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## 1.7.5 - 2024-08
 
+- (Bogdan) Increased contrast for compare location dropdowns [GH-412](https://github.com/epimorphics/ukhpi/issues/412)
+- (Bogdan) Increased contrast for search location results, as well as when they
+  are being focused [GH-412](https://github.com/epimorphics/ukhpi/issues/412)
+- (Bogdan) CSS Refactoring
 - (Bogdan) Fixed a bug where CSS was applied to the wrong element, causing search
   location results to be displayed incorrectly
 - (Bogdan) Increased focusable area for close button on modal and hide graph button

diff --git a/app/assets/stylesheets/_element-rails.scss b/app/assets/stylesheets/_element-rails.scss
@@ -51,7 +51,12 @@ table.el-month-table {
   }
 }
 
-.el-select-dropdown__item.selected {
-  background-color: $dark-blue;
-  color: white;
-}
+.el-select-dropdown__item {
+  &.selected {
+    background-color: $dark-blue;
+    color: white;
+  }
+  &.hover {
+    background-color: #e6e6e6;
+  }
+}
diff --git a/app/assets/stylesheets/_ukhpi-location-select.scss b/app/assets/stylesheets/_ukhpi-location-select.scss
@@ -1,14 +1,22 @@
 .o-select-location {
   text-align: left;
 
-  .el-dialog__body {
-    padding: 5px 20px;
-    color: #000000;
-  }
+  .el-dialog {
+    &__body {
+      padding: 5px 20px;
+      color: #000000;
+    }
+
+    &__close {
+      color: #000000;
+      padding: 4px;
+    }
 
-  .el-dialog__close {
-    color: #000000;
-    padding: 4px;
+    &__footer {
+      .el-button--default {
+        color: #000000;
+      }
+    }
   }
 
   .el-input__inner {
@@ -19,9 +27,17 @@
     color: #a4742b;
   }
 
-  .el-dialog__footer {
-    .el-button {
-      color: #000000;
+  .o-search-location__result {
+    &:focus, &:hover {
+      background-color: #e6e6e6;
+    }
+
+    .el-button--text {
+      color: #0050a2;
+
+      &:focus, &:hover {
+        color: #007dff;
+      }
     }
   }
 }
diff --git a/app/assets/stylesheets/_ukhpi-maps.scss b/app/assets/stylesheets/_ukhpi-maps.scss
@@ -18,15 +18,17 @@
     display: flex;
     flex-direction: column;
 
-    .el-radio-button__inner {
-      width: 100%;
-      border: 0;
-      border-radius: 0;
-      color: #000000;
-    }
-
-    .el-radio-button__orig-radio:checked+.el-radio-button__inner {
-      background-color: #2c659f;
+    .el-radio-button {
+      &__inner {
+        width: 100%;
+        border: 0;
+        border-radius: 0;
+        color: #000000;
+      }
+
+      &.is-active {
+        background-color: #409eff;
+      }
     }
   }