Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add option labelId to improve a11y #971

Merged
merged 4 commits into from
Jan 18, 2022

Conversation

brosua
Copy link
Contributor

@brosua brosua commented Oct 22, 2021

Description

A new option labelId was introduced. If this option is set, the choices element contains aria-labeledby. If someone uses a screenreader, he/she will get information, which label is associated with the focused input.

This fixes #937.

Screenshots (if appropriate)

Types of changes

  • Chore (tooling change or documentation change)
  • Refactor (non-breaking change which maintains existing functionality)
  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.

@mtriff
Copy link
Member

mtriff commented Dec 15, 2021

I haven't done a full review yet, but this seems great! Could we enable this by default if the choices element has an id? I'm not very familiar with using aria-labeledby in real world use cases, so I'm not sure if it's safe to make that assumption.

@brosua
Copy link
Contributor Author

brosua commented Dec 17, 2021

Hi @mtriff ,
yes, that is possible. The id of the passed element can be determined and used by aria-labeledby. The choices option would override this value (edge cases).

@ridinghoodmedia

This comment has been minimized.

@mtriff

This comment has been minimized.

@ridinghoodmedia

This comment has been minimized.

@mtriff
Copy link
Member

mtriff commented Jan 12, 2022

@brosua, sorry for the delay. I just realized I never fully reviewed this. It looks good, I'd like to see the following before merging:

  • Rebase on the latest version of master
  • Add functionality to automatically set labelId if the passed element has an id attribute
  • Add tests confirming that the labelId is automatically set, as well as the case where no id attribute is available

@mtriff mtriff added the changes required Pull request requires changes before it can be merged label Jan 13, 2022
@brosua
Copy link
Contributor Author

brosua commented Jan 17, 2022

Hi @mtriff , I thought about your idea again.
We can´t set the labelId automatically. This is the id of the label. I doubt, that trying to identify the correct label to read the id, is a good idea.

@mtriff
Copy link
Member

mtriff commented Jan 17, 2022

That makes sense to me. This needs a unit test where labelId is set to something before merging.

@brosua
Copy link
Contributor Author

brosua commented Jan 18, 2022

Hi @mtriff
test case is added.

@mtriff mtriff added feature Pull request that adds new functionality and removed changes required Pull request requires changes before it can be merged labels Jan 18, 2022
@mtriff
Copy link
Member

mtriff commented Jan 18, 2022

Wonderful, thanks for the contribution!

@mtriff mtriff merged commit eb22895 into Choices-js:master Jan 18, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature Pull request that adds new functionality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Label isn´t recognized by screenreader
3 participants