RockefellerArchiveCenter/dimes

Improve accessibility of truncated checkboxes in facets

Closed this issue · 0 comments

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.