fix(forms): add message id to input aria-describedby attribute #1389
Conversation
| @@ -42,7 +42,7 @@ export const Input = React.forwardRef<HTMLInputElement, IInputProps>( | |||
| } | |||
|
|
|||
| if (fieldContext) { | |||
| combinedProps = fieldContext.getInputProps(combinedProps, { isDescribed: true }); | |||
There was a problem hiding this comment.
I found that the isDescribed option is true on multiple input components including Input. I found it was safe to remove after getInputProps was given a default value for the second function parameter. Are there any concerns with removing?
| setHint: (hintPresent: boolean) => setHasHint(hintPresent), | ||
| hasHint | ||
| hasHint, | ||
| setHasHint, |
There was a problem hiding this comment.
setHint was renamed to setHasHint for consistency and clarity in its function, the new setHasMessage also follows this naming pattern.
| @@ -42,8 +54,8 @@ export const Message = React.forwardRef<HTMLDivElement, IMessageProps>( | |||
|
|
|||
| let combinedProps = { validation, validationLabel, ...props }; | |||
|
|
|||
| if (fieldContext) { | |||
| combinedProps = fieldContext.getMessageProps(combinedProps); | |||
| if (typeof getMessageProps === 'function') { | |||
There was a problem hiding this comment.
This seems indicative of poor typing within the context, but might not be worth addressing here.
There was a problem hiding this comment.
I've cleaned this up and removed the typeof check, I was mistakenly thinking the Field context could be misused (however it is not publicly exported).
Description
This PR adds the
Messagecomponent ID in thearia-describedbyattribute for a givenInput(Select,Radio, etc) component within aField.Detail
There was an update made to
@zendeskgarden/container-fieldv2.1.0 which associates theMessagecomponent ID to thearia-describedbyattribute of a givenInputwhen it is present. Thearia-describedbyattribute is a combination of theHintandMessagecomponent IDs, however the ID of either of those components will not be added if they are not present as children of theFieldcomponent.Cross browser caveats
In Safari (using VoiceOver), a concatenated list of text node IDs are not all read, only the first item is. However, other browsers behave as expected.
Checklist
design updates are Garden Designer approved (add thedesigner as a reviewer)
demo is up-to-date (yarn start)renders as expected with reversed (RTL) directionrenders as expected with Bedrock CSS (?bedrock)