fix: world Emoji Day logo styles & annotations#3055
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
📝 WalkthroughWalkthroughThe Emoji Day logo now includes localised accessibility semantics. Emoji touch handling enables pinch-zoom, pointer listeners are passive, and generated canvases disable pointer events and text selection. ChangesEmoji Day interaction and accessibility updates
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
MatteoGabriele
left a comment
There was a problem hiding this comment.
works really well on my phone now ❤️
🔗 Linked issue
🧭 Context
Interacting with the World Emoji Day logo is a difficult on mobile platforms, due to pointer movement getting interpreted as panning, and the emoji particles getting selected.
The logo is also missing accessibility roles and labeling.
📚 Description
This pull request sets
touch-action: pinch-zoomfor the emoji particle container element, which allows pointer movement that would otherwise get interpreted as panning to interact with the logo instead.The emoji particles also get
user-select: noneandpointer-events: nonestyles.The pointer event handlers are marked as passive, as they'll never call
event.preventDefault().Additionally, this pull request adds
role="img"and anaria-labelto the logo's root element, andaria-hidden="true"to its immediate children.