Skip to content

Add accessible labels and pressed state to Library filter controls #213

Description

@cmsjade5000

Goal

Make the Library filter dialog easier to use with assistive technology by giving chip and pill controls explicit names, groups, and state.

During a local UI audit, the filter dialog exposed many generic buttons such as Action, Drama, Any year, Custom, and custom number inputs without enough context. The visible UI works, but screen-reader users should hear what group a control belongs to and whether a filter is selected.

Suggested Scope

  • Add accessible grouping/labels around the genre, decade, and runtime filter sections in templates/partials/movies/filter_form.html.
  • Add aria-pressed or equivalent state updates for selectable chip/pill buttons in static/js/library_page.js.
  • Ensure custom year/runtime fields have stable labels and useful context when revealed.
  • Keep the visual design unchanged unless a small CSS tweak is needed for focus states.

Files or Areas

  • templates/partials/movies/filter_form.html
  • static/js/library_page.js
  • static/css/movies.css
  • tests/js/library_page.test.js
  • tests/test_movies_ui.py

Acceptance Criteria

  • Genre, decade, and runtime option buttons expose their selected/unselected state to assistive tech.
  • Custom year/runtime number inputs have clear accessible names tied to their filter group.
  • Existing filter behavior is unchanged for mouse, touch, and keyboard users.
  • Focus styles remain visible in the dialog.
  • Add focused JS and/or template tests for the new ARIA/state behavior.

Verification

  • npm run test:js
  • pytest tests/test_movies_ui.py -k "library_search_is_prominent"
  • Optional manual check: open /ui/movies, open Filters, toggle a genre/year/runtime option, and inspect that the pressed state changes.

Contributor Notes

This is a good first issue because it is scoped to one dialog and its small support script. First-time contributors do not need collaborator access or assignment; fork the repo and open a pull request that links this issue. Please use synthetic data only and avoid unrelated UI redesign.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions