diff --git a/CHANGELOG.md b/CHANGELOG.md index d8cfe838..48bbfb87 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/karma.conf.js b/karma.conf.js index 46455c6a..b495f09d 100644 --- a/karma.conf.js +++ b/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: [ diff --git a/styles/colors.css b/styles/colors.css index eada988d..bbc97cc1 100644 --- a/styles/colors.css +++ b/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); diff --git a/styles/cspace-ui/DeleteButton.css b/styles/cspace-ui/DeleteButton.css index 8fc6b315..eaa88d50 100644 --- a/styles/cspace-ui/DeleteButton.css +++ b/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; } diff --git a/styles/cspace-ui/SortBy.css b/styles/cspace-ui/SortBy.css index b354f310..54c17ab0 100644 --- a/styles/cspace-ui/SortBy.css +++ b/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 {