Accessibility issue when using Input with a prefix or suffix

[dave1976wilson]

When using a prefix or suffix on an Input component the label element is not rendered within the same div as the input element and therefore it fails an accessibility check - 'Form elements do not have associated labels'.

[andymantell]

I've had a quick look at this and the following JSX:

<Input
  id="input-with-prefix"
  label={{
    children: 'Amount, in pounds'
  }}
  name="amount"
  prefix={{
    children: '£'
  }}
  type="text"
/>

yields this HTML:

<div class="govuk-form-group">
    <label class="govuk-label" for="input-with-prefix">Amount, in pounds</label>
    <div class="govuk-input__wrapper">
        <div aria-hidden="true" class="govuk-input__prefix ">£</div>
        <input id="input-with-prefix" class="govuk-input" name="amount" type="text">
    </div>
</div>

Which looks fine to me. The label is associated with the input with the for/id combination. Label / input association isn't affected by being in the same div or not.

Can you give a bit more detail on what you're seeing? It's a little hard to comment without an example of your issue. What JSX are you using and what HTML does it give? What specifically is wrong with it?

[dave1976wilson]

Thank you for your reply. I seem to get the a11y issue with and without the prefix now. I was sure I only saw it when using the prefix. I have attached a screenshot of my html and the lighthouse report. I will assume I am not doing something correctly and will investigate. Thanks again.

[andymantell]

Could you paste the JSX that you're using too?

[andymantell]

Looking at your code - you don't have an id on the input actually, and you're getting things like undefined-hint elsewhere. My hunch would be that you've not specified an ID in your JSX that's calling this.

I wonder whether I should be doing something with this, like outputting a console error if required things are missing 🤔

[dave1976wilson]

Thank you for solving it! I have added an id and that has fixed the a11y issue. Thanks again.

[andymantell]

Ah excellent, I'm glad that sorted it for you.

Out of interest - would you have liked to receive notification somehow that this was the issue? Perhaps a console error or warning?

I'm thinking an error - the resultant html is basically malformed and you wouldn't want to ship it to produciton like that.

[dave1976wilson]

Yes, I guess I would have liked to have received a console warning or error so I didn't post my 'issue'.

[andymantell]

Thanks @dave1976wilson. I've logged this as #133