fix(a11y): add labels to unlabeled form inputs\n\nCo-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -127,6 +127,7 @@ function AccountDataEdit({
|
|||||||
<Input
|
<Input
|
||||||
variant={type.length > 0 || submitting ? 'SurfaceVariant' : 'Background'}
|
variant={type.length > 0 || submitting ? 'SurfaceVariant' : 'Background'}
|
||||||
name="typeInput"
|
name="typeInput"
|
||||||
|
aria-label="Account data type"
|
||||||
size="400"
|
size="400"
|
||||||
radii="300"
|
radii="300"
|
||||||
readOnly={type.length > 0 || submitting}
|
readOnly={type.length > 0 || submitting}
|
||||||
@@ -170,6 +171,7 @@ function AccountDataEdit({
|
|||||||
<TextAreaComponent
|
<TextAreaComponent
|
||||||
ref={textAreaRef}
|
ref={textAreaRef}
|
||||||
name="contentTextArea"
|
name="contentTextArea"
|
||||||
|
aria-label="JSON content"
|
||||||
style={{
|
style={{
|
||||||
fontFamily: 'monospace',
|
fontFamily: 'monospace',
|
||||||
}}
|
}}
|
||||||
|
|||||||
@@ -80,6 +80,7 @@ export function SecretStorageRecoveryPassphrase({
|
|||||||
<Text size="L400">Recovery Passphrase</Text>
|
<Text size="L400">Recovery Passphrase</Text>
|
||||||
<PasswordInput
|
<PasswordInput
|
||||||
name="recoveryPassphraseInput"
|
name="recoveryPassphraseInput"
|
||||||
|
aria-label="Recovery passphrase"
|
||||||
size="400"
|
size="400"
|
||||||
variant="Secondary"
|
variant="Secondary"
|
||||||
radii="300"
|
radii="300"
|
||||||
@@ -170,6 +171,7 @@ export function SecretStorageRecoveryKey({
|
|||||||
<Text size="L400">Recovery Key</Text>
|
<Text size="L400">Recovery Key</Text>
|
||||||
<PasswordInput
|
<PasswordInput
|
||||||
name="recoveryKeyInput"
|
name="recoveryKeyInput"
|
||||||
|
aria-label="Recovery key"
|
||||||
size="400"
|
size="400"
|
||||||
variant="Secondary"
|
variant="Secondary"
|
||||||
radii="300"
|
radii="300"
|
||||||
|
|||||||
@@ -39,10 +39,11 @@ function EmailErrorDialog({
|
|||||||
<Box direction="Column" gap="100">
|
<Box direction="Column" gap="100">
|
||||||
<Text size="H4">{title}</Text>
|
<Text size="H4">{title}</Text>
|
||||||
<Text>{message}</Text>
|
<Text>{message}</Text>
|
||||||
<Text as="label" size="L400" style={{ paddingTop: config.space.S400 }}>
|
<Text as="label" htmlFor="retryEmailInput" size="L400" style={{ paddingTop: config.space.S400 }}>
|
||||||
Email
|
Email
|
||||||
</Text>
|
</Text>
|
||||||
<Input
|
<Input
|
||||||
|
id="retryEmailInput"
|
||||||
name="retryEmailInput"
|
name="retryEmailInput"
|
||||||
variant="Background"
|
variant="Background"
|
||||||
size="500"
|
size="500"
|
||||||
|
|||||||
@@ -110,7 +110,7 @@ export function AddServer() {
|
|||||||
<Text priority="400">Add server name to explore public communities.</Text>
|
<Text priority="400">Add server name to explore public communities.</Text>
|
||||||
<Box direction="Column" gap="100">
|
<Box direction="Column" gap="100">
|
||||||
<Text size="L400">Server Name</Text>
|
<Text size="L400">Server Name</Text>
|
||||||
<Input ref={serverInputRef} name="serverInput" variant="Background" required />
|
<Input ref={serverInputRef} name="serverInput" aria-label="Server name" variant="Background" required />
|
||||||
{exploreState.status === AsyncStatus.Error && (
|
{exploreState.status === AsyncStatus.Error && (
|
||||||
<Text style={{ color: color.Critical.Main }} size="T300">
|
<Text style={{ color: color.Critical.Main }} size="T300">
|
||||||
Failed to load public rooms. Please try again.
|
Failed to load public rooms. Please try again.
|
||||||
|
|||||||
@@ -111,6 +111,7 @@ function Search({ active, loading, searchInputRef, onSearch, onReset }: SearchPr
|
|||||||
ref={searchInputRef}
|
ref={searchInputRef}
|
||||||
style={{ paddingRight: config.space.S300 }}
|
style={{ paddingRight: config.space.S300 }}
|
||||||
name="searchInput"
|
name="searchInput"
|
||||||
|
aria-label="Search rooms"
|
||||||
size="500"
|
size="500"
|
||||||
variant="Background"
|
variant="Background"
|
||||||
placeholder="Search for keyword"
|
placeholder="Search for keyword"
|
||||||
|
|||||||
Reference in New Issue
Block a user