gov-au-ui-kit
gov-au-ui-kit copied to clipboard
AusDTO
Accordion outline to bg contrast issues
What I did
Pop over to either:
- https://849-59086769-gh.circle-artifacts.com/0//home/ubuntu/gov-au-ui-kit/build/section-accordions.html
- https://849-59086769-gh.circle-artifacts.com/0//home/ubuntu/gov-au-ui-kit/build/examples/index.html
(Builds are from Wed arvo, the 26th, from the develop branch — accordions haven’t been touched since last release, v1.3.0.)
A user testing for the Transitions team was directed to use/locate/expand (?) one of the accordions and couldn’t locate it other than by it’s heading/label, which did not make it fully apparent that it was an accordion.
Problem: the light blue (computed out to #def4f9) outline is not WCAG2 compliant to the white background.
What browser and device I was using
n/a
What I expected to see
An outline that has a better contrast ratio to the white bg.
Idea: use the current :hover (#5bcbe3) and go ‘inverse’ style on expanding, darkening the bg on :hover/:focus, and making the label text go white?
What I saw
See above links.
Additional information (optional)
Testing resource: http://webaim.org/resources/contrastchecker/
Reported initially by @maxious — hey, can you key in anyone who needs to know that this report is up, and here, and will be notified when it closes?
FYI on top of a colour change the Transitions team are trialing an underline on the Accordion/Button in order to give it more affordance as something which is clickable. (Like a traditional link)
They're planning to report back to us with whatever they validate during their usability testing.
CC: @phil-banks
@TrebBrennan do you remember if this precise issue got fixed? I presume given that it hasn’t appeared on prod builds, or in pa11y tests that we’re good?
@klepas It's the type of thing that won't come up in automated testing. It's tracked in DESIGN-261