fix(a11y): label all buttons in Editor.preview.tsx demo component\n\nCo-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

This commit is contained in:
Lotus Bot
2026-05-21 13:21:34 -04:00
parent 9843e8bdf1
commit c05b233b3f
+5 -4
View File
@@ -23,7 +23,7 @@ export function EditorPreview() {
return ( return (
<> <>
<IconButton variant="SurfaceVariant" onClick={() => setOpen(!open)}> <IconButton variant="SurfaceVariant" aria-label="Open editor preview" onClick={() => setOpen(!open)}>
<Icon src={Icons.BlockQuote} /> <Icon src={Icons.BlockQuote} />
</IconButton> </IconButton>
<Overlay open={open} backdrop={<OverlayBackdrop />}> <Overlay open={open} backdrop={<OverlayBackdrop />}>
@@ -42,7 +42,7 @@ export function EditorPreview() {
editor={editor} editor={editor}
placeholder="Send a message..." placeholder="Send a message..."
before={ before={
<IconButton variant="SurfaceVariant" size="300" radii="300"> <IconButton variant="SurfaceVariant" size="300" radii="300" aria-label="Attach">
<Icon src={Icons.PlusCircle} /> <Icon src={Icons.PlusCircle} />
</IconButton> </IconButton>
} }
@@ -53,14 +53,15 @@ export function EditorPreview() {
size="300" size="300"
radii="300" radii="300"
onClick={() => setToolbar(!toolbar)} onClick={() => setToolbar(!toolbar)}
aria-label={toolbar ? 'Hide formatting toolbar' : 'Show formatting toolbar'}
aria-pressed={toolbar} aria-pressed={toolbar}
> >
<Icon src={toolbar ? Icons.AlphabetUnderline : Icons.Alphabet} /> <Icon src={toolbar ? Icons.AlphabetUnderline : Icons.Alphabet} />
</IconButton> </IconButton>
<IconButton variant="SurfaceVariant" size="300" radii="300"> <IconButton variant="SurfaceVariant" size="300" radii="300" aria-label="Insert emoji">
<Icon src={Icons.Smile} /> <Icon src={Icons.Smile} />
</IconButton> </IconButton>
<IconButton variant="SurfaceVariant" size="300" radii="300"> <IconButton variant="SurfaceVariant" size="300" radii="300" aria-label="Send">
<Icon src={Icons.Send} /> <Icon src={Icons.Send} />
</IconButton> </IconButton>
</> </>