Accordion outline to bg contrast issues

klepas commented 7 years ago

What I did

Pop over to either:

(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/

klepas commented 7 years ago

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?

maxious commented 7 years ago

yeah, will share in channel

TrebBrennan commented 7 years ago

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

klepas commented 7 years ago

@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?

TrebBrennan commented 7 years ago

@klepas It's the type of thing that won't come up in automated testing. It's tracked in DESIGN-261

AusDTO / gov-au-ui-kit