feat(web,a11y): form and search filter accessibility

[ben-basten]

Description

Move checkboxes / radio buttons into components

Created components to reduce duplicated code, build in accessibility by default, and provide a consistent user experience anywhere that checkboxes are used.

All usages of <input type="checkbox" /> were updated to use this new component.

Add labels to the context/file name search filters

The radio button labeling wasn't working with the screen reader. There are options to make this work using aria-labelledby, but I preferred adding labels to both the radio button and input fields for clarity. I'm open to thoughts or opinions on this!

Other accessibility changes

• visible focus outlines around checkboxes and radio buttons when navigating the filters with a keyboard
• Responsive radio button / checkbox layouts for narrow screens in the search filters
• "Clear all" and "Search" buttons in sentence case
• add fieldsets to radio buttons and checkboxes, so the screen reader announces the label for the group
• use the same "name" for groups of radio buttons, which associates them together and allows arrow key selection
• add tabindex="-1" to the search filter container, to prevent Firefox from thinking that it is focusable

Screenshots

Expand for screenshots

Desktop: labels for context/file name search

Mobile: labels for context/file name search

Focused checkbox

How Has This Been Tested?

Navigate through the search filters and affected checkbox modals to verify they work as expected.

Checkboxes changed:

• Delete asset modal
• Delete user modal
• Settings checkboxes under "Video Transcoding Settings"

Checklist:

• npm run lint
• npm run format
• npm run check:svelte - seeing errors in AlbumUserAddDto and albumUsers that are unrelated to my change
• npm test