a11y Support - Label

[joseglego]

I added this plugin to an open source project, and sincerely everything was going cool. But, I ran a Lighthouse Google Audit for Accessibility and I found that the label is missing

In my code I have:

const countries = [
  { label: "Chile", value: "CL" },
  { label: "Argentina", value: "AR" },
  { label: "Perú", value: "PE" },
  { label: "México", value: "MX" },
  { label: "Colombia", value: "CO" }
];

<SingleSelect
  defaultValue='CL'
  label="Country"
  placeholder="Country" 
  options={countries}
  onChange={country => handleClick(country)}   
  className='class__option'
/>

But, the audit outputted next text:

<input autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-3-input" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" value="" style="box-sizing: content-box; width: 2px; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit;">

You can see the screenshot of the error:

Also, you can check the code: https://github.com/raicerk/Chart-Tech-Trends/blob/master/src/Header/Header.jsx

And you can check the online version and Audit it: http://tech-trend.org/

I think, I read and I saw the aria data, but I think label can add a little more to your project

(At the moment which I reported this issue, I was fixing a11y errors and I noticed it and checkit in local version. The master version didn't have the label, but the local and next version will include it and were used to report this issue)

[iulianraduat]

I looked at tech-trend.org and your two selects does not have any label for selects. So it is normal for lighthouse to do not find any label associated to the input.

PS: You have two "Kotlin" columns in the last chart as it is wrote with two capitalization

[joseglego]

Well, as you can see, it's not my project, I'm just a collaborator 😥 . So, I can't decide when it'll be updated. But, I uploaded a test version, just for you 😬 .

You can check the code: https://github.com/joseglego/Chart-Tech-Trends/tree/test/select-a11y-support/src

You can audit the online version: https://chart-tech-trends-joseglego.netlify.com/

It generates the label, but it's just visually. It doesn't make the relation (the label tag should use a for attribute to make a relationship between the label tag and the input tag).

As I mentioned before it's only to help the a11y. In fact, maybe the label can have extra classes as parameters because maybe I just want as sr-only.

So, be my guest. I'll wait your answer :) and help you if required (was unnecessary close the issue without interaction)

[iulianraduat]

Hi @joseglego,

The version 6.4.2 should have the expected fix. Please test it and let me know if the problem is solved.

Thanks, Iulian

[iulianraduat]

Closed as no response from reporter in more than 15 days.