[TAN-7695] Legacy ProjectCard and ProjectFolderCard a11y improvements#13797
Open
AchrafGoVocal wants to merge 22 commits into
Open
[TAN-7695] Legacy ProjectCard and ProjectFolderCard a11y improvements#13797AchrafGoVocal wants to merge 22 commits into
AchrafGoVocal wants to merge 22 commits into
Conversation
…ub.com:CitizenLabDotCo/citizenlab into TAN-7695-legacy-project-folder-card-focus-trap
Collaborator
|
…ub.com:CitizenLabDotCo/citizenlab into TAN-7695-legacy-project-folder-card-focus-trap
Contributor
|
Been swamped, hadn't gotten to this yet. Okay if I review this on Wednesday morning? I'm off tomorrow. if urgent, I can review retrospectively after merge |
EdwinKato
approved these changes
May 13, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Both card components wrapped their entire body in an and rendered a (CTA) inside it. Nested interactive elements are invalid HTML and caused a focus trap in Firefox/Safari — forward Tab cycled between the card and its inner button without progressing. This PR removes the nesting and improves screen-reader context.
<div>. Whole-card click target preserved via a::beforeoverlay on the title link (single tab stop per card).<h3>wrapped inProjectTitleLink/FolderTitleLink— the single primary link.<button>→ CTA<Link>atz-index: 2, independently focusable above the overlay.order: -1onContentHeaderkeeps the visual layout. ProjectCard only; ProjectFolderCard has no CTA.aria-describedbyon the title link references description and participants count, so SR users hear "title → description → X participants".aria-labelon the CTA includes the project title (uniquely identifies CTAs across multiple cards).joinAriaIdsutil inutils/a11yfor cleanly composing IDREFS values.ScreenReaderOnlyduplicate title/description andaria-hiddenonContentBody— both were workarounds for the now-removed wrapping<a>.Changelog
Changed
Fixed
For translators
"app.components.ProjectCard.a11y_ctaForProject": "{cta}. Project {projectTitle}",This translation is for screen readers to be able to differentiate between the CTAs on in each project card.
For example:
Vote. Project Title of project