search

dipson88 / treeselectjs

Treeselect on vanilla JS
MIT License
83 stars 15 forks source link

Screen Readers cannot read the checkboxes #74

Open makatsis opened 1 year ago

makatsis commented 1 year ago

Hello, is there a way a screen reader to have the ability to read the check boxes?

makatsis commented 1 year ago

This problem may be solved if you could add "id" at the checkboxes and "for" at the labels of the checkboxes.

dipson88 commented 1 year ago

Hello @makatsis, did you try to use htmlAttr field of props? You can provide something for readers, and these attributes will be applied to every option, aria-label, or something like that. I'm not strong in screen readers, sorry if I am wrong.

makatsis commented 1 year ago

@dipson88 thank you for your answer What I want is to add at the label the attribute "for" and to the input the attribute "id"

For example, the following code the library gives <div tabindex="-1" title="Bulgaria" class="treeselect-list__item treeselect-list__item--checked treeselect-list__item--focused" style="padding-left: 40px;" level="1" group="false"><div class="treeselect-list__item-checkbox-container"><span class="treeselect-list__item-checkbox-icon"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span><input tabindex="-1" type="checkbox" input-id="Bulgaria" class="treeselect-list__item-checkbox"></div><label class="treeselect-list__item-label">Bulgaria</label></div>

what I would like to get <div tabindex="-1" title="Bulgaria" class="treeselect-list__item treeselect-list__item--checked treeselect-list__item--focused" style="padding-left: 40px;" level="1" group="false"><div class="treeselect-list__item-checkbox-container"><span class="treeselect-list__item-checkbox-icon"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 25" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span><input tabindex="-1" type="checkbox" input-id="Bulgaria" **id="Bulgaria"** class="treeselect-list__item-checkbox"></div><label **for="Bulgaria"** class="treeselect-list__item-label">Bulgaria</label></div>

See the text in . id="Bulgaria" for="Bulgaria" Thank you!

dipson88 commented 1 year ago

@makatsis I started work, but I faced a problem with Id. If we use Id/for like a name, we can't create a duplicated name. But the main goal was that we can create duplicated names but we should use unique values. I don't know how I can resolve this problem at this moment, maybe you can suggest something. And the second question, can the reader read tabindex = -1? because these checkboxes have tabindex = -1

dipson88 commented 1 year ago

As I understand we can't read this checkbox, because we can't select them with the help of a keyboard. We use arrows, but we always focus on input with a placeholder.

makatsis commented 1 year ago

And the second question, can the reader read tabindex = -1? because these checkboxes have tabindex = -1

@dipson88 you are right the screen reader cannot read the tabindex=-1, they skip it, and this might be the problem.