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

message/accessibility

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

Message component accessibility

Message is a presentational layout wrapper. Accessibility comes from the content you place inside it. For icon-only action buttons in MessageFooter, give each one an aria-label. For in-progress messages, use a Marker component with role="status" so assistive tech announces the update as it appears.

Accessibility example for icon-only action buttons

Here is an example of adding accessibility to icon-only action buttons in MessageFooter: ```tsx <MessageFooter> <Button variant="ghost" size="icon" aria-label="Copy"> <CopyIcon /> </Button> </MessageFooter> ``` Each icon-only button should have an aria-label attribute to describe its purpose for assistive technology.

Accessibility example for status updates with Marker

Here is an example of using a Marker component with role="status" for in-progress message status updates: ```tsx <Message> <Marker role="status"> <MarkerIcon> <Spinner /> </MarkerIcon> <MarkerContent>Checking the logs...</MarkerContent> </Marker> </Message> ``` This allows assistive tech to announce the update as it appears.

Message accessibility is from content

Message is a presentational layout wrapper. Accessibility comes from the content you place inside it.

Label icon-only actions in MessageFooter

Action buttons in MessageFooter are usually icon-only, so give each one an aria-label attribute for accessibility. Example: ```tsx <MessageFooter> <Button variant="ghost" size="icon" aria-label="Copy"> <CopyIcon /> </Button> </MessageFooter> ```

Status updates with Marker component

For in-progress messages, use a Marker component with role="status" so assistive tech announces the update as it appears. Example: ```tsx <Message> <Marker role="status"> <MarkerIcon> <Spinner /> </MarkerIcon> <MarkerContent>Checking the logs...</MarkerContent> </Marker> </Message> ```

Give your agent this brain