About this set
Three ways to let readers rate comments without writing one. Answer voting is the Q&A pattern: each answer has an up arrow, a score and a down arrow, the accepted answer gets a green rail and a written Accepted answer label, and negative scores are shown as they are. Only one vote per answer can be pressed; pressing it again takes the vote back. Emoji reactions put counted chips such as thumbs up 12 under each comment, with a dashed Add reaction button that opens a row of six emoji; picking one presses the matching chip or creates a new one, and a chip that drops to zero disappears. The compact like row is the video-site style: a heart with a count and a Dislike button without one. Every control is a button with aria-pressed, so its state is announced, and each change is also read out through a polite status region, for example Upvote added. Score 129. Use voting for questions and answers, reactions for team or community threads, and the like row for long public comment lists.
What’s included
- Up and down votes with aria-pressed and a live score
- Accepted answer marked with a written label, not colour alone
- Emoji reaction chips with counts and an Add reaction picker
- Heart like and Dislike toggles for compact comment rows
- Every change announced through a polite status region
Accessibility
Votes, reactions and likes are buttons with aria-pressed and names that include what they do and whose comment they apply to, such as Upvote answer by Rhea Kapoor. Emoji are hidden from screen readers and replaced by a word, counts are part of each button's name, and a polite status region announces each change. The picker opens with aria-expanded, moves focus to the first emoji, and Esc closes it and returns focus. The heart pop runs only when motion is allowed.
Customise it
Change --vt-up, --vt-down and --vt-heart on .vt for the pressed colours. Bootstrap sets the same states through --bs-btn-* variables; in Tailwind edit the --color-vt-* theme colours.
