Skip to content

fix: world Emoji Day logo styles & annotations#3055

Merged
graphieros merged 3 commits into
npmx-dev:mainfrom
jviide:emoji-day-fixups
Jul 17, 2026
Merged

fix: world Emoji Day logo styles & annotations#3055
graphieros merged 3 commits into
npmx-dev:mainfrom
jviide:emoji-day-fixups

Conversation

@jviide

@jviide jviide commented Jul 17, 2026

Copy link
Copy Markdown
Contributor

🔗 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-zoom for 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: none and pointer-events: none styles.

The pointer event handlers are marked as passive, as they'll never call event.preventDefault().

Additionally, this pull request adds role="img" and an aria-label to the logo's root element, and aria-hidden="true" to its immediate children.

@vercel

vercel Bot commented Jul 17, 2026

Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
npmx.dev Ready Ready Preview, Comment Jul 17, 2026 10:30am
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
docs.npmx.dev Ignored Ignored Preview Jul 17, 2026 10:30am
npmx-lunaria Ignored Ignored Jul 17, 2026 10:30am

Request Review

@coderabbitai

coderabbitai Bot commented Jul 17, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

The 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.

Changes

Emoji Day interaction and accessibility updates

Layer / File(s) Summary
Logo accessibility markup
app/components/Noodle/EmojiDay/Logo.vue, app/components/Noodle/EmojiDay/ThemedLogo.vue
The logo exposes image semantics with a localised label, and the themed logo sizer uses self-closing markup while retaining its existing attributes.
Emoji pointer and sprite interaction
app/components/Noodle/EmojiDay/emoji-thing.js
The emoji area enables pinch-zoom, pointer listeners are registered as passive, and generated canvases disable pointer events and text selection.

Possibly related PRs

Suggested reviewers: ghostdevv

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Title check ✅ Passed The title matches the main change set: World Emoji Day logo styling and accessibility annotations.
Description check ✅ Passed The description is directly related to the mobile interaction and accessibility updates in the pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@codecov

codecov Bot commented Jul 17, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

@graphieros graphieros left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

🌿

@MatteoGabriele MatteoGabriele left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

works really well on my phone now ❤️

@MatteoGabriele MatteoGabriele changed the title fix: fix World Emoji Day logo styles & annotations fix: World Emoji Day logo styles & annotations Jul 17, 2026
@graphieros graphieros changed the title fix: World Emoji Day logo styles & annotations fix: world Emoji Day logo styles & annotations Jul 17, 2026
@graphieros
graphieros added this pull request to the merge queue Jul 17, 2026
Merged via the queue into npmx-dev:main with commit 2df3b31 Jul 17, 2026
25 of 27 checks passed
@github-actions github-actions Bot mentioned this pull request Jul 17, 2026
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