Improve search filter & modal accessibility

[kommunarr]

Improve search filter accessibility

Pull Request Type

• Bugfix

Related issue

resolves accessibility issue outlined here, and a handful of other accessibility issues with the filter icon

Description

• Revamps ft-search-filters implementation such that:
  • Mobile view is actually usable
  • Focus is removed when the modal is clicked out of
  • A close button is present to exit the modal
• ft-prompt accessibility improvements:
  • Implements proper focus management for all ft-prompts using portal-vue and inert (reference)
  • Implements ARIA role and properties on ft-prompt
  • Makes label property required on ft-prompt, and adds it to the prompts with missing properties
• Adds title attribute to search filter icon, ensuring screenreaders will be aware of what it is
• Updates radio button styling to show the --accent-active-color color on hover and focus, resolving issue where currently focused radio button is impossible to visually determine

Screenshots

Device	Before	After
Desktop
Tablet
Mobile

Testing

• Confirm that the title "Search Filters" appears on hover of the filter icon.
• Test desktop, tablet, and mobile views of Search Filters.
• Test clicking on "Close" or outside of the modal closes the Search Filters modal.
• (REG) Test search filters are remembered when changed and reopened.
• (REG) Test search filter functionality.
• (REG) Test desktop, tablet, and mobile views of Create Playlist and Add Video to Playlist prompts.
• Test that focus is now maintained in the modal for any ft-prompt.
• Verify that the currently focused or hovered radio button changes color to the --accent-active-color.

Desktop

• OS: OpenSUSE Tumbleweed

Additional info

I can change it such that the hover is the plainer color. I don't have a preference.

[efb4f5ff-1298-471a-8973-3d47447115dc]

Boosting this now that playlists PR is merged

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

Conflicts have been resolved. A maintainer will review the pull request shortly.

[github-actions]

Conflicts have been resolved. A maintainer will review the pull request shortly.

[PikachuEXE]

z-index issue in delete playlist prompt

Add video to playlist prompt > create playlist = error + add to playlist prompt invisible during create playlist (which is fine in function but feels strange)

[kommunarr]

Yeah, you're right about the idea to make a file with these z-indexes, I'm losing my mind

[PikachuEXE]

I'm losing my mind

[efb4f5ff-1298-471a-8973-3d47447115dc]

LGTM!

[kommunarr]

@absidue @MarmadileManteater @ChunkyProgrammer

My suggested ordering for reviewing my open PRs:
this -> #4374 / #4970 -> #4949 -> #5013 / #5029

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

Conflicts have been resolved. A maintainer will review the pull request shortly.