Skip to content

Fix WCAG search filters navigation#14014

Merged
alecslupu merged 6 commits intodecidim:developfrom
OpenSourcePolitics:fix(wcag)/search-filters-navigation
Mar 18, 2025
Merged

Fix WCAG search filters navigation#14014
alecslupu merged 6 commits intodecidim:developfrom
OpenSourcePolitics:fix(wcag)/search-filters-navigation

Conversation

@BarbaraOliveira13
Copy link
Copy Markdown
Contributor

@BarbaraOliveira13 BarbaraOliveira13 commented Feb 3, 2025 •
edited
Loading

🎩 What?

Updated the search filters container to improve accessibility compliance. Changes include:

  1. Add a <nav> element with role="navigation" to define the navigation region.
  2. Add an aria-labelledby attribute referencing a hidden <h1> to programmatically name the navigation area for screen readers.

🎩 Why?

These changes address accessibility concerns highlighted during the city of Lyon rgaa audit, and align with WCAG 2.1 standards:

🎩 Related to

🔗 WCAG References:

  1. 1.3.1 - Info and Relationships: Ensures information and relationships are perceivable for assistive technologies.
  2. 4.1.2 - Name, Role, Value: Provides programmatically determinable names and roles for interactive elements.

🎩 Steps to reproduce:

  1. Open the search filters panel on any listing page (proposals, meetings).
  2. Enable VoiceOver (or any screen reader).
  3. Use Cmd + Option + U to open the Rotor and browse Landmarks.
  4. You should now see that the "Search Filters" navigation landmark is detected and VoiceOver announces:
    ➝ "Search Filters, Navigation"
Capture d’écran 2025-03-17 à 14 37 53 Capture d’écran 2025-03-17 à 14 40 36
  1. Use Tab or arrow keys to navigate through filter elements.
  2. Confirm that:
  • The nav region is correctly labeled/named with the hidden <h1>.
  • Screen readers properly announce the purpose of the filters. 🚀

📋 Subtasks

  • Add CHANGELOG entry.
  • If there's a new public field, add it to GraphQL API.
  • Add documentation regarding the feature.
  • Add/modify seeds.
  • Add tests.
  • Verify compliance with WCAG and visually validate changes in a local environment.

📷 Screenshots (optional)

Capture d’écran 2024-12-23 à 15 59 00

♥️ Thank you!

github-actions[bot]
github-actions bot requested changes Feb 3, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

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

This pull request does not contain a valid label. Please add one of the following labels: ['type: feature', 'type: change', 'type: fix', 'type: removal', 'target: developer-experience', 'type: internal']

@github-actions github-actions bot added module: core type: fix PRs that implement a fix for a bug labels Feb 3, 2025
@BarbaraOliveira13 BarbaraOliveira13 force-pushed the fix(wcag)/search-filters-navigation branch from 8ad6a4c to aa9bd2e Compare February 17, 2025 13:56
@BarbaraOliveira13 BarbaraOliveira13 force-pushed the fix(wcag)/search-filters-navigation branch from 709a307 to ea5ceca Compare February 19, 2025 16:21
@BarbaraOliveira13 BarbaraOliveira13 marked this pull request as ready for review February 20, 2025 13:37
@alecslupu
Copy link
Copy Markdown
Contributor

alecslupu commented Mar 6, 2025

@BarbaraOliveira13 is there anything that i would be able to test using the Voice Over? Reading the code, seems ok, but there is no difference between my local env running this and the nightly when i have used the Voice Over.

@BarbaraOliveira13
Copy link
Copy Markdown
Contributor Author

BarbaraOliveira13 commented Mar 9, 2025 •
edited
Loading

@BarbaraOliveira13 is there anything that i would be able to test using the Voice Over? Reading the code, seems ok, but there is no difference between my local env running this and the nightly when i have used the Voice Over.

Hi @alecslupu The difference is that the filters are now correctly named as a navigation region, making them identifiable in the Rotor (Landmarks mode). Previously, VoiceOver treated them as a generic group of elements without a clear role or label (cf screenshot bellow). Now, you should see "Search Filters, Navigation" when browsing landmarks in the Rotor.
I have added the "steps to reproduce" part in the PR description now, sorry for this omission.
Capture d’écran 2025-03-17 à 14 45 05
Capture d’écran 2025-03-17 à 14 40 36

@alecslupu alecslupu moved this to 👀 In review in Maintainers' backlog Mar 13, 2025
@alecslupu alecslupu added the release: v0.30 Issues or PRs that need to be tackled for v0.30 label Mar 18, 2025
alecslupu
alecslupu approved these changes Mar 18, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@alecslupu alecslupu left a comment

Choose a reason for hiding this comment

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

👍

@alecslupu alecslupu merged commit e22b164 into decidim:develop Mar 18, 2025
16 checks passed
@github-project-automation github-project-automation bot moved this from 👀 In review to ✅ Done in Maintainers' backlog Mar 18, 2025
@decidim-bot decidim-bot mentioned this pull request Mar 18, 2025
Merged
@alecslupu alecslupu added the release: v0.29 Issues or PRs that need to be tackled for v0.29 label Mar 18, 2025
@decidim-bot decidim-bot mentioned this pull request Mar 18, 2025
Merged
@alecslupu alecslupu added the release: v0.28 Issues or PRs that need to be tackled for v0.28 label Mar 18, 2025
@decidim-bot decidim-bot mentioned this pull request Mar 18, 2025
Merged
entantoencuanto added a commit that referenced this pull request Mar 20, 2025
@entantoencuanto
Merge branch 'feature/signature_workflows' into staging-lot2
8dce3bd 
* feature/signature_workflows:
  Add documentation for signature handler encryption secret and rename environment variable
  Rename method
  Fix title on spec for the 'Create new proposal' page (#14347)
  Fix WCAG search filters navigation (#14014)
  Fix comment cell to not show reply button when passing MAX_DEPTH (#14291)
  Fix editing comment with max length setting (#14275)
  Add title tag on pages for blogs, debates and meetings (#14110)
  Fix white bottom on proposal show with voting (#14285)
  New Crowdin updates (#14318)
  New Crowdin updates (#14217)
  Fix image missing error (#14175)
  Add delay of `spam_analysis` queue (#14304)
  Fix hide comment from interface (#14301)
  Change "Valuator" for "Evaluator" (#13684)
  Fix QR code generation (#14300)
  Patch backporter action (#14292)
  Change `hide_voting` argument on proposal cell to `show_voting` (#14267)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@github-actions github-actions[bot] github-actions[bot] approved these changes

+1 more reviewer

@alecslupu alecslupu alecslupu approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@alecslupu alecslupu

Labels

module: core release: v0.28 Issues or PRs that need to be tackled for v0.28 release: v0.29 Issues or PRs that need to be tackled for v0.29 release: v0.30 Issues or PRs that need to be tackled for v0.30 type: fix PRs that implement a fix for a bug

Projects

No open projects
Maintainers' backlog
Status: ✅ Done

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@BarbaraOliveira13 @alecslupu