fix(a11y): semantic headings, htmlFor/id associations, remove duplicate aria-labels

H-tag: add as=h1/h2 to dialog/UIA/auth headings (21 components)
Label: add htmlFor/id to PasswordRegisterForm (5 pairs) and PasswordResetForm (3 pairs)
Dupe: remove duplicate aria-label from Controls.tsx screenshare button, MembersDrawer, Members, RoomInput

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lotus Bot
2026-05-21 15:36:59 -04:00
parent 09905828ef
commit 689805ca6e
24 changed files with 37 additions and 33 deletions
+1 -1
View File
@@ -259,7 +259,7 @@ export function DeviceVerification({ request, onExit }: DeviceVerificationProps)
<Dialog variant="Surface">
<Header style={DialogHeaderStyles} variant="Surface" size="500">
<Box grow="Yes">
<Text size="H4">Device Verification</Text>
<Text as="h2" size="H4">Device Verification</Text>
</Box>
<IconButton size="300" radii="300" onClick={handleCancel} aria-label="Cancel verification">
<Icon src={Icons.Cross} />
@@ -299,7 +299,7 @@ export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerifica
size="500"
>
<Box grow="Yes">
<Text size="H4">Setup Device Verification</Text>
<Text as="h2" size="H4">Setup Device Verification</Text>
</Box>
<IconButton size="300" radii="300" onClick={onCancel} aria-label="Cancel">
<Icon src={Icons.Cross} />
@@ -334,7 +334,7 @@ export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerifica
size="500"
>
<Box grow="Yes">
<Text size="H4">Reset Device Verification</Text>
<Text as="h2" size="H4">Reset Device Verification</Text>
</Box>
<IconButton size="300" radii="300" onClick={onCancel} aria-label="Cancel">
<Icon src={Icons.Cross} />
+1 -1
View File
@@ -43,7 +43,7 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
size="500"
>
<Box grow="Yes">
<Text size="H4">Logout</Text>
<Text as="h2" size="H4">Logout</Text>
</Box>
</Header>
<Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
@@ -80,7 +80,7 @@ export function JoinAddressPrompt({ onOpen, onCancel }: JoinAddressProps) {
size="500"
>
<Box grow="Yes">
<Text size="H4">Join with Address</Text>
<Text as="h2" size="H4">Join with Address</Text>
</Box>
<IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
<Icon src={Icons.Cross} />
@@ -66,7 +66,7 @@ export function LeaveRoomPrompt({ roomId, onDone, onCancel }: LeaveRoomPromptPro
size="500"
>
<Box grow="Yes">
<Text size="H4" id="leave-room-dialog-title">Leave Room</Text>
<Text as="h2" size="H4" id="leave-room-dialog-title">Leave Room</Text>
</Box>
<IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
<Icon src={Icons.Cross} />
@@ -66,7 +66,7 @@ export function LeaveSpacePrompt({ roomId, onDone, onCancel }: LeaveSpacePromptP
size="500"
>
<Box grow="Yes">
<Text size="H4">Leave Space</Text>
<Text as="h2" size="H4">Leave Space</Text>
</Box>
<IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
<Icon src={Icons.Cross} />
@@ -23,7 +23,7 @@ export const RoomTopicViewer = as<
>
<Header className={css.ModalHeader} variant="Surface" size="500">
<Box grow="Yes">
<Text size="H4" truncate id="room-topic-title">
<Text as="h2" size="H4" truncate id="room-topic-title">
{name}
</Text>
</Box>
+1 -1
View File
@@ -18,7 +18,7 @@ function DummyErrorDialog({
<Dialog>
<Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
<Box direction="Column" gap="100">
<Text size="H4">{title}</Text>
<Text as="h2" size="H4">{title}</Text>
<Text>{message}</Text>
</Box>
<Button variant="Critical" onClick={onRetry}>
+2 -2
View File
@@ -37,7 +37,7 @@ function EmailErrorDialog({
gap="400"
>
<Box direction="Column" gap="100">
<Text size="H4">{title}</Text>
<Text as="h2" size="H4">{title}</Text>
<Text>{message}</Text>
<Text as="label" htmlFor="retryEmailInput" size="L400" style={{ paddingTop: config.space.S400 }}>
Email
@@ -141,7 +141,7 @@ export function EmailStageDialog({
<Dialog>
<Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
<Box direction="Column" gap="100">
<Text size="H4">Verification Request Sent</Text>
<Text as="h2" size="H4">Verification Request Sent</Text>
<Text>{`Please check your email "${emailTokenState.data.email}" and validate before continuing further.`}</Text>
{errorCode && (
@@ -43,7 +43,7 @@ export function PasswordStage({
size="500"
>
<Box grow="Yes">
<Text size="H4">Account Password</Text>
<Text as="h2" size="H4">Account Password</Text>
</Box>
<IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
<Icon src={Icons.Cross} />
@@ -35,7 +35,7 @@ function RegistrationTokenErrorDialog({
gap="400"
>
<Box direction="Column" gap="100">
<Text size="H4">{title}</Text>
<Text as="h2" size="H4">{title}</Text>
<Text>{message}</Text>
<Text as="label" htmlFor="retryTokenInput" size="L400" style={{ paddingTop: config.space.S400 }}>
Registration Token
+1 -1
View File
@@ -54,7 +54,7 @@ export function SSOStage({
size="500"
>
<Box grow="Yes">
<Text size="H4">SSO Login</Text>
<Text as="h2" size="H4">SSO Login</Text>
</Box>
<IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
<Icon src={Icons.Cross} />
+1 -1
View File
@@ -18,7 +18,7 @@ function TermsErrorDialog({
<Dialog>
<Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
<Box direction="Column" gap="100">
<Text size="H4">{title}</Text>
<Text as="h2" size="H4">{title}</Text>
<Text>{message}</Text>
</Box>
<Button variant="Critical" onClick={onRetry}>
@@ -68,7 +68,7 @@ function SelfDemoteAlert({ power, onCancel, onChange }: SelfDemoteAlertProps) {
size="500"
>
<Box grow="Yes">
<Text size="H4">Self Demotion</Text>
<Text as="h2" size="H4">Self Demotion</Text>
</Box>
<IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
<Icon src={Icons.Cross} />
@@ -118,7 +118,7 @@ function SharedPowerAlert({ power, onCancel, onChange }: SharedPowerAlertProps)
size="500"
>
<Box grow="Yes">
<Text size="H4">Shared Power</Text>
<Text as="h2" size="H4">Shared Power</Text>
</Box>
<IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
<Icon src={Icons.Cross} />