User tests: Successful: Unsuccessful:
Pull Request resolves #48407.
Unchecked checkbox borders were too faint against their surroundings (about 1.7:1), below the 3:1 non-text contrast required by WCAG 1.4.11. Joomla's "High Contrast" user setting did not change them either.
This PR gives checkboxes a border colour of at least 3:1, with separate values for light and dark:
--form-check-input-border now uses --template-bg-dark-60 (about 6.3:1 on white). It stays above 3:1 even for a yellow admin hue.rgba(255, 255, 255, .5) (about 5.2:1 on the dark card), up from .2.body.a11y_contrast now sets a 2px border in the body text colour, so the setting improves the checkbox.$form-check-input-border is now $gray-600 (about 4.7:1 on white), up from the default $gray-400. This fixes the frontend Remember Me checkbox.The checked state, keyboard focus ring and disabled state are not changed. Disabled controls are exempt from 1.4.11.
Note: this changes every checkbox that uses these variables, for example the row and check-all boxes in list views such as Articles and Users. That overlaps with #48405.
npm run build), then hard-refresh the browser.Do not upload an update package or log in.
Please select:
Documentation link for guide.joomla.org:
No documentation changes for guide.joomla.org needed
Pull Request link for manual.joomla.org:
No documentation changes for manual.joomla.org needed
| Status | New | ⇒ | Pending |
| Category | ⇒ | NPM Change |
I have tested this item ✅ successfully on c2d53c9
I have successfully tested this! @Nikhil-sinhaa Thank you for the fixes.
| Labels |
Added:
a11y
NPM Resource Changed
PR-6.2-dev
|
||
The lint:js job failed with sh: 1: eslint: not found (exit code 127), which looks like a CI cache/environment issue rather than a code problem. lint:js and lint:css both pass locally. The edge/MySQL system test failure also looks unrelated, since this PR only changes SCSS. Could a maintainer please re-run the failed jobs?
I have tested this item ✅ successfully on 5076f0b
Very nice, @Nikhil-sinhaa; thank you for your contribution! This is significantly better.
I have tested this item ✅ successfully on 5076f0b
Very nice, @Nikhil-sinhaa; thank you for your contribution! This is significantly better.
@mbeganyi-a11y @exlemor Thank you for Testing
I have tested this item ✅ successfully on c2d53c9
I have successfully tested this! @Nikhil-sinhaa Thank you for the fixes.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48711.