search

mysociety / fixmystreet

This is mySociety's popular map-based reporting platform: easy to install in new countries and regions
http://fixmystreet.org/
Other
506 stars 235 forks source link

Improved area-label for filters in around page #4933

Closed lucascumsille closed 4 months ago

lucascumsille commented 4 months ago

Fixes: https://github.com/mysociety/societyworks/issues/4214

As part of the TFL audit. This commit fixes the issue where the label and aria-label weren't matching causing issues for speech-input users. To comply with 2.5.3 the aria-label for the status and categories have been updated, so now part of the visible text is contained in the aria-label.

Also the labels have been modify to give the user more context about each option without the need for them to open each filter to understand what is about. For example, by itself the label "Show" doesn't explain what is actually showing, specially if the "All" option is selected. For a new user or an unfrequent visitor, they'll need to open up the dropdown to understand what is actually being filtered. Let me know if you think there is a better approach.

The implementation of this PR follows the criteria:

Users typically have a much better experience if the words and characters in the visible label of a control match or are contained within the accessible name

And using the example 3 of technique G208

[Skip changelog]

codecov[bot] commented 4 months ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 82.60%. Comparing base (db121d1) to head (63b229e).

Additional details and impacted files ```diff @@ Coverage Diff @@ ## master #4933 +/- ## ======================================= Coverage 82.60% 82.60% ======================================= Files 390 390 Lines 30473 30473 Branches 4812 4812 ======================================= Hits 25172 25172 Misses 3864 3864 Partials 1437 1437 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

dracos commented 4 months ago

The current live site is displaying the filters as an English sentence: "Show all reports about Everything" or "Show open reports about Abandoned vehicles". Which I agree might possibly be confusing to some people, though I'm not sure we've ever actually had any complaints about it.

With it not being a sentence and only being labels, so looking like this if I've understood this right: image It's okay, but now just seems a bit odd having category over there. I think this would be fixed better by https://github.com/mysociety/fixmystreet/pull/4728 which is a better solution I think, so we should try and move that forward instead, as that also changes these labels?

lucascumsille commented 4 months ago

@dracos sound good I know #4728 would be changing this PR in the long run, this PR was a fix in the meantime. Let's move forward with #4728, instead then. I'll check if the labels and aria-labels follow the 2.5.3 criteria.

@lizettal just in case I'll close this PR and move forward with PR #4728