feat(slider): add range mode accessibility support
#332
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Deploying with
|
| Latest commit: |
70e624b
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://564497f0.refinitiv-ui.pages.dev |
goremikins
reviewed
May 31, 2022
| @@ -598,18 +598,27 @@ export class Slider extends ControlElement { | |||
| return; | |||
| } | |||
|
|
|||
| this.changedThumb = event.target as HTMLDivElement; | |||
| const thumbName = this.changedThumb.getAttribute('name') as SliderDataName; | |||
There was a problem hiding this comment.
Can you detect the thumb name in different name, e.g. if you hold the reference to thumb:
private getThumbName (target: EventTarget): SliderDataName | null {
if (target === this.thumbFromRef.value) {
return SliderDataName.from;
}
// return ....
}
There was a problem hiding this comment.
Added ref to thumbs and refactor a bit on thumb related logics.
goremikins
reviewed
May 31, 2022
| * @param type from or to | ||
| * @returns validated from or to | ||
| */ | ||
| private validateRange (value: string, type: SliderDataName): string { |
There was a problem hiding this comment.
Maybe this function needs better comment. I am not sure what does it try to validate
There was a problem hiding this comment.
It was a wrapper function of validateFrom and validateTo. I've decided to remove it and improve code comment.
|
SonarCloud Quality Gate failed. |
Sarin-Udompanish
approved these changes
Jun 2, 2022
wsuwt
added a commit
that referenced
this pull request
Jun 6, 2022
) * chore: update package-lock * feat(slider): add arrow key support and add aria attributes * test: refactor test structure and add test for arrow key interactions * refactor: update variable names and fix typo * feat: add focus outline style to thumb * feat: remove input focus and focus thumb on drag * feat: simplify `validateNumber` util function * test: update snapshot * fix: detect keyboard focus state from host * fix: use tabIndex=1 instead * feat: introduce `active` attribute for thumb * feat: add logic to adds/removes `active` thumb focus style and add generic labels to slider and input * test: update snapshots * refactor: reuse `calculatePercentage` function * fix: add min more than max case * fix: remove invalid number checking on `calculatePercentage` * refactor: improve variable name * fix: add disabled back to number-field * refactor: replace the term `percentageValue` with thumbPosition for consistency * refactor: replace 5,10 z-index with 3,4 respectively and add comments why * refactor: remove `validateNumber` * fix: remove input label * test: extract private getters to a function and remove describe layer * refactor: rename `calculatePercentage` to `calculatePosition` * refactor: thumb logic and use `@state` * feat: ignore special characters onKeyDown * refactor: remove percentage reference and initialise * fix: add `defaultPrevented` onkeydown * feat(slider): add `range` mode accessibility support (#332) * 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]> * docs(slider): add slider a11y docs (#341) * 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]> Co-authored-by: wsuwt <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
rangemodeHomeandEndsupportType of change
Checklist