fix(a11y): label remaining unlabeled icon buttons across 12 components\n\nCo-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

This commit is contained in:
Lotus Bot
2026-05-21 13:17:07 -04:00
parent df626a9064
commit fce55a708b
12 changed files with 30 additions and 13 deletions
@@ -336,7 +336,7 @@ export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerifica
<Box grow="Yes">
<Text size="H4">Reset Device Verification</Text>
</Box>
<IconButton size="300" radii="300" onClick={onCancel}>
<IconButton size="300" radii="300" onClick={onCancel} aria-label="Cancel">
<Icon src={Icons.Cross} />
</IconButton>
</Header>
+4 -1
View File
@@ -217,7 +217,9 @@ export function HeadingBlockButton() {
style={{ width: 'unset' }}
variant="SurfaceVariant"
onClick={handleMenuOpen}
aria-pressed={isActive}
aria-label={level ? `Heading ${level}` : 'Heading'}
aria-expanded={isActive}
aria-haspopup="menu"
size="400"
radii="300"
>
@@ -373,6 +375,7 @@ export function Toolbar() {
ref={triggerRef}
variant="SurfaceVariant"
onClick={() => setIsMarkdown(!isMarkdown)}
aria-label={isMarkdown ? 'Disable Markdown' : 'Enable Markdown'}
aria-pressed={isMarkdown}
size="300"
radii="300"
@@ -120,7 +120,7 @@ function SharedPowerAlert({ power, onCancel, onChange }: SharedPowerAlertProps)
<Box grow="Yes">
<Text size="H4">Shared Power</Text>
</Box>
<IconButton size="300" onClick={onCancel} radii="300">
<IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
<Icon src={Icons.Cross} />
</IconButton>
</Header>
@@ -31,6 +31,8 @@ function MicrophoneButton({ enabled, onToggle, disabled }: MicrophoneButtonProps
onClick={() => onToggle()}
outlined
disabled={disabled}
aria-label={enabled ? 'Turn off microphone' : 'Turn on microphone'}
aria-pressed={!enabled}
>
<Icon size="100" src={enabled ? Icons.Mic : Icons.MicMute} filled={!enabled} />
</IconButton>
+2
View File
@@ -108,6 +108,8 @@ export function VideoButton({ enabled, onToggle, disabled }: VideoButtonProps) {
onClick={() => onToggle()}
outlined
disabled={disabled}
aria-label={disabled ? 'Camera disabled in settings' : enabled ? 'Stop camera' : 'Start camera'}
aria-pressed={enabled}
style={disabled ? { opacity: 0.4, cursor: 'not-allowed' } : undefined}
>
<Icon
@@ -123,7 +123,7 @@ export function RoomEncryption({ permissions }: RoomEncryptionProps) {
<Box grow="Yes">
<Text size="H4">Enable Encryption</Text>
</Box>
<IconButton size="300" onClick={() => setPrompt(false)} radii="300">
<IconButton size="300" onClick={() => setPrompt(false)} radii="300" aria-label="Cancel">
<Icon src={Icons.Cross} />
</IconButton>
</Header>
@@ -105,7 +105,7 @@ function RoomUpgradeDialog({ requestClose }: { requestClose: () => void }) {
<Box grow="Yes">
<Text size="H4">{room.isSpaceRoom() ? 'Space Upgrade' : 'Room Upgrade'}</Text>
</Box>
<IconButton size="300" onClick={requestClose} radii="300">
<IconButton size="300" onClick={requestClose} radii="300" aria-label="Close">
<Icon src={Icons.Cross} />
</IconButton>
</Header>
+3 -1
View File
@@ -240,7 +240,9 @@ export function HierarchyItemMenu({
variant="SurfaceVariant"
fill="None"
radii="300"
aria-pressed={!!menuAnchor}
aria-label="More options"
aria-expanded={!!menuAnchor}
aria-haspopup="menu"
>
<Icon size="50" src={Icons.VerticalDots} />
</IconButton>
+3 -1
View File
@@ -638,7 +638,9 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
fill="None"
onClick={handleOpenMenu}
ref={triggerRef}
aria-pressed={!!menuAnchor}
aria-label="More options"
aria-expanded={!!menuAnchor}
aria-haspopup="menu"
>
<Icon size="400" src={Icons.VerticalDots} filled={!!menuAnchor} />
</IconButton>
+1 -1
View File
@@ -117,7 +117,7 @@ export const RoomViewTyping = as<'div', RoomViewTypingProps>(
</>
)}
</Text>
<IconButton title="Drop Typing Status" size="300" radii="Pill" onClick={handleDropAll}>
<IconButton title="Drop Typing Status" aria-label="Drop typing status" size="300" radii="Pill" onClick={handleDropAll}>
<Icon size="50" src={Icons.Cross} />
</IconButton>
</Box>
+6 -4
View File
@@ -496,7 +496,7 @@ export const MessageDeleteItem = as<
<Box grow="Yes">
<Text size="H4">Delete Message</Text>
</Box>
<IconButton size="300" onClick={handleClose} radii="300">
<IconButton size="300" onClick={handleClose} radii="300" aria-label="Close">
<Icon src={Icons.Cross} />
</IconButton>
</Header>
@@ -626,7 +626,7 @@ export const MessageReportItem = as<
<Box grow="Yes">
<Text size="H4">Report Message</Text>
</Box>
<IconButton size="300" onClick={handleClose} radii="300">
<IconButton size="300" onClick={handleClose} radii="300" aria-label="Close">
<Icon src={Icons.Cross} />
</IconButton>
</Header>
@@ -1207,8 +1207,9 @@ export const Message = React.memo(as<'div', MessageProps>(
size="300"
radii="300"
onClick={handleOpenMenu}
aria-label="More options"
aria-expanded={!!menuAnchor}
aria-haspopup="menu"
aria-haspopup="menu"
>
<Icon src={Icons.VerticalDots} size="100" />
</IconButton>
@@ -1377,8 +1378,9 @@ export const Event = React.memo(as<'div', EventProps>(
size="300"
radii="300"
onClick={handleOpenMenu}
aria-label="More options"
aria-expanded={!!menuAnchor}
aria-haspopup="menu"
aria-haspopup="menu"
>
<Icon src={Icons.VerticalDots} size="100" />
</IconButton>
@@ -293,6 +293,8 @@ export const MessageEditor = as<'div', MessageEditorProps>(
size="300"
radii="300"
onClick={() => setToolbar(!toolbar)}
aria-label={toolbar ? 'Hide formatting toolbar' : 'Show formatting toolbar'}
aria-pressed={toolbar}
>
<Icon size="400" src={toolbar ? Icons.AlphabetUnderline : Icons.Alphabet} />
</IconButton>
@@ -322,7 +324,9 @@ export const MessageEditor = as<'div', MessageEditorProps>(
}
>
<IconButton
aria-pressed={anchor !== undefined}
aria-label="Insert emoji"
aria-expanded={anchor !== undefined}
aria-haspopup="dialog"
onClick={
((evt) =>
setAnchor(