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:
@@ -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>
|
||||||
</>
|
</>
|
||||||
|
|||||||
Reference in New Issue
Block a user