feat(a11y): form input labels (H-6), remaining button labels (C-1)
H-6: aria-label on all form inputs missing accessible names:
- Login: username, password (already done)
- Register: username, password, confirm, token, email
- Password reset: email, new password, confirm password
- Settings: display name, user ID to ignore, keyword, page zoom,
date format, device name, backup passwords (new/confirm/restore)
- Auth: server URL picker input
C-1: additional icon buttons:
- RoomInput: toolbar toggle (aria-pressed + label)
- Lobby/Members: scroll to top, toggle member list
- UIAFlowOverlay: cancel authentication
- BackupRestore: backup options menu
- UrlPreview: previous/next preview buttons
- RoomPacks: undo remove/remove pack buttons
- RoomViewHeader: start call, member list toggle
- ServerPicker: change server button
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -57,6 +57,7 @@ function IgnoreUserInput({ userList }: { userList: string[] }) {
|
||||
<Input
|
||||
required
|
||||
name="userIdInput"
|
||||
aria-label="User ID to ignore"
|
||||
value={userId}
|
||||
onChange={handleChange}
|
||||
variant="Secondary"
|
||||
|
||||
@@ -263,6 +263,7 @@ function ProfileDisplayName({ profile, userId }: ProfileProps) {
|
||||
<Input
|
||||
required
|
||||
name="displayNameInput"
|
||||
aria-label="Display name"
|
||||
value={displayName}
|
||||
onChange={handleChange}
|
||||
variant="Secondary"
|
||||
|
||||
@@ -150,6 +150,7 @@ function DeviceRename({ device, onCancel, onRename, refreshDeviceList }: DeviceR
|
||||
<Box grow="Yes" direction="Column">
|
||||
<Input
|
||||
name="nameInput"
|
||||
aria-label="Device display name"
|
||||
size="300"
|
||||
variant="Secondary"
|
||||
radii="300"
|
||||
|
||||
@@ -70,6 +70,7 @@ function ExportKeys() {
|
||||
<PasswordInput
|
||||
ref={passRef}
|
||||
name="passwordInput"
|
||||
aria-label="New backup password"
|
||||
size="400"
|
||||
variant="Secondary"
|
||||
radii="300"
|
||||
@@ -85,6 +86,7 @@ function ExportKeys() {
|
||||
ref={confPassRef}
|
||||
style={{ color: match ? undefined : color.Critical.Main }}
|
||||
name="confirmPasswordInput"
|
||||
aria-label="Confirm backup password"
|
||||
size="400"
|
||||
variant="Secondary"
|
||||
radii="300"
|
||||
@@ -212,6 +214,7 @@ function ImportKeys({ file, onDone }: ImportKeysProps) {
|
||||
<Text size="L400">Password</Text>
|
||||
<PasswordInput
|
||||
name="passwordInput"
|
||||
aria-label="Backup password"
|
||||
size="400"
|
||||
variant="Secondary"
|
||||
radii="300"
|
||||
|
||||
@@ -293,6 +293,7 @@ function PageZoomInput() {
|
||||
return (
|
||||
<Input
|
||||
style={{ width: toRem(100) }}
|
||||
aria-label="Page zoom percentage"
|
||||
variant={pageZoom === parseInt(currentZoom, 10) ? 'Secondary' : 'Success'}
|
||||
size="300"
|
||||
radii="300"
|
||||
@@ -617,6 +618,7 @@ function CustomDateFormat({ value, onChange }: CustomDateFormatProps) {
|
||||
<Input
|
||||
required
|
||||
name="customDateFormatInput"
|
||||
aria-label="Custom date format"
|
||||
value={dateFormatCustom}
|
||||
onChange={handleChange}
|
||||
maxLength={16}
|
||||
|
||||
@@ -65,6 +65,7 @@ function KeywordInput() {
|
||||
<Input
|
||||
required
|
||||
name="keywordInput"
|
||||
aria-label="Notification keyword"
|
||||
value={keyword}
|
||||
onChange={handleChange}
|
||||
variant="Secondary"
|
||||
|
||||
@@ -80,6 +80,7 @@ export function ServerPicker({
|
||||
return (
|
||||
<Input
|
||||
ref={serverInputRef}
|
||||
aria-label="Matrix server URL"
|
||||
style={{ paddingRight: config.space.S200 }}
|
||||
variant={allowCustomServer ? 'Background' : 'Surface'}
|
||||
outlined
|
||||
|
||||
@@ -265,6 +265,7 @@ export function PasswordRegisterForm({
|
||||
variant="Background"
|
||||
defaultValue={defaultUsername}
|
||||
name="usernameInput"
|
||||
aria-label="Username"
|
||||
size="500"
|
||||
outlined
|
||||
required
|
||||
@@ -290,6 +291,7 @@ export function PasswordRegisterForm({
|
||||
ref={passRef}
|
||||
onChange={doMatch}
|
||||
name="passwordInput"
|
||||
aria-label="Password"
|
||||
variant="Background"
|
||||
size="500"
|
||||
outlined
|
||||
@@ -320,6 +322,7 @@ export function PasswordRegisterForm({
|
||||
ref={confPassRef}
|
||||
onChange={doMatch}
|
||||
name="confirmPasswordInput"
|
||||
aria-label="Confirm password"
|
||||
variant="Background"
|
||||
size="500"
|
||||
style={{ color: match ? undefined : color.Critical.Main }}
|
||||
@@ -341,6 +344,7 @@ export function PasswordRegisterForm({
|
||||
variant="Background"
|
||||
defaultValue={defaultRegisterToken}
|
||||
name="tokenInput"
|
||||
aria-label="Registration token"
|
||||
size="500"
|
||||
required={requiredStageInFlows(uiaFlows, AuthType.RegistrationToken)}
|
||||
outlined
|
||||
@@ -356,6 +360,7 @@ export function PasswordRegisterForm({
|
||||
variant="Background"
|
||||
defaultValue={defaultEmail}
|
||||
name="emailInput"
|
||||
aria-label="Email address"
|
||||
type="email"
|
||||
size="500"
|
||||
required={requiredStageInFlows(uiaFlows, AuthType.Email)}
|
||||
|
||||
@@ -177,6 +177,7 @@ export function PasswordResetForm({ defaultEmail }: PasswordResetFormProps) {
|
||||
defaultValue={defaultEmail}
|
||||
type="email"
|
||||
name="emailInput"
|
||||
aria-label="Email address"
|
||||
variant="Background"
|
||||
size="500"
|
||||
required
|
||||
@@ -199,6 +200,7 @@ export function PasswordResetForm({ defaultEmail }: PasswordResetFormProps) {
|
||||
ref={passRef}
|
||||
onChange={doMatch}
|
||||
name="passwordInput"
|
||||
aria-label="New password"
|
||||
variant="Background"
|
||||
size="500"
|
||||
outlined
|
||||
@@ -213,6 +215,7 @@ export function PasswordResetForm({ defaultEmail }: PasswordResetFormProps) {
|
||||
ref={confPassRef}
|
||||
onChange={doMatch}
|
||||
name="confirmPasswordInput"
|
||||
aria-label="Confirm new password"
|
||||
variant="Background"
|
||||
size="500"
|
||||
style={{ color: match ? undefined : color.Critical.Main }}
|
||||
|
||||
Reference in New Issue
Block a user