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

[spirosdi]

What does this do?
It resolves the very low contrast issue of buttons. It also changes the bg color of the delete button. The updates include:

• Changing the bg color of the delete button to red.
• Changing the SortBy button to get its bg color from cspace-input instead from cspace-ui colors.css. I did this to prevent mismatched button colors. Self-hosted clients could get green and blue buttons at the same time. This happens if they update cspace-input but not cspace-ui. This is a rare edge case and the plan is to delete cspace-input but this fix keeps things safe until then.

Why are we doing this? (with JIRA link)
https://collectionspace.atlassian.net/browse/DRYD-1925

How should this be tested? Do these changes have associated tests?
The collectionspace/cspace-input.js#26 is a dependency and should first be merged and published. If you want to test it before, you can still do that by running a npm install cspace-input@file:{path-to-local-cspace-input} after pulling and building the cspace-input PR locally. After that you can:

1. Check Save/Delete/Cancel/Clone/Revert/Deprecate buttons visually - blue primary, red delete.
2. Disable a button (e.g. Save when validation errors) - confirm button is grey.
3. Run WAVE or axe DevTools against a record editor page to confirm no contrast failures.

Dependencies for merging? Releasing to production?
The collectionspace/cspace-input.js#26 should be first merged and published.

Has the application documentation been updated for these changes?
Changelog has been updated

Did someone actually run this code to verify it works?
@spirosdi ran it locally

Have any new accessibility violations been handled?
no new a11y violations

[spirosdi]

The 2b95dbe karma.conf.js change fixes a test flakiness, where the MSW service worker fails to intercept network calls and they reach the karma server causing 404s. The fix is to switch the CI browser to ChromeHeadlessNoSandbox, which is the standard for Chrome in CI environments.

[mikejritter]

Testing locally I can see the contrast ratio in the buttons passing WCAG AA reqs. I do wonder if we might want to use a different blue, like the one from the CollectionSpace logo (#3d5ca9) or the text in the Create New page. Might be worth talking about with Jessi (#305A8D).

[mikejritter]

@spirosdi oh I noticed that the Login link also uses that green as a background. It's not technically a button but it looks similar so we might want to adjust that here as well.