fix(Input): Clarification that developers should use ref with Input. Add a new example for Storybook.
#1526
Conversation
…t`. Add a new example for Storybook.
nikitaorliak-cengage
added
the
ready for review
nikitaorliak-cengage
requested review from
silvalaura and
a team
as code owners
🦋 Changeset detectedLatest commit: 9383400 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Scheduled a meeting to discuss this as a team, so lets put this on hold for now. |
| @@ -170,6 +170,8 @@ export function Example() { | |||
| If an input has an `errorMessage`, the input will be styled to highlight it's error state and the error message will appear below the input field. | |||
| If an error message is present, it will replace the helper text. Can be a node or a string. | |||
|
|
|||
| For best practices, use a `ref` on the input to enhance usability when handling an `errorMessage`. | |||
There was a problem hiding this comment.
Maybe we can move this sentence to go right after While React Magma provides the error styling, it is up to the consumer app to handle the validation and we can elaborate a little more
It would read something like:
While React Magma provides the error styling, it is up to the consumer app to handle the validation. We recommend using a
refon the input for accessibility.For short forms with an error, clicking submit should bring the focus back to the input with an error. For long forms, we recommend using an alert to combine the errors and focus should be moved to the alert. See example in Form.
silvalaura
removed
the
ready for review
…/react-magma into fix/Input-error-message-not-read
| header="Form Heading" | ||
| description="Some Form Description" | ||
| errorMessage="Some Form Error" | ||
| errorMessage={errorMessage} |
There was a problem hiding this comment.
This looks good, the only thing is that the alert does not get focus / the message is not announced with a screenreader
There was a problem hiding this comment.
This has not been addressed yet: https://jam.dev/c/7e5f61b7-cf01-4511-acdc-409d1b8760e0
I think I expect the focus to move to the alert so that the error message can be read. Maybe it needs to be assertive
There was a problem hiding this comment.
Just missing addressing this, since this is what we describe in the docs:
#1526 (comment)
silvalaura
added
the
ready for review
Issue: #1124
What I did
Add clarification that developers should use
refwithInput. Add a new example for Storybook.Screenshots:
Checklist
How to test
Open
Inputin the docs -> OpenError message-> Leave the input blank and clickSubmit-> Check that the input has focus.