Skip to content

feat(a11y): enhance keyboard focus indicator for arrow buttons#223

Merged
Jezzamonn merged 1 commit into
google:mainfrom
KenTandrian:a11y/modvil-arrow-focus-indicator
Dec 21, 2025
Merged

feat(a11y): enhance keyboard focus indicator for arrow buttons#223
Jezzamonn merged 1 commit into
google:mainfrom
KenTandrian:a11y/modvil-arrow-focus-indicator

Conversation

@KenTandrian

Copy link
Copy Markdown
Collaborator

This PR improves the accessibility of the Santa Tracker village by adding a clear and visually distinct keyboard focus indicator to the arrow navigation buttons, ensuring a better experience for keyboard-dependent users.

Changes

  • Stronger box shadow: A strong, high-contrast shadow has been added to the modvil-arrow element. This is implemented using box-shadow: inset 0 0 2px 2px #eff1f4, 0 0 0 12px rgba(0, 0, 0, 0.24); on the :focus-visible pseudo-class within static/scenes/modvil/elements/modvil-arrow.scss.
  • Icon color change: The arrow icon color changes to a darker blue (#50A4FF) from #9FCEFF on focus to further enhance visibility. This ensures the high-contrast indicator is only visible during keyboard navigation.

Impacted UI components

  • Scroll up to top button.
  • Scroll down to village button.

@Jezzamonn

Copy link
Copy Markdown
Collaborator

Could you add a screenshot or example video for this?

@KenTandrian

Copy link
Copy Markdown
Collaborator Author

Explore button:

Screen.Recording.2025-12-11.at.12.21.50.mov

Scroll to top button:

Screenshot 2025-12-11 at 12 22 44

@Jezzamonn Jezzamonn merged commit 2a688f6 into google:main Dec 21, 2025
1 check passed
@KenTandrian KenTandrian deleted the a11y/modvil-arrow-focus-indicator branch December 21, 2025 02:24
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