-
Notifications
You must be signed in to change notification settings - Fork 91
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
fix(forms): add message id to input aria-describedby attribute #1389
Changes from 4 commits
64d2e48
264e0aa
0634935
89950d1
5c6e012
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -24,26 +24,36 @@ export interface IFieldProps extends HTMLAttributes<HTMLDivElement> { | |
export const Field = React.forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>( | ||
(props, ref) => { | ||
const [hasHint, setHasHint] = useState(false); | ||
const [hasMessage, setHasMessage] = useState(false); | ||
const [isLabelActive, setIsLabelActive] = useState(false); | ||
const [isLabelHovered, setIsLabelHovered] = useState(false); | ||
const multiThumbRangeRef = useRef<HTMLDivElement>(null); | ||
const getMessageProps = (messageProps: any) => ({ role: 'alert', ...messageProps }); | ||
const { getInputProps, ...propGetters } = useField(props.id); | ||
const { getInputProps, getMessageProps, ...propGetters } = useField(props.id); | ||
const fieldProps = useMemo( | ||
() => ({ | ||
...propGetters, | ||
getMessageProps, | ||
getInputProps: (options: any, describeOptions: any = {}) => | ||
getInputProps(options, { ...describeOptions, isDescribed: hasHint, hasMessage }), | ||
getMessageProps: (options: any) => getMessageProps({ role: 'alert', ...options }), | ||
isLabelActive, | ||
setIsLabelActive, | ||
isLabelHovered, | ||
setIsLabelHovered, | ||
multiThumbRangeRef, | ||
getInputProps: (options: any, describeOptions: any) => | ||
getInputProps(options, { ...describeOptions, isDescribed: hasHint }), | ||
setHint: (hintPresent: boolean) => setHasHint(hintPresent), | ||
hasHint | ||
hasHint, | ||
setHasHint, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
hasMessage, | ||
setHasMessage, | ||
multiThumbRangeRef | ||
}), | ||
[propGetters, isLabelActive, isLabelHovered, hasHint, getInputProps] | ||
[ | ||
propGetters, | ||
getInputProps, | ||
getMessageProps, | ||
isLabelActive, | ||
isLabelHovered, | ||
hasHint, | ||
hasMessage | ||
] | ||
); | ||
|
||
return ( | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,7 +5,7 @@ | |
* found at http://www.apache.org/licenses/LICENSE-2.0. | ||
*/ | ||
|
||
import React from 'react'; | ||
import React, { useEffect } from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { useText } from '@zendeskgarden/react-theming'; | ||
|
||
|
@@ -25,9 +25,21 @@ import { | |
*/ | ||
export const Message = React.forwardRef<HTMLDivElement, IMessageProps>( | ||
({ validation, validationLabel, children, ...props }, ref) => { | ||
const fieldContext = useFieldContext(); | ||
const { hasMessage, setHasMessage, getMessageProps } = useFieldContext() || {}; | ||
const type = useInputContext(); | ||
|
||
useEffect(() => { | ||
if (!hasMessage) { | ||
setHasMessage!(true); | ||
} | ||
|
||
return () => { | ||
if (hasMessage) { | ||
setHasMessage!(false); | ||
} | ||
}; | ||
}, [hasMessage, setHasMessage]); | ||
|
||
let MessageComponent; | ||
|
||
if (type === 'checkbox') { | ||
|
@@ -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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This seems indicative of poor typing within the context, but might not be worth addressing here. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I've cleaned this up and removed the |
||
combinedProps = getMessageProps!(combinedProps); | ||
} | ||
|
||
const ariaLabel = useText(Message, combinedProps, 'validationLabel', validation as string); | ||
|
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.
I found that the
isDescribed
option istrue
on multiple input components includingInput
. I found it was safe to remove aftergetInputProps
was given a default value for the second function parameter. Are there any concerns with removing?