-
Notifications
You must be signed in to change notification settings - Fork 0
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
chore(form-field): form field and input refactor to provide context #857
base: master
Are you sure you want to change the base?
Conversation
Storybook for this build: https://ds.equisoft.io/pr-857/ |
Webapp for this build: https://ds.equisoft.io/pr-857/webapp/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
WIP (je poursuis plus tard)
aria-label={ariaLabel} | ||
aria-labelledby={ariaLabel ? undefined : ariaLabelledby} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
aria-labelledby takes precedence over all other methods of providing an accessible name, including aria-label, label and the element's inner text.
mdn webdocs - aria-labelledby
J'ignore si ça été discuté dans l'autre PR
On serait pas mieux de garder la même logique et d'affecter aria-label
seulement si il n'y a pas de aria-labelledby
ou juste de pas conditionner la propriété?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Je crois que selon ce que j'avais discuté avec @LarryMatte et surtout implémenté dans mes tests du form c'est qu'on veut que le aria-labelledby soit overridé par aria-label s'il y en a un de providé.
S'alignant dans l'ordre d'idée que label/aria-labelledby et aria-label sont mutuellement exclusifs!
packages/react/src/components/form/form-container/form-field-container.tsx
Outdated
Show resolved
Hide resolved
packages/react/src/components/form/form-container/form-field-container.tsx
Outdated
Show resolved
Hide resolved
packages/react/src/components/form/form-container/form-field-container.tsx
Outdated
Show resolved
Hide resolved
packages/react/src/components/form/form-container/form-field-container.tsx
Outdated
Show resolved
Hide resolved
packages/react/src/components/field/feedbacks/invalid-field-message.tsx
Outdated
Show resolved
Hide resolved
packages/react/src/components/field/feedbacks/invalid-field-message.tsx
Outdated
Show resolved
Hide resolved
packages/react/src/components/field/feedbacks/invalid-field-message.tsx
Outdated
Show resolved
Hide resolved
} | ||
`; | ||
|
||
export const FieldContainer: FunctionComponent<PropsWithChildren<FieldContainerProps>> = ({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[Question]
Devrait-il toujours s'appeler FieldContainer
? Tu as changé le nom du dossier pour field
, donc le component devrait se nommer maintenant Field
.
Qu'est-ce que tu en penses ?
DS-924
Description
Ici on vient faire un léger refactor de
FormField
afin qu'il puisse provide du context aux inputs enfants.Dans l'optique de mieux gérer la relation entre
label
etaria-label
au niveau de l'accessibilité.Si cette approche est apprové, il va rester à faire la migration sur chacune des composantes de controls.
Ma tentative précédente.
Tests fonctionnels