DRYD-1925: Accessibility > Contrast/Design of Buttons (Criteria 1.4.3)

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Accessibility
 
 - Resolved orphaned form labels issue (Criteria 3.3.2).
+- Resolved very low contrast buttons issue (Criteria 1.4.3).
 
 ## v10.2.0
 

karma.conf.js

@@ -13,7 +13,7 @@ const getTestFiles = (config) => {
 
 module.exports = function karma(config) {
   const localBrowsers = ['Chrome'];
-  const githubBrowsers = ['Chrome'];
+  const githubBrowsers = ['ChromeHeadlessNoSandbox'];
 
   let browsers;
 
@@ -35,6 +35,12 @@ module.exports = function karma(config) {
 
   config.set({
     browsers,
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox', '--disable-setuid-sandbox'],
+      },
+    },
     concurrency: 1,
 
     files: [

styles/colors.css

@@ -5,6 +5,5 @@
 
 @value inputBg: rgb(255, 255, 255);
 
-@value buttonBg: #73AA4F;
 @value buttonOutlinedBg: rgb(255, 255, 255);
 @value buttonOutlinedBgActive: rgb(220, 220, 220);

styles/cspace-ui/DeleteButton.css

@@ -1,3 +1,15 @@
+@value deleteButtonBg, deleteButtonBgActive from 'cspace-input/styles/colors.css';
+@value activeEdgeWidth from '../dimensions.css';
+
 .common {
   background-image: url(../../images/delete.svg);
+  background-color: deleteButtonBg;
+}
+
+.common:hover:not(:disabled) {
+  background-color: deleteButtonBgActive;
+}
+
+.common:focus {
+  box-shadow: 0 0 0 activeEdgeWidth deleteButtonBgActive;
 }

styles/cspace-ui/SortBy.css

@@ -1,4 +1,4 @@
-@value buttonBg from '../colors.css';
+@value buttonBg from 'cspace-input/styles/colors.css';
 @value inputHeight from '../dimensions.css';
 
 .flex {