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:
@@ -41,7 +41,7 @@ export function CallChatView() {
|
||||
}
|
||||
>
|
||||
{(triggerRef) => (
|
||||
<IconButton ref={triggerRef} variant="Surface" onClick={handleClose}>
|
||||
<IconButton ref={triggerRef} variant="Surface" onClick={handleClose} aria-label="Close call chat">
|
||||
<Icon src={Icons.Cross} />
|
||||
</IconButton>
|
||||
)}
|
||||
|
||||
@@ -89,6 +89,7 @@ function MemberDrawerHeader({ room }: MemberDrawerHeaderProps) {
|
||||
<IconButton
|
||||
ref={triggerRef}
|
||||
variant="Background"
|
||||
aria-label="Close member list"
|
||||
onClick={() => setPeopleDrawer(false)}
|
||||
>
|
||||
<Icon src={Icons.Cross} />
|
||||
@@ -360,6 +361,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
|
||||
<ScrollTopContainer scrollRef={scrollRef} anchorRef={scrollTopAnchorRef}>
|
||||
<IconButton
|
||||
onClick={() => virtualizer.scrollToOffset(0)}
|
||||
aria-label="Scroll to top"
|
||||
variant="Surface"
|
||||
radii="Pill"
|
||||
outlined
|
||||
|
||||
@@ -629,6 +629,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
>
|
||||
<IconButton
|
||||
onClick={() => setReplyDraft(undefined)}
|
||||
aria-label="Dismiss reply"
|
||||
variant="SurfaceVariant"
|
||||
size="300"
|
||||
radii="300"
|
||||
@@ -661,6 +662,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
before={
|
||||
<IconButton
|
||||
onClick={() => pickFile('*')}
|
||||
aria-label="Attach file"
|
||||
variant="SurfaceVariant"
|
||||
size="300"
|
||||
radii="300"
|
||||
@@ -674,6 +676,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
variant="SurfaceVariant"
|
||||
size="300"
|
||||
radii="300"
|
||||
aria-label={toolbar ? 'Hide formatting toolbar' : 'Show formatting toolbar'}
|
||||
aria-pressed={toolbar}
|
||||
onClick={() => setToolbar(!toolbar)}
|
||||
>
|
||||
<Icon src={toolbar ? Icons.AlphabetUnderline : Icons.Alphabet} />
|
||||
@@ -714,6 +718,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
{!hideStickerBtn && (
|
||||
<IconButton
|
||||
aria-pressed={emojiBoardTab === EmojiBoardTab.Sticker}
|
||||
aria-label="Insert sticker"
|
||||
onClick={() => setEmojiBoardTab(EmojiBoardTab.Sticker)}
|
||||
variant="SurfaceVariant"
|
||||
size="300"
|
||||
@@ -727,6 +732,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
)}
|
||||
<IconButton
|
||||
ref={emojiBtnRef}
|
||||
aria-label="Insert emoji"
|
||||
aria-pressed={
|
||||
hideStickerBtn ? !!emojiBoardTab : emojiBoardTab === EmojiBoardTab.Emoji
|
||||
}
|
||||
@@ -768,6 +774,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
>
|
||||
<IconButton
|
||||
ref={gifBtnRef}
|
||||
aria-label="Insert GIF"
|
||||
aria-pressed={gifOpen}
|
||||
onClick={() => setGifOpen(!gifOpen)}
|
||||
variant="SurfaceVariant"
|
||||
@@ -797,6 +804,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
|
||||
)}
|
||||
<IconButton
|
||||
onClick={handleShareLocation}
|
||||
aria-label="Share location"
|
||||
variant="SurfaceVariant"
|
||||
size="300"
|
||||
radii="300"
|
||||
|
||||
@@ -340,6 +340,7 @@ function CallButton() {
|
||||
variant="Surface"
|
||||
fill="None"
|
||||
ref={triggerRef}
|
||||
aria-label="Start call"
|
||||
onClick={handleOpenMenu}
|
||||
onContextMenu={(evt) => {
|
||||
evt.preventDefault();
|
||||
@@ -456,7 +457,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
|
||||
<BackRouteHandler>
|
||||
{(onBack) => (
|
||||
<Box shrink="No" alignItems="Center">
|
||||
<IconButton fill="None" onClick={onBack}>
|
||||
<IconButton fill="None" onClick={onBack} aria-label="Back">
|
||||
<Icon src={Icons.ArrowLeft} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
@@ -615,7 +616,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
|
||||
}
|
||||
>
|
||||
{(triggerRef) => (
|
||||
<IconButton fill="None" ref={triggerRef} onClick={handleMemberToggle}>
|
||||
<IconButton fill="None" ref={triggerRef} onClick={handleMemberToggle} aria-label="Toggle member list">
|
||||
<Icon size="400" src={Icons.User} />
|
||||
</IconButton>
|
||||
)}
|
||||
|
||||
@@ -108,7 +108,7 @@ export function JumpToTime({ onCancel, onSubmit }: JumpToTimeProps) {
|
||||
<Box grow="Yes">
|
||||
<Text size="H4">Jump to Time</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>
|
||||
|
||||
@@ -100,7 +100,7 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
|
||||
<Box grow="Yes">
|
||||
<Text size="H3" truncate>{`Reacted with :${selectedShortcode}:`}</Text>
|
||||
</Box>
|
||||
<IconButton size="300" onClick={requestClose}>
|
||||
<IconButton size="300" onClick={requestClose} aria-label="Close">
|
||||
<Icon src={Icons.Cross} />
|
||||
</IconButton>
|
||||
</Header>
|
||||
|
||||
@@ -146,6 +146,7 @@ function PinnedMessage({
|
||||
</Chip>
|
||||
{canPinEvent && (
|
||||
<IconButton
|
||||
aria-label="Pinned messages"
|
||||
data-event-id={eventId}
|
||||
variant="Secondary"
|
||||
size="300"
|
||||
@@ -457,7 +458,7 @@ export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(
|
||||
<Text size="H5">Pinned Messages</Text>
|
||||
</Box>
|
||||
<Box shrink="No">
|
||||
<IconButton size="300" onClick={requestClose} radii="300">
|
||||
<IconButton size="300" onClick={requestClose} radii="300" aria-label="Close">
|
||||
<Icon src={Icons.Cross} size="400" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
Reference in New Issue
Block a user