**Feature:** GO HARD on a11y #922
Conversation
stereobooster
force-pushed
the
fix/inputs
branch
from
db3eec2
to
8b40d29
Compare
TejasQ
force-pushed
the
fix/inputs
branch
2 times, most recently
from
7cf6608
to
ef00b1d
Compare
src/useUniqueId/index.ts
Outdated
| import nanoid from "nanoid" | ||
| import { useRef } from "react" | ||
|
|
||
| export const useUniqueId = (defaultId: string | null = null) => { |
There was a problem hiding this comment.
export const useUniqueId = (defaultId: string | null = null) => React.useState(defaultId || nanoid)[0] as string;
|
Does snapshot tests fail because of this jestjs/jest#7094? UPD On the second run I got this jestjs/jest#8069, which is resolved in 24.3.0 |
src/Input/Input.Field.tsx
Outdated
| <Container fullWidth={fullWidth} withLabel={Boolean(label)}> | ||
| {shouldShowIconButton && renderButton()} | ||
| <Field | ||
| aria-labelledby={label ? `input-label-${id}` : undefined} |
There was a problem hiding this comment.
Also move it to Input/Input.tsx so
aria-describedby={hint ? `input-hint-${id}` : undefined}would be in the same file as
{hint && <Hint textId={`input-hint-${uniqueId}`}>{hint}</Hint>}| @@ -55,12 +55,15 @@ export const FormFieldControl = styled("div")(({ theme }) => ({ | |||
| ":hover": { | |||
| color: theme.color.text.default, | |||
| }, | |||
| " *": { | |||
There was a problem hiding this comment.
Is it the same as "& *": {?
There was a problem hiding this comment.
No. It is equivalent to "> *" instead. 🙂
|
|
||
| type ResizeOptions = "none" | "both" | "vertical" | "horizontal" | ||
|
|
||
| export interface TextareaProps extends DefaultProps { | ||
| /** What is the identifier of this textarea? */ | ||
| id?: string |
There was a problem hiding this comment.
tabIndex? Maybe introduce type AccessibleInput = { ... } and then reuse it across input, textarea, autocomplete 🤔
|
lock icon is not focusable I'm not sure how this suppose to work. Copy button is not focusable. |
src/Input/Input.Field.tsx
Outdated
| <Field | ||
| aria-labelledby={label ? `input-label-${id}` : undefined} | ||
| aria-describedby={hint ? `input-hint-${id}` : undefined} | ||
| aria-label={label} |
There was a problem hiding this comment.
do we need both aria-labelledby and aria-label?
Thanks! Co-Authored-By: TejasQ <hello@tej.as>
Summary
This PR fixes a number of issues with Inputs:
- Odd behavior when used without/with labels
- Fix spacing when an Input has an error AND a label
styledimportids for screen readersInputs accessible: withariaproperties and correct label handlingAutocompleteto use hooks and support IDsTo Do
TextareaOpen separate PRs for
SelectCheckboxSwitchToggleTo be tested
Me
localhost:6060Tester 1
Tester 2