Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: improve accessibility for single field components tckt-393 #387

Merged
merged 2 commits into from
Dec 4, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
refactor: improve accessibility and error handling for single field c…
…omponents tckt-393
kalasgarov committed Nov 27, 2024
commit 81d49d22d53bfecb3c5a6a8f01f8f51dd79d982e
47 changes: 29 additions & 18 deletions packages/design/src/Form/components/DateOfBirth/DateOfBirth.tsx
Original file line number Diff line number Diff line change
@@ -19,6 +19,14 @@ const months = [
{ value: '12', label: 'December' },
];

const getAriaDescribedBy = (
errorId: string | null,
hintId: string | null
): string | undefined => {
const ids = [errorId, hintId].filter(Boolean).join(' ');
return ids || undefined;
};

export const DateOfBirthPattern: PatternComponent<DateOfBirthProps> = ({
monthId,
dayId,
@@ -29,6 +37,8 @@ export const DateOfBirthPattern: PatternComponent<DateOfBirthProps> = ({
error,
}) => {
const { register } = useFormContext();
const errorId = `input-error-message-${monthId}`;
const hintId = `hint-${monthId}`;

return (
<fieldset className="usa-fieldset">
@@ -37,16 +47,12 @@ export const DateOfBirthPattern: PatternComponent<DateOfBirthProps> = ({
{required && <span className="required-indicator">*</span>}
</legend>
{hint && (
<span className="usa-hint" id={`hint-${monthId}`}>
<span className="usa-hint" id={hintId}>
{hint}
</span>
)}
{error && (
<div
className="usa-error-message"
id={`input-error-message-${monthId}`}
role="alert"
>
<div className="usa-error-message" id={errorId} role="alert">
{error.message}
</div>
)}
@@ -57,12 +63,15 @@ export const DateOfBirthPattern: PatternComponent<DateOfBirthProps> = ({
</label>
<select
className={classNames('usa-input', {
'usa-input--error': error,
'usa-input--error': !!error,
})}
id={monthId}
{...register(monthId)}
aria-describedby={
error ? `${monthId} input-error-message-${monthId}}` : monthId
getAriaDescribedBy(
error ? errorId : null,
hint ? hintId : null
) || undefined
}
>
<option key="default" value="">
@@ -81,17 +90,18 @@ export const DateOfBirthPattern: PatternComponent<DateOfBirthProps> = ({
</label>
<input
className={classNames('usa-input', {
'usa-input--error': error,
'usa-input--error': !!error,
})}
id={dayId}
{...register(dayId)}
{...register(dayId, { required })}
minLength={2}
maxLength={2}
pattern="[0-9]*"
inputMode="numeric"
aria-describedby={
error ? `${dayId} input-error-message-${dayId}}}` : dayId
}
aria-describedby={getAriaDescribedBy(
error ? `input-error-message-${dayId}` : null,
hint ? hintId : null
)}
/>
</div>
<div className="usa-form-group usa-form-group--year">
@@ -100,17 +110,18 @@ export const DateOfBirthPattern: PatternComponent<DateOfBirthProps> = ({
</label>
<input
className={classNames('usa-input', {
'usa-input--error': error,
'usa-input--error': !!error,
})}
id={yearId}
{...register(yearId)}
{...register(yearId, { required })}
minLength={4}
maxLength={4}
pattern="[0-9]*"
inputMode="numeric"
aria-describedby={
error ? `${yearId} input-error-message-${yearId}}}` : yearId
}
aria-describedby={getAriaDescribedBy(
error ? `input-error-message-${yearId}` : null,
hint ? hintId : null
)}
/>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -34,7 +34,7 @@ export const EmailInputPattern: PatternComponent<EmailInputProps> = ({
autoCapitalize="off"
autoCorrect="off"
{...register(emailId, { required })}
aria-describedby={error ? `${emailId} ${errorId}}` : emailId}
aria-describedby={error ? errorId : undefined}
/>
</div>
</fieldset>
Original file line number Diff line number Diff line change
@@ -14,6 +14,7 @@ export const PhoneNumberPattern: PatternComponent<PhoneNumberProps> = ({
}) => {
const { register } = useFormContext();
const errorId = `input-error-message-${phoneId}`;
const hintId = `hint-${phoneId}`;

return (
<fieldset className="usa-fieldset">
@@ -22,14 +23,13 @@ export const PhoneNumberPattern: PatternComponent<PhoneNumberProps> = ({
className={classNames('usa-label', {
'usa-label--error': error,
})}
id={`input-message-${phoneId}`}
htmlFor={phoneId}
>
{label}
{required && <span className="required-indicator">*</span>}
</label>
{hint && (
<div className="usa-hint" id={`hint-${phoneId}`}>
<div className="usa-hint" id={hintId}>
{hint}
</div>
)}
@@ -46,7 +46,10 @@ export const PhoneNumberPattern: PatternComponent<PhoneNumberProps> = ({
type="tel"
defaultValue={value}
{...register(phoneId, { required })}
aria-describedby={error ? `${phoneId} ${errorId}` : phoneId}
aria-describedby={
`${hint ? `${hintId}` : ''}${error ? ` ${errorId}` : ''}`.trim() ||
undefined
}
/>
</div>
</fieldset>
Original file line number Diff line number Diff line change
@@ -31,7 +31,7 @@ export const SelectDropdownPattern: PatternComponent<SelectDropdownProps> = ({
})}
id={selectId}
{...register(selectId, { required })}
aria-describedby={error ? `${selectId} ${errorId}` : selectId}
aria-describedby={error ? errorId : undefined}
>
<option key="default" value="">
- Select -