new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

shadcn/ui · Components · all subjects

bubble/accessibility

5 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Bubble accessibility for reactions with role=img

To label reactions accessibly, use: ```tsx <BubbleReactions role="img" aria-label="Reactions: thumbs up, fire, and 8 more"> <span>👍</span> <span>🔥</span> <span>+8</span> </BubbleReactions> ``` Group the reactions row as a single image with a descriptive aria-label so it announces once. role="img" also hides individual emoji from assistive tech, so no aria-hidden is needed.

Bubble accessibility for interactive reactions

When reactions are interactive, render buttons instead and give icon-only buttons an aria-label: ```tsx <BubbleReactions> <Button aria-label="Thumbs up" variant="secondary" size="icon-xs"> <ThumbsUpIcon /> </Button> </BubbleReactions> ```

BubbleReactions accessibility labeling

Reactions render as a row of emoji. Group the row as a single image with a descriptive 'aria-label' and 'role="img"' so it announces once and hides individual emoji from assistive tech. When reactions are interactive, render buttons instead and give icon-only buttons an 'aria-label'. Example for static reactions: ```tsx <BubbleReactions role="img" aria-label="Reactions: thumbs up, fire, and 8 more"> <span>👍</span> <span>🔥</span> <span>+8</span> </BubbleReactions> ``` Example for interactive reactions: ```tsx <BubbleReactions> <Button aria-label="Thumbs up" variant="secondary" size="icon-xs"> <ThumbsUpIcon /> </Button> </BubbleReactions> ```

Interactive Bubbles accessibility

When a bubble is clickable, render it as a real <button> or <a> with the 'asChild' prop so it is focusable and exposes the correct role. BubbleContent ships a visible focus ring for interactive elements, and the accessible name comes from the bubble text. Example: ```tsx <Bubble variant="muted" align="end"> <BubbleContent asChild> <button type="button" onClick={onReply}> I forgot my password </button> </BubbleContent> </Bubble> ```

Bubble variant color accessibility

Bubble variants signal role and tone with color. Pair them with text, alignment, or icons so meaning is not conveyed by color alone. For a 'destructive' bubble, keep the error context in the message text rather than relying on the color treatment.

Give your agent this brain