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.
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
templates/partials/movies/filter_form.html.aria-pressedor equivalent state updates for selectable chip/pill buttons instatic/js/library_page.js.Files or Areas
templates/partials/movies/filter_form.htmlstatic/js/library_page.jsstatic/css/movies.csstests/js/library_page.test.jstests/test_movies_ui.pyAcceptance Criteria
Verification
npm run test:jspytest tests/test_movies_ui.py -k "library_search_is_prominent"/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.