CodeForPhilly / CodeForPhilly/clean-and-green-philly

Filter: Neighborhoods/Community Org/Zone Pills: Unable to clear the pills using screen readers

Open
#653 2 comments 0 reactions 0 assignees View on GitHub
A11y blocked
Dominant language
Python
Stars
50
Forks
92
PR merge metrics
No merged PRs in 30d

Description

## Description
Tracy Note: This ticket is related to https://github.com/CodeForPhilly/clean-and-green-philly/issues/631 & probably would be fixed with that refactor to pull out the selected pills from the dropdown.

Clearing the pills is impossible using NVDA & Voice Over. JAWS is more forgiving.

- NVDA + FF/Edge: Using tab key to navigate to the X button, selecting it activates the listbox pop up instead

Demo; see **from point 2:18** of the video onwards.

https://github.com/CodeForPhilly/clean-and-green-philly/assets/102739972/ade5b3b2-ca41-4165-ac9f-6bbbb8ca462c

- VO + Safari: Screen reader focus could not navigate to the pills at all; no feedback given when tabbing to it.

## Recommendation
- Would be better to not put the pill on top of the listbox popup so that there's a clear separation between the 2. It will also make the UI less confusing even for sighted users.

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the filter-pill behavior with NVDA on Firefox/Edge and VoiceOver on Safari, using issue 631 for the related refactor context. Done means screen-reader users can reach, understand, and clear the Neighborhoods, Community Org, and Zone pills without activating the listbox unexpectedly.

Written by the indexing model from the issue text.

Assessment

Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.