segmentio / evergreen

🌲 Evergreen React UI Framework by Segment
https://evergreen.segment.com
MIT License
12.39k stars 832 forks source link

Components that accept `description`, `hint`, and `validationMessage` do not create `aria-describedby` associations. #1323

Closed mxmason closed 2 years ago

mxmason commented 3 years ago

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"
/>