Skip to content

Conversation

@KenTandrian
Copy link
Collaborator

@KenTandrian KenTandrian commented Dec 23, 2025

This PR fixes an accessibility issue where the "Santa image" button only announced "Santa Claus" without providing context about his current location or status. Screen reader users would land on the button but receive no useful information about where Santa currently is in the world.

Changes

  • Dynamic Location Announcement: Updated SantaSantaElement to accept a locationLabel property and dynamically update the button text.
  • Contextual Phrasing: Implemented logic to distinguish between Santa's states:
    • "Santa Claus is at [Location]" when stopped.
    • "Santa Claus is heading to [Location]" when moving.
  • Data Integration: Modified ModvilTrackerElement to extract the city and region from the data manager and pass it correctly to the santa-santa component.
  • Localization Support: Added new message keys tracker_santa_is_at and tracker_santa_is_heading_to with {{location}} placeholders to ensure proper grammar and translation across languages.
  • Multi-locale Support: Added and ordered translations for en, en-GB, zh-CN, zh-TW, zh-HK, ja, and ko.

Impacted UI components

  • Santa Tracker Map (modvil-tracker)
  • Santa Agent (santa-santa)

@KenTandrian KenTandrian changed the title feat(a11y): enhance Santa image button label feat(a11y): announce dynamic location in Santa tracker button Dec 23, 2025
@KenTandrian
Copy link
Collaborator Author

Santa is stopping at a location:

stopped

Santa is heading to a location:

heading to

Comment on lines 69 to 77
let label = _msg`santasearch_character_santa`;
if (this.locationLabel) {
if (this.stop) {
label = label + ` is at ${this.locationLabel}`;
} else {
label = label + ` is heading to ${this.locationLabel}`;
}
}

Copy link
Collaborator

Choose a reason for hiding this comment

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

Hm. I think this might end up being awkward for languages other than English. Might need to figure out how to dynamically generate this string in a way that works for multiple languages

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

That makes sense. I think a better way would be to add translation entries.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I have changed it to use translation entries and replace {{location}} variable.

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.

2 participants