Skip to content

Remove role="textbox" from search input, per a11y practices. #941 #1285

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

Merged
merged 1 commit into from
Mar 3, 2025

Conversation

mlinnetz
Copy link

@mlinnetz mlinnetz commented Mar 3, 2025

Description

A typical Choices dropdown will add the attribute role="textbox" to the search textbox:
<input type="search" class="choices__input" role="textbox" >

According to a11y best practice, it's recommended to not add the role="textbox" to an text or search element . Rather, screen readers and other assistive technologies already infer that it's a textbox from the element itself.

https://www.w3.org/TR/wai-aria-1.2/#textbox

The intended use is for languages that do not have a text input element, or cases in which an element with different semantics is repurposed as a text field.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role

The textbox role is used to identify an element that allows the input of free-form text. Whenever possible, rather than using this role, use an element with type="text", for single-line input, or a <textarea> element for multi-line input.

In other words, both sources imply this should only be used on non-input elements.

Types of changes

  • Chore (tooling change or documentation change)
  • Refactor (non-breaking change which maintains existing functionality)
  • [X ] 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)

This PR removes setting a role="textbox" to the input type="search" element of a choices dropdown.

Checklist

  • My code follows the code style of this project.
  • I have added new tests for the bug I fixed/the new feature I added.
  • I have modified existing tests for the bug I fixed/the new feature I added.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.

@Xon Xon changed the title Issue#941: Remove role="textbox" from search input, per a11y practices. Remove role="textbox" from search input, per a11y practices. #941 Mar 3, 2025
@Xon Xon added the bugfix Pull request that fixes an existing bug label Mar 3, 2025
@Xon Xon changed the title Remove role="textbox" from search input, per a11y practices. #941 Remove role="textbox" from search input, per a11y practices. #941 Mar 3, 2025
@Xon Xon linked an issue Mar 3, 2025 that may be closed by this pull request
Copy link
Collaborator

@Xon Xon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@Xon Xon merged commit 1c6d610 into Choices-js:main Mar 3, 2025
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bugfix Pull request that fixes an existing bug
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Aria issues
2 participants