search

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.18k stars 324 forks source link

Checkbox conditional reveal is not confined to component #1153

Closed andysellick closed 5 years ago

andysellick commented 5 years ago

Checkboxes have a conditional reveal option that uses the value of the aria-controls attribute on the checkbox to apply a class of govuk-checkboxes__conditional--hidden to the content being shown or hidden, depending on the checked state of the checkbox.

In GOV.UK we're using the aria-controls attribute on finders to refer to a part of the page that shows the number of search results. This is so users of assistive tech have some association between their change (checking the checkbox) and the page updating dynamically. The checkboxes Javascript isn't limited to the scope of the component, so when we use it like this it's appling the conditional class to hide the element, which is not desirable.

Here it is in action:

screen shot 2019-01-21 at 15 06 13

The 'show only brexit results' checkbox has aria-controls pointing to the '5 results' part of the page.

Just after we've checked the checkbox, the results count and associated tags disappears:

screen shot 2019-01-21 at 15 06 23

The fix might be to check to see if the element referred to by aria-controls is within the component before applying the class.

The JS is here: https://github.com/alphagov/govuk-frontend/blob/master/src/components/checkboxes/checkboxes.js#L39

I need a fix for this fairly quickly so I'll write some temporary CSS to override the class being added by the checkbox JS, but will happily delete that once a solution is found.

Thanks!

36degrees commented 5 years ago

@andysellick just to flag that I've moved this to the govuk-frontend repo, in case you're trying to find it again!