Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: accessibility for filter labels #4046

Merged
merged 6 commits into from
Jan 29, 2024

Conversation

elasticspoon
Copy link
Collaborator

Filters on various pages were not labeled correctly. Though they had labels
had the wrong for= attributes making them not functional for screen readers.

This is an accessibility concern. This PR fixes the helper function to have the
correct id.

Note: my linter did some stuff but I only touched app/helpers/filter_helper.rb
and a label tag in the donations index.

Before per lighthouse:
image

label for= and select id= do not match, thus labels do not provide a11y correct function.
image

After:
image

Type of change

  • Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

It passed all tests but I did not write any specifically for it.

app/helpers/filter_helper.rb Outdated Show resolved Hide resolved
app/views/donations/index.html.erb Outdated Show resolved Hide resolved
Before labels were using the wrong id parameter and
were not correctly labeling select elements.
In the off chance that there are two filters with the same
scope on a page they would both have the same id.

This adds a unique uuid value to the filters.
Previously systems tests would select filters by the id
attribute, since ids are now followed by a uuid this is
not possible.

All the selections are now made using the name attribute.
Copy link
Collaborator

@dorner dorner left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Had one question.

<%= label_tag "by Source" %>
<%= select_tag "filters[by_source]", options_for_select(@sources, @selected_source), {include_blank: true, class: "form-control"} %>
<% id = "filter_#{SecureRandom.uuid}" %>
<%= label_tag id, "Filter by Source" %>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this changes the visible text? Was that on purpose?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yea. I thought it would make sense to make the labels consistent.
image
instead of
image

I guess by that logic I should also change date range, but it wasn't using any of the same helpers so I didn't touch anything around there.

@dorner
Copy link
Collaborator

dorner commented Jan 29, 2024

Looks good, thanks!

@dorner dorner merged commit dc8561d into rubyforgood:main Jan 29, 2024
11 checks passed
@elasticspoon elasticspoon deleted the fix-filter-labels branch January 29, 2024 15:36
@cielf
Copy link
Collaborator

cielf commented Feb 3, 2024

@awwaiid Please note this for the dashboard? Thanks. (Edit. Never mind -- it doesn't apply after all.)

Copy link
Contributor

github-actions bot commented Feb 4, 2024

@elasticspoon: Your PR fix: accessibility for filter labels is part of today's Human Essentials production release: 2024.02.04.
Thank you very much for your contribution!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants