♿️(frontend) fix form labels and autocomplete wiring
Ensure labels map to inputs and avoid empty describedby output
This commit is contained in:
@@ -8,6 +8,10 @@ and this project adheres to
|
|||||||
|
|
||||||
## [Unreleased]
|
## [Unreleased]
|
||||||
|
|
||||||
|
### Changed
|
||||||
|
|
||||||
|
- ♿️(frontend) fix form labels and autocomplete wiring #932
|
||||||
|
|
||||||
## [1.5.0] - 2026-01-28
|
## [1.5.0] - 2026-01-28
|
||||||
|
|
||||||
### Changed
|
### Changed
|
||||||
|
|||||||
@@ -446,16 +446,14 @@ export const Join = ({
|
|||||||
type="text"
|
type="text"
|
||||||
onChange={saveUsername}
|
onChange={saveUsername}
|
||||||
label={t('usernameLabel')}
|
label={t('usernameLabel')}
|
||||||
aria-label={t('usernameLabel')}
|
id="input-name"
|
||||||
defaultValue={username}
|
defaultValue={username}
|
||||||
validate={(value) => !value && t('errors.usernameEmpty')}
|
validate={(value) => !value && t('errors.usernameEmpty')}
|
||||||
wrapperProps={{
|
wrapperProps={{
|
||||||
noMargin: true,
|
noMargin: true,
|
||||||
fullWidth: true,
|
fullWidth: true,
|
||||||
}}
|
}}
|
||||||
labelProps={{
|
autoComplete="name"
|
||||||
center: true,
|
|
||||||
}}
|
|
||||||
maxLength={50}
|
maxLength={50}
|
||||||
/>
|
/>
|
||||||
</VStack>
|
</VStack>
|
||||||
|
|||||||
@@ -138,7 +138,9 @@ export const Field = <T extends object>({
|
|||||||
const LabelAndDescription = (
|
const LabelAndDescription = (
|
||||||
<>
|
<>
|
||||||
<StyledLabel {...props.labelProps}>{label}</StyledLabel>
|
<StyledLabel {...props.labelProps}>{label}</StyledLabel>
|
||||||
<FieldDescription slot="description">{description}</FieldDescription>
|
{description ? (
|
||||||
|
<FieldDescription slot="description">{description}</FieldDescription>
|
||||||
|
) : null}
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
const RACFieldErrors = (
|
const RACFieldErrors = (
|
||||||
|
|||||||
Reference in New Issue
Block a user