Improve filterable list controls a11y

[contolini]

Add a group role to the filterable list controls checkboxes parents so that screenreaders announce the group name when navigating to the checkbox children.

Normally our use of <legend> and <label> would do this automatically but we nest the checkboxes inside an unordered list so we need to manually tell the browser that the items are grouped.

See https://github.local/CFGOV/platform/issues/3356 for background.

Additions

• role attribute to the category and status unordered lists.

How to test this PR

1. Start voiceover.
2. Go to http://0.0.0.0:8000/about-us/blog/
3. Use the tab key to navigate to the Category checkboxes in the filter controls.
4. It should announce "Category group" after announcing the first checkbox item.
5. Go to https://www.consumerfinance.gov/about-us/blog/ and notice that it doesn't announce the group name.

Checklist

• PR has an informative and human-readable title
  • PR titles are used to generate the change log in releases; good ones make that easier to scan.
  • Consider prefixing, e.g., "Mega Menu: fix layout bug", or "Docs: Update Docker installation instructions".
• Changes are limited to a single goal (no scope creep)
• Code follows the standards laid out in the CFPB development guidelines
• Future todos are captured in comments and/or tickets
• Project documentation has been updated, potentially one or more of:
  • This repo’s docs (edit the files in the /docs folder) – for basic, close-to-the-code docs on working with this repo
  • CFGOV/platform wiki on GHE – for internal CFPB developer guidance
  • CFPB/hubcap wiki on GHE – for internal CFPB design and content guidance

Front-end testing

Browser testing

Visually tested in the following supported browsers:

• Firefox
• Chrome
• Safari
• Edge 18 (the last Edge prior to it switching to Chromium)
• Internet Explorer 11 and 8 (via emulation in 11's dev tools)
• Safari on iOS
• Chrome on Android

Accessibility

• Keyboard friendly (navigable with tab, space, enter, arrow keys, etc.)
• Screen reader friendly
• Does not introduce new errors or warnings in WAVE

Other

• Is useable without CSS
• Is useable without JS
• Does not introduce new lint warnings
• Flexible from small to large screens

[contolini]

@wpears I know you're currently trapped in the Sierras waiting for a helicopter evacuation but if you could please review this PR before your cell dies I'd appreciate it thx.

[wpears]

🔥