feat(Form fields): improve accesibility of errors #1246
Conversation
|
Accessibility report ℹ️ You can run this locally by executing |
|
Deploy preview for mistica-web ready! ✅ Preview Built with commit 4e07e1a. |
|
Size stats
|
|
Screenshot tests report ✔️ All passing |
| if (!rawValue) { | ||
| return optional ? '' : texts.formFieldErrorIsMandatory || t(tokens.formFieldErrorIsMandatory); | ||
| } |
There was a problem hiding this comment.
I've found this code repeated in most input fields, I've moved it inside useFieldProps
| onBlur?.(e); | ||
| }, | ||
| inputRef: (input: HTMLInputElement | null) => register(name, {input, validator: validate}), | ||
| inputRef: (input: HTMLInputElement | null) => register(name, {input, validator: validate, label}), |
There was a problem hiding this comment.
I need the field label to be in the registrations map, to be able to use it when rendering the global form error: "Revisa los errores en los siguientes campos: nombre, email". See changes in form.tsx
| {label && ( | ||
| <Label | ||
| style={labelStyle} | ||
| error={error} | ||
| forId={id} | ||
| inputState={inputState} | ||
| shrinkLabel={shrinkLabel} | ||
| optional={!rest.required} | ||
| > | ||
| {label} | ||
| </Label> | ||
| )} |
There was a problem hiding this comment.
Moved the label before the input. This avoids a bug (I think it's a bug) in Safari/VoiceOver which made the label being read twice by screen reader (when focusing the input, and then as an independent element). This doesn't happen if the label appears before the input in the html.
| @@ -42,7 +42,6 @@ const TooltipContent = ({acceptedCards}: {acceptedCards: CardOptions}) => { | |||
| <Text2> | |||
| {texts.formCreditCardCvvTooltipAmex || t(tokens.formCreditCardCvvTooltipAmex)} | |||
| </Text2> | |||
| ) | |||
There was a problem hiding this comment.
in desktop, the text is not aligned in the same way as mobile, @aweell is this expected?
is it possible to align the text line to the middle of the icon? (compare with mobile screenshot to see the difference)
There was a problem hiding this comment.
Not expected, but also not correctly documented in the specs
the size of the icon could be 1lh to match the line height in mobile (16) but also in desktop (20) so even if the font-size increases appears aligned to the first line of text? this approach seems correct?
There was a problem hiding this comment.
changed size to 1lh (fallback to 1rem for old browsers not supporting lh unit)
# [16.1.0](v16.0.0...v16.1.0) (2024-09-27) ### Features * **BrandLoadingScreen:** improve lottie animations ([#1235](#1235)) ([e7dc87f](e7dc87f)), closes [/github.com/airbnb/lottie-web/issues/1184#issuecomment-411586909](https://github.com//github.com/airbnb/lottie-web/issues/1184/issues/issuecomment-411586909) * **Form fields:** allow blocking copy/cut ([#1251](#1251)) ([8fd2838](8fd2838)) * **Form fields:** improve accesibility of errors ([#1246](#1246)) ([e35a99e](e35a99e)) * **PhoneNumberField:** Custom formatter support + lazy load libphonenumber on demand ([#1244](#1244)) ([2ee88e9](2ee88e9)) * **PosterCard, DisplayMediaCard:** allow using srcSet for backgroundImage ([#1253](#1253)) ([3b3d85f](3b3d85f)) * **Rating, InfoRating:** new components ([#1196](#1196)) ([02c91f6](02c91f6)) * **SearchField, TextField:** support inputMode prop ([#1249](#1249)) ([fe31eca](fe31eca)) * **Sheet:** lazy load sheet implementations ([#1250](#1250)) ([40fecdd](40fecdd))
|
🎉 This PR is included in version 16.1.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
WEB-1958