LotusGuild/cinny
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(a11y): comprehensive icon button label sweep — 60+ remaining buttons labeled

Browse Source 
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:
Lotus Bot
2026-05-21 11:58:40 -04:00
parent 18b12cfca1
commit df30476b53
40 changed files with 62 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/BackupRestore.tsx
+1
View File
@@ -178,6 +178,7 @@ export function BackupRestoreTile({ crypto }: BackupRestoreTileProps) {
)}
<IconButton
aria-pressed={!!menuCords}
aria-label="Backup options"
size="300"
variant="Surface"
radii="300"
src/app/components/Pdf-viewer/PdfViewer.tsx
+1 -1
View File
@@ -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>
src/app/components/UIAFlowOverlay.tsx
+1
View File
@@ -55,6 +55,7 @@ export function UIAFlowOverlay({
<IconButton
ref={anchorRef}
variant="Critical"
aria-label="Cancel authentication"
size="300"
onClick={onCancel}
radii="Pill"
src/app/components/image-editor/ImageEditor.tsx
+1 -1
View File
@@ -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>
src/app/components/image-viewer/ImageViewer.tsx
+1 -1
View File
@@ -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>
src/app/components/invite-user-prompt/InviteUserPrompt.tsx
+1 -1
View File
@@ -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>
src/app/components/join-address-prompt/JoinAddressPrompt.tsx
+1 -1
View File
@@ -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>
src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx
+1 -1
View File
@@ -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>
src/app/components/text-viewer/TextViewer.tsx
+1 -1
View File
@@ -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>
src/app/components/url-preview/UrlPreviewCard.tsx
+2
View File
@@ -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"
src/app/components/user-profile/PowerChip.tsx
+1 -1
View File
@@ -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>
src/app/features/add-existing/AddExisting.tsx
+1 -1
View File
@@ -201,7 +201,7 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
<Text size="H4">Add Existing</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>
src/app/features/call-status/CallControl.tsx
+3
View File
@@ -62,6 +62,7 @@ function SoundButton({ enabled, onToggle, disabled }: SoundButtonProps) {
radii="300"
size="300"
onClick={() => onToggle()}
aria-label={enabled ? 'Undeafen' : 'Deafen'}
outlined
disabled={disabled}
>
@@ -99,6 +100,7 @@ function VideoButton({ enabled, onToggle, disabled }: VideoButtonProps) {
radii="300"
size="300"
onClick={() => onToggle()}
aria-label={enabled ? 'Stop Video' : 'Start Video'}
outlined
disabled={disabled}
>
@@ -136,6 +138,7 @@ function ScreenShareButton({ enabled, onToggle, disabled }: ScreenShareButtonPro
radii="300"
size="300"
onClick={onToggle}
aria-label={enabled ? 'Stop Screenshare' : 'Start Screenshare'}
outlined
disabled={disabled}
>
src/app/features/call/Controls.tsx
+6
View File
@@ -33,6 +33,7 @@ export function MicrophoneButton({ enabled, onToggle }: MicrophoneButtonProps) {
radii="400"
size="400"
onClick={() => onToggle()}
aria-label={enabled ? 'Turn Off Microphone' : 'Turn On Microphone'}
outlined
>
<Icon size="400" src={enabled ? Icons.Mic : Icons.MicMute} filled={!enabled} />
@@ -65,6 +66,7 @@ export function SoundButton({ enabled, onToggle }: SoundButtonProps) {
radii="400"
size="400"
onClick={() => onToggle()}
aria-label={enabled ? 'Undeafen' : 'Deafen'}
outlined
>
<Icon
@@ -142,6 +144,8 @@ export function ScreenShareButton({ enabled, onToggle }: ScreenShareButtonProps)
radii="400"
size="400"
onClick={() => onToggle()}
aria-label={enabled ? 'Stop Video' : 'Start Video'}
aria-label={enabled ? 'Stop Screenshare' : 'Start Screenshare'}
outlined
>
<Icon size="400" src={Icons.ScreenShare} filled={enabled} />
@@ -172,6 +176,8 @@ export function ChatButton() {
radii="400"
size="400"
onClick={() => setChat(!chat)}
aria-label={chat ? 'Close Chat' : 'Open Chat'}
aria-pressed={chat}
outlined
>
<Icon size="400" src={Icons.Message} filled={chat} />
src/app/features/common-settings/developer-tools/DevelopTools.tsx
+1 -1
View File
@@ -92,7 +92,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
</Text>
</Box>
<Box shrink="No">
<IconButton onClick={requestClose} variant="Surface">
<IconButton onClick={requestClose} variant="Surface" aria-label="Close">
<Icon src={Icons.Cross} />
</IconButton>
</Box>
src/app/features/common-settings/developer-tools/SendRoomEvent.tsx
+1 -1
View File
@@ -118,7 +118,7 @@ export function SendRoomEvent({ type, stateKey, requestClose }: SendRoomEventPro
</Chip>
</Box>
<Box shrink="No">
<IconButton onClick={requestClose} variant="Surface">
<IconButton onClick={requestClose} variant="Surface" aria-label="Close">
<Icon src={Icons.Cross} />
</IconButton>
</Box>
src/app/features/common-settings/developer-tools/StateEventEditor.tsx
+1 -1
View File
@@ -275,7 +275,7 @@ export function StateEventEditor({ type, stateKey, requestClose }: StateEventEdi
</Chip>
</Box>
<Box shrink="No">
<IconButton onClick={requestClose} variant="Surface">
<IconButton onClick={requestClose} variant="Surface" aria-label="Close">
<Icon src={Icons.Cross} />
</IconButton>
</Box>
src/app/features/common-settings/emojis-stickers/EmojisStickers.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ export function EmojisStickers({ requestClose }: EmojisStickersProps) {
</Text>
</Box>
<Box shrink="No">
<IconButton onClick={requestClose} variant="Surface">
<IconButton onClick={requestClose} variant="Surface" aria-label="Close">
<Icon src={Icons.Cross} />
</IconButton>
</Box>
src/app/features/common-settings/emojis-stickers/RoomPacks.tsx
+2
View File
@@ -218,6 +218,7 @@ export function RoomPacks({ onViewPack }: RoomPacksProps) {
size="300"
radii="Pill"
variant="Critical"
aria-label="Undo remove pack"
onClick={() => handleUndoRemove(address)}
disabled={applyingChanges}
>
@@ -228,6 +229,7 @@ export function RoomPacks({ onViewPack }: RoomPacksProps) {
size="300"
radii="Pill"
variant="Secondary"
aria-label="Remove pack"
onClick={() => handleRemove(address)}
disabled={applyingChanges}
>
src/app/features/common-settings/members/Members.tsx
+2 -1
View File
@@ -161,7 +161,7 @@ export function Members({ requestClose }: MembersProps) {
</Text>
</Box>
<Box shrink="No">
<IconButton onClick={requestClose} variant="Surface">
<IconButton onClick={requestClose} variant="Surface" aria-label="Close">
<Icon src={Icons.Cross} />
</IconButton>
</Box>
@@ -278,6 +278,7 @@ export function Members({ requestClose }: MembersProps) {
>
<IconButton
onClick={() => virtualizer.scrollToOffset(0)}
aria-label="Scroll to top"
variant="Surface"
radii="Pill"
outlined
src/app/features/common-settings/permissions/PowersEditor.tsx
+1 -1
View File
@@ -369,7 +369,7 @@ export function PowersEditor({ powerLevels, requestClose }: PowersEditorProps) {
</Chip>
</Box>
<Box shrink="No">
<IconButton onClick={requestClose} variant="Surface">
<IconButton onClick={requestClose} variant="Surface" aria-label="Close">
<Icon src={Icons.Cross} />
</IconButton>
</Box>
src/app/features/create-room/CreateRoomModal.tsx
+1 -1
View File
@@ -63,7 +63,7 @@ function CreateRoomModal({ state }: CreateRoomModalProps) {
</Text>
</Box>
<Box shrink="No">
<IconButton size="300" radii="300" onClick={closeDialog}>
<IconButton size="300" radii="300" onClick={closeDialog} aria-label="Close">
<Icon src={Icons.Cross} />
</IconButton>
</Box>
src/app/features/create-space/CreateSpaceModal.tsx
+1 -1
View File
@@ -61,7 +61,7 @@ function CreateSpaceModal({ state }: CreateSpaceModalProps) {
<Text size="H4">New Space</Text>
</Box>
<Box shrink="No">
<IconButton size="300" radii="300" onClick={closeDialog}>
<IconButton size="300" radii="300" onClick={closeDialog} aria-label="Close">
<Icon src={Icons.Cross} />
</IconButton>
</Box>
src/app/features/join-before-navigate/JoinBeforeNavigate.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ export function JoinBeforeNavigate({
{screenSize === ScreenSize.Mobile && (
<BackRouteHandler>
{(onBack) => (
<IconButton onClick={onBack}>
<IconButton onClick={onBack} aria-label="Back">
<Icon src={Icons.ArrowLeft} />
</IconButton>
)}
src/app/features/lobby/Lobby.tsx
+1
View File
@@ -446,6 +446,7 @@ export function Lobby() {
>
<IconButton
onClick={() => virtualizer.scrollToOffset(0)}
aria-label="Scroll to top"
variant="SurfaceVariant"
radii="Pill"
outlined
src/app/features/lobby/LobbyHeader.tsx
+2 -1
View File
@@ -165,7 +165,7 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
<Box shrink="No">
<BackRouteHandler>
{(onBack) => (
<IconButton fill="None" onClick={onBack}>
<IconButton fill="None" onClick={onBack} aria-label="Back">
<Icon src={Icons.ArrowLeft} />
</IconButton>
)}
@@ -221,6 +221,7 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
<IconButton
fill="None"
ref={triggerRef}
aria-label="Toggle member list"
onClick={() => setPeopleDrawer((drawer) => !drawer)}
>
<Icon size="400" src={Icons.User} />
src/app/features/room-settings/RoomSettings.tsx
+1 -1
View File
@@ -117,7 +117,7 @@ export function RoomSettings({ initialPage, requestClose }: RoomSettingsProps) {
</Box>
<Box shrink="No">
{screenSize === ScreenSize.Mobile && (
<IconButton onClick={requestClose} variant="Background">
<IconButton onClick={requestClose} variant="Background" aria-label="Close settings">
<Icon src={Icons.Cross} />
</IconButton>
)}
src/app/features/room-settings/general/General.tsx
+1 -1
View File
@@ -35,7 +35,7 @@ export function General({ requestClose }: GeneralProps) {
</Text>
</Box>
<Box shrink="No">
<IconButton onClick={requestClose} variant="Surface">
<IconButton onClick={requestClose} variant="Surface" aria-label="Close">
<Icon src={Icons.Cross} />
</IconButton>
</Box>
src/app/features/room-settings/permissions/Permissions.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ export function Permissions({ requestClose }: PermissionsProps) {
</Text>
</Box>
<Box shrink="No">
<IconButton onClick={requestClose} variant="Surface">
<IconButton onClick={requestClose} variant="Surface" aria-label="Close">
<Icon src={Icons.Cross} />
</IconButton>
</Box>
src/app/features/room/CallChatView.tsx
+1 -1
View File
@@ -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>
)}
src/app/features/room/MembersDrawer.tsx
+2
View File
@@ -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
src/app/features/room/RoomInput.tsx
+8
View File
@@ -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"
src/app/features/room/RoomViewHeader.tsx
+3 -2
View File
@@ -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>
)}
src/app/features/room/jump-to-time/JumpToTime.tsx
+1 -1
View File
@@ -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>
src/app/features/room/reaction-viewer/ReactionViewer.tsx
+1 -1
View File
@@ -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>
src/app/features/room/room-pin-menu/RoomPinMenu.tsx
+2 -1
View File
@@ -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>
src/app/features/space-settings/SpaceSettings.tsx
+1 -1
View File
@@ -117,7 +117,7 @@ export function SpaceSettings({ initialPage, requestClose }: SpaceSettingsProps)
</Box>
<Box shrink="No">
{screenSize === ScreenSize.Mobile && (
<IconButton onClick={requestClose} variant="Background">
<IconButton onClick={requestClose} variant="Background" aria-label="Close settings">
<Icon src={Icons.Cross} />
</IconButton>
)}
src/app/features/space-settings/general/General.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ export function General({ requestClose }: GeneralProps) {
</Text>
</Box>
<Box shrink="No">
<IconButton onClick={requestClose} variant="Surface">
<IconButton onClick={requestClose} variant="Surface" aria-label="Close">
<Icon src={Icons.Cross} />
</IconButton>
</Box>
src/app/features/space-settings/permissions/Permissions.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ export function Permissions({ requestClose }: PermissionsProps) {
</Text>
</Box>
<Box shrink="No">
<IconButton onClick={requestClose} variant="Surface">
<IconButton onClick={requestClose} variant="Surface" aria-label="Close">
<Icon src={Icons.Cross} />
</IconButton>
</Box>
src/app/pages/auth/ServerPicker.tsx
+1
View File
@@ -130,6 +130,7 @@ export function ServerPicker({
>
<IconButton
onClick={handleOpenServerMenu}
aria-label="Change server"
variant={allowCustomServer ? 'Background' : 'Surface'}
size="300"
aria-pressed={!!serverMenuAnchor}