Because description, hint, and validationMessage add extra information to the various *Field components, and the relationship between the input and the text is visually apparent, those associations should also be reflected in the accessibility tree.
Currently, authors have to pass JSX as the value of description, hint, and validationMessage if they want to associate these hints with their inputs. Improving the markup generated when the author supplies hint, description, or validation messages as strings will make it easier for authors to create accessible forms.
(Contrived) examples
if I write the following code:
<TextInputField
label="Token"
hint="Tokens are comprised of 3 words separated by hyphens"
/>
I see the hint text I expect in the rendered DOM, but there is no aria-describedby attribute connecting the text input to the hint. This means that a user of assistive technology could miss the hint that tells them about the shape of the token.
Again, it's possible to create aria-describedby relationships if I write my own JSX, but it's a lot of extra author code if several or more inputs have hint text.
const hintText = (
<Text
is="div"
id="token-hint"
marginTop={8}
>
Tokens are comprised of 3 words separated by hyphens
</Text>
)
<TextInputField
label="Token"
hint={hintPane}
aria-describedby="token-hint"
/>
Because
description
,hint
, andvalidationMessage
add extra information to the various*Field
components, and the relationship between the input and the text is visually apparent, those associations should also be reflected in the accessibility tree.Currently, authors have to pass JSX as the value of
description
,hint
, andvalidationMessage
if they want to associate these hints with their inputs. Improving the markup generated when the author supplies hint, description, or validation messages as strings will make it easier for authors to create accessible forms.(Contrived) examples
if I write the following code:
I see the hint text I expect in the rendered DOM, but there is no
aria-describedby
attribute connecting the text input to the hint. This means that a user of assistive technology could miss the hint that tells them about the shape of the token.Again, it's possible to create
aria-describedby
relationships if I write my own JSX, but it's a lot of extra author code if several or more inputs have hint text.