Improve accessibility of truncated checkboxes in facets
Closed this issue · 0 comments
HaSistrunk commented
Is your feature request related to a problem? Please describe.
In the facets modal, the checkboxes that are revealed using the show all/show less button are hidden using css, so they are not hidden from screenreaders or keyboard focus. There are two problems with this:
- The show all/ show less button doesn't have any function for users using SRs since they can access all the content without it.
- Sighted users using the keyboard or other AT to navigate won't be able to see what element has focus when they are accessing the visually hidden inputs in the tab order.
Describe the solution you'd like
Not sure the best approach for how to make this happen, but the facet items should be programmatically hidden until the "show all" button is pressed. overflow:hidden
only hides things visually.
Describe alternatives you've considered
The disclosure
element could be used, but it doesn't exactly fit our current design.
Additional context
See #262 for issue related to button text that changes when the button is pressed.