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

fix(slider): improve accessibility by correcting ARIA attributes and tab index - 18.1.x #14794

Merged
merged 8 commits into from
Oct 22, 2024

Conversation

georgianastasov
Copy link
Contributor

@georgianastasov georgianastasov commented Sep 19, 2024

Closes #14262

The slider control element now follows ARIA guidelines, including:

  • tabindex correct 0 value, ensuring the thumb components are correctly focusable within the tab order.
  • role set to slider for the thumbs focusable elements.
  • aria-valuenow for the current slider value, aria-valuemin for the minimum value, and aria-valuemax for the maximum value.
  • aria-valuetext is used when the current value is not user-friendly (e.g., converting numeric values to readable text).
  • aria-label is used to provide accessible labeling.
  • aria-orientation is set to "horizontal" by default.
  • aria-disabled to the thumb components when they are disabled to indicate the element's state.

The slider thumb component has been updated to follow ARIA accessibility guidelines as per WAI-ARIA slider pattern and the implementations outlined in the IgniteUI Web Components Slider specification.

Additional information (check all that apply):

  • Bug fix
  • New functionality
  • Documentation
  • Demos
  • CI/CD

Checklist:

  • All relevant tags have been applied to this PR
  • This PR includes unit tests covering all the new code (test guidelines)
  • This PR includes API docs for newly added methods/properties (api docs guidelines)
  • This PR includes feature/README.MD updates for the feature docs
  • This PR includes general feature table updates in the root README.MD
  • This PR includes CHANGELOG.MD updates for newly added functionality
  • This PR contains breaking changes
  • This PR includes ng update migrations for the breaking changes (migrations guidelines)
  • This PR includes behavioral changes and the feature specification has been updated with them

@georgianastasov georgianastasov added ❌ status: awaiting-test PRs awaiting manual verification slider ♿ a11y When the issue or PR is related to accessibility version: 18.1.x labels Sep 19, 2024
@georgianastasov georgianastasov linked an issue Oct 3, 2024 that may be closed by this pull request
@RivaIvanova RivaIvanova self-assigned this Oct 22, 2024
@RivaIvanova RivaIvanova added 💥 status: in-test PRs currently being tested ✅ status: verified Applies to PRs that have passed manual verification and removed ❌ status: awaiting-test PRs awaiting manual verification 💥 status: in-test PRs currently being tested labels Oct 22, 2024
@kacheshmarova kacheshmarova merged commit 16555a8 into 18.1.x Oct 22, 2024
5 checks passed
@kacheshmarova kacheshmarova deleted the ganastasov/fix-14262-18.1.x branch October 22, 2024 11:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
slider version: 18.1.x ♿ a11y When the issue or PR is related to accessibility ✅ status: verified Applies to PRs that have passed manual verification
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Slider accessibility issues
5 participants