Skip to content

Indicate to AT that element is currently selected #1408

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

Merged
merged 10 commits into from
Jun 13, 2025

Conversation

amy-corson-ibigroup
Copy link
Contributor

@amy-corson-ibigroup amy-corson-ibigroup commented Jun 3, 2025

Description:
Adds a "(currently selected)" string to active links so AT users know which route is active.
Also adds it to locale selector and sort option since aria-selected is being a little inconsistent on those components.

PR Checklist:

  • Does the code follow accessibility standards (WCAG 2.1 AA Compliant)?
  • Are all languages supported (Internationalization/Localization)?
  • Are appropriate Typescript types implemented?

Sorry, something went wrong.

Copy link
Contributor

@daniel-heppner-ibigroup daniel-heppner-ibigroup left a comment

Choose a reason for hiding this comment

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

Nice!

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
Copy link
Collaborator

@miles-grant-ibigroup miles-grant-ibigroup left a comment

Choose a reason for hiding this comment

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

Good change! But one small problem

Comment on lines 211 to 213
(
<FormattedMessage id="components.RouteViewer.currentlySelected" />
)
Copy link
Collaborator

Choose a reason for hiding this comment

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

We've been told in the past that brackets have to be localized.

@amy-corson-ibigroup amy-corson-ibigroup changed the title Indicate to AT that route is currently selected Indicate to AT that element is currently selected Jun 9, 2025

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
@amy-corson-ibigroup
Copy link
Contributor Author

I updated this PR to also add this string to the locale selector and the sorting dropdown! @miles-grant-ibigroup @daniel-heppner-ibigroup

Copy link
Collaborator

@miles-grant-ibigroup miles-grant-ibigroup left a comment

Choose a reason for hiding this comment

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

Looks good! Just a few small issues

@@ -192,6 +192,11 @@ export default function NarrativeItinerariesHeader({
role="option"
>
{sortOption.text}
{sortText === sortOption.text && (
<InvisibleA11yLabel>
<FormattedMessage id="coommon.currentlySelected" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

Typo!

i18n/fr.yml Outdated
@@ -76,6 +76,7 @@ actions:
réessayez.
common:
coordinates: "{lat}; {lon}"
currentlySelected: (actuellement sélectionné)
Copy link
Collaborator

Choose a reason for hiding this comment

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

Do we need a hardcoded space here to prevent the words from squishing together?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

might as well!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

you 🤝 codespell

Copy link
Collaborator

@miles-grant-ibigroup miles-grant-ibigroup left a comment

Choose a reason for hiding this comment

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

One more typo and then this great fix is ready to go!

@@ -192,6 +192,11 @@ export default function NarrativeItinerariesHeader({
role="option"
>
{sortOption.text}
{sortText === sortOption.text && (
<InvisibleA11yLabel>
<FormattedMessage id="commmon.currentlySelected" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

Oh no!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

cant spell this to save my life huh

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
@amy-corson-ibigroup amy-corson-ibigroup merged commit 50611b9 into dev Jun 13, 2025
9 checks passed
@amy-corson-ibigroup amy-corson-ibigroup deleted the route-viewer-currently-selected branch June 13, 2025 14:30
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.

None yet

3 participants