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.

Sign up for GitHub

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

Jump to bottom

feat(slider): add arrow key navigation support and accessible aria attributes #299

Merged
merged 36 commits into from
Jun 6, 2022
Merged

feat(slider): add arrow key navigation support and accessible aria attributes #299

merged 36 commits into from
Jun 6, 2022

Conversation

wsuwt
Copy link
Collaborator

@wsuwt wsuwt commented May 10, 2022 •
edited
Loading

Description

  • Add role="slider" to thumb
  • Make thumb focusable
  • Add thumb focus style based on active attribute
  • Thumb can be used to increase or decrease the slider value
  • When value changes by arrow keys, screen reader announce the current value

Type of change

  • New feature (non-breaking change which adds functionality)

Checklist

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • I have checked my code and corrected any misspellings

@wsuwt wsuwt self-assigned this May 10, 2022
@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented May 10, 2022 •
edited
Loading

Deploying with  Cloudflare Pages  Cloudflare Pages

Latest commit: 362c289
Status: ✅  Deploy successful!
Preview URL: https://516fd099.refinitiv-ui.pages.dev

View logs

@wsuwt wsuwt marked this pull request as ready for review May 17, 2022 11:49
goremikins
goremikins reviewed May 17, 2022
View reviewed changes
packages/elemental-theme/src/custom-elements/ef-slider.less Show resolved Hide resolved
packages/elements/src/slider/index.ts Outdated Show resolved Hide resolved
packages/elements/src/slider/index.ts Outdated Show resolved Hide resolved
packages/elements/src/slider/index.ts Outdated Show resolved Hide resolved
packages/elements/src/slider/index.ts Outdated Show resolved Hide resolved
packages/elements/src/slider/index.ts Outdated Show resolved Hide resolved
packages/elements/src/slider/index.ts Outdated Show resolved Hide resolved
packages/elements/src/slider/index.ts Outdated Show resolved Hide resolved
packages/elements/src/slider/index.ts Show resolved Hide resolved
packages/elements/src/slider/utils.ts Outdated Show resolved Hide resolved
@wsuwt wsuwt requested a review from goremikins May 18, 2022 08:10
goremikins
goremikins reviewed May 18, 2022
View reviewed changes
packages/elements/src/slider/__test__/slider.event.test.js Outdated Show resolved Hide resolved
packages/elements/src/slider/__test__/slider.event.test.js Outdated Show resolved Hide resolved
packages/elements/src/slider/__test__/slider.keyboard.test.js Outdated Show resolved Hide resolved
packages/elements/src/slider/__test__/slider.number-field.test.js Outdated Show resolved Hide resolved
packages/elements/src/slider/index.ts Outdated Show resolved Hide resolved
packages/elements/src/slider/index.ts Outdated Show resolved Hide resolved
packages/elements/src/slider/index.ts Outdated Show resolved Hide resolved
packages/elements/src/slider/index.ts Outdated Show resolved Hide resolved
packages/elements/src/slider/index.ts Outdated Show resolved Hide resolved
@wsuwt wsuwt force-pushed the feat/slider-a11y branch from 8523a20 to 2f0fe61 Compare May 18, 2022 10:54
@wsuwt wsuwt force-pushed the feat/slider-a11y branch from 2f0fe61 to 782a816 Compare May 18, 2022 10:58
@wsuwt wsuwt requested a review from Sarin-Udompanish May 19, 2022 06:48
@wsuwt wsuwt requested a review from goremikins May 19, 2022 07:02
@bualoy-napat
Copy link
Collaborator

I already tested with JAWS and Chrome, Edge, Firefox. The outcome was correct as we expected.

goremikins
goremikins previously approved these changes May 19, 2022
View reviewed changes
Copy link
Contributor

@goremikins goremikins left a comment

Choose a reason for hiding this comment

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

Please resolve latest minor formatting issues as per my comments and this is ready to go

@wsuwt wsuwt added the accessibility Accessibility improvement label May 20, 2022
wsuwt and others added 2 commits June 2, 2022 10:30
@wsuwt @phetw
feat(slider): add range mode accessibility support (#332)
51a2291 
* feat(slider): add `range` mode accessibility support

* feat(slider): hide number-field inputs from tab sequence and screen reader

* fix: switch Home and End logic

* docs: remove deupllicated demo

* refactor: improve code readability

* refactor: keeping thumb as refs

Co-authored-by: wsuwt <[email protected]>
@wsuwt @phetw
docs(slider): add slider a11y docs (#341)
362c289 
* feat(slider): add `range` mode accessibility support

* feat(slider): hide number-field inputs from tab sequence and screen reader

* fix: switch Home and End logic

* docs: remove deupllicated demo

* docs(slider): add slider a11y docs

Co-authored-by: wsuwt <[email protected]>
@wsuwt wsuwt dismissed stale reviews from Sarin-Udompanish and goremikins via 362c289 June 2, 2022 04:20
@sonarqubecloud
Copy link

sonarqubecloud bot commented Jun 2, 2022

SonarCloud Quality Gate failed.    Quality Gate failed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 5 Code Smells

0.0% 0.0% Coverage
0.0% 0.0% Duplication

@wsuwt wsuwt requested a review from Sarin-Udompanish June 6, 2022 04:11
@wsuwt wsuwt merged commit 056a45b into v6 Jun 6, 2022
@wsuwt wsuwt deleted the feat/slider-a11y branch June 6, 2022 04:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Sarin-Udompanish Sarin-Udompanish Sarin-Udompanish approved these changes

@goremikins goremikins goremikins left review comments

Assignees

@wsuwt wsuwt

Labels
accessibility Accessibility improvement
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@wsuwt @bualoy-napat @goremikins @Sarin-Udompanish @phetw