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

[feature] Improve input implicit roles #1028

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

lb-
Copy link
Contributor

@lb- lb- commented Oct 23, 2024

Adopt the latest ARIA standards (1.2) for input elements' implicit roles.

Details

  • Add support for input type="number" with implicit role "spinbutton"
  • Add better support for input types including checks for when list attribute is used
  • Correctly set role of search input type to searchbox (or combobox for list)
  • Ensure that input types with no corresponding role are correctly catered for & tested

References

Considerations

  • This may potentially change expectations for some users, I was not sure if this would be best behind an option flag or maybe be in a future major release bump?
  • This aligns with W3C ARIA, however, I have noticed that some browsers will have slightly different implicit roles for elements. e.g. Chrome uses 'colorwell' for the input="color", Safari seems to ignore the 'no corresponding role' for some inputs and uses text.
  • However, with the rule enforcing 'no-redundant-roles', I feel that it makes more sense to have less errors and allow developers to set the role as suitable for their target browsers.

Encode implicit roles for `select` elements based on roles defined in https://www.w3.org/TR/html-aria/#el-select

- `select` (with a multiple attribute or a size attribute having value greater than 1) will have the implicit role 'listbox'
- `select` (with NO multiple attribute and NO size attribute having value greater than 1) will have the implicit role 'combobox'

Fixes jsx-eslint#949
Adopt the latest ARIA standards (1.2) for input elements' implicit roles.

- Add support for input type="number" with implicit role "spinbutton"
- Add better support for `input` types including checks for when list attribute is used
- Correctly set role of search input type to searchbox (or combobox for list)
- Ensure that input types with no corresponding role are correctly catered for & tested

See https://www.w3.org/TR/html-aria/#el-input-text-list
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#technical_summary

Fixes jsx-eslint#686
@lb- lb- changed the title Feature/686 improve input implicit roles [feature] Improve input implicit roles Oct 23, 2024
@ljharb ljharb marked this pull request as draft October 25, 2024 23:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant