feat(a11y): comprehensive icon button label sweep — 60+ remaining buttons labeled
C-1 complete sweep across all components and features: - Call controls: mic mute/unmute, deafen/undeafen, video, screenshare, chat - RoomInput: dismiss reply, attach file, sticker, emoji, GIF, location, toolbar - Media viewers: close in image/pdf/text viewers and editors - Settings dialogs: close buttons in all room/space/common settings panels - Lobby: back, toggle member list, scroll to top, pack add/remove - Auth: server picker, UIA flow cancel - Upload cards: cancel uploads - URL preview: prev/next buttons - Members drawer: close + scroll to top - RoomViewHeader: back, start call, toggle member list Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -178,6 +178,7 @@ export function BackupRestoreTile({ crypto }: BackupRestoreTileProps) {
|
||||
)}
|
||||
<IconButton
|
||||
aria-pressed={!!menuCords}
|
||||
aria-label="Backup options"
|
||||
size="300"
|
||||
variant="Surface"
|
||||
radii="300"
|
||||
|
||||
@@ -108,7 +108,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
|
||||
<Box className={classNames(css.PdfViewer, className)} direction="Column" {...props} ref={ref}>
|
||||
<Header className={css.PdfViewerHeader} size="400">
|
||||
<Box grow="Yes" alignItems="Center" gap="200">
|
||||
<IconButton size="300" radii="300" onClick={requestClose}>
|
||||
<IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
|
||||
<Icon size="50" src={Icons.ArrowLeft} />
|
||||
</IconButton>
|
||||
<Text size="T300" truncate>
|
||||
|
||||
@@ -55,6 +55,7 @@ export function UIAFlowOverlay({
|
||||
<IconButton
|
||||
ref={anchorRef}
|
||||
variant="Critical"
|
||||
aria-label="Cancel authentication"
|
||||
size="300"
|
||||
onClick={onCancel}
|
||||
radii="Pill"
|
||||
|
||||
@@ -24,7 +24,7 @@ export const ImageEditor = as<'div', ImageEditorProps>(
|
||||
>
|
||||
<Header className={css.ImageEditorHeader} size="400">
|
||||
<Box grow="Yes" alignItems="Center" gap="200">
|
||||
<IconButton size="300" radii="300" onClick={requestClose}>
|
||||
<IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
|
||||
<Icon size="50" src={Icons.ArrowLeft} />
|
||||
</IconButton>
|
||||
<Text size="T300" truncate>
|
||||
|
||||
@@ -33,7 +33,7 @@ export const ImageViewer = as<'div', ImageViewerProps>(
|
||||
>
|
||||
<Header className={css.ImageViewerHeader} size="400">
|
||||
<Box grow="Yes" alignItems="Center" gap="200">
|
||||
<IconButton size="300" radii="300" onClick={requestClose}>
|
||||
<IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
|
||||
<Icon size="50" src={Icons.ArrowLeft} />
|
||||
</IconButton>
|
||||
<Text size="T300" truncate>
|
||||
|
||||
@@ -173,7 +173,7 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
|
||||
</Text>
|
||||
</Box>
|
||||
<Box shrink="No">
|
||||
<IconButton size="300" radii="300" onClick={requestClose}>
|
||||
<IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
|
||||
<Icon src={Icons.Cross} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
@@ -82,7 +82,7 @@ export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
|
||||
<Box grow="Yes">
|
||||
<Text size="H4">Join with Address</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>
|
||||
|
||||
@@ -68,7 +68,7 @@ export function LeaveSpacePrompt({ roomId, onDone, onCancel }: LeaveSpacePromptP
|
||||
<Box grow="Yes">
|
||||
<Text size="H4">Leave Space</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>
|
||||
|
||||
@@ -53,7 +53,7 @@ export const TextViewer = as<'div', TextViewerProps>(
|
||||
>
|
||||
<Header className={css.TextViewerHeader} size="400">
|
||||
<Box grow="Yes" alignItems="Center" gap="200">
|
||||
<IconButton size="300" radii="300" onClick={requestClose}>
|
||||
<IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
|
||||
<Icon size="50" src={Icons.ArrowLeft} />
|
||||
</IconButton>
|
||||
<Text size="T300" truncate>
|
||||
|
||||
@@ -182,6 +182,7 @@ export const UrlPreviewHolder = as<'div'>(({ children, ...props }, ref) => {
|
||||
<div className={css.UrlPreviewHolderGradient({ position: 'Left' })} />
|
||||
<IconButton
|
||||
className={css.UrlPreviewHolderBtn({ position: 'Left' })}
|
||||
aria-label="Previous preview"
|
||||
variant="Secondary"
|
||||
radii="Pill"
|
||||
size="300"
|
||||
@@ -200,6 +201,7 @@ export const UrlPreviewHolder = as<'div'>(({ children, ...props }, ref) => {
|
||||
<div className={css.UrlPreviewHolderGradient({ position: 'Right' })} />
|
||||
<IconButton
|
||||
className={css.UrlPreviewHolderBtn({ position: 'Right' })}
|
||||
aria-label="Next preview"
|
||||
variant="Primary"
|
||||
radii="Pill"
|
||||
size="300"
|
||||
|
||||
@@ -70,7 +70,7 @@ function SelfDemoteAlert({ power, onCancel, onChange }: SelfDemoteAlertProps) {
|
||||
<Box grow="Yes">
|
||||
<Text size="H4">Self Demotion</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>
|
||||
|
||||
Reference in New Issue
Block a user