feat(forms): back `MultiThumbSlider` with new `useSlider` hook #1431

jzempel · 2022-10-10T16:56:07Z

Description

Event and accessibility logic are now contained in @zendeskgarden/container-slider. This includes feature 🚀 support for the new jump prop that supports WAI-ARIA page up/down keyboard navigation.

Detail

Consideration was given to adding uncontrolled component support (offered by the useSlider hook), but without backing inputs, this makes no sense for the current component. Props for future consideration include:

defaultMinValue and defaultMaxValue uncontrolled values connected to backing <input hidden> elements (see reverted 8e20ec4)
minValueText and maxValueText for optional clarification of aria-valuenow (see https://www.w3.org/WAI/ARIA/apg/patterns/slidertwothumb/#wai-aria-roles-states-and-properties-18)

Checklist

👌 ~~design updates will be Garden Designer approved (add the designer as a reviewer)~~
🌐 demo is up-to-date (yarn start)
⬅️ renders as expected with reversed (RTL) direction
🤘 renders as expected with Bedrock CSS (?bedrock)
💂‍♂️ includes new unit tests
♿ tested for WCAG 2.1 AA compliance
📝 tested in Chrome, Firefox, Safari, and Edge

…nputs

Francois-Esquire · 2022-10-10T19:51:04Z

packages/forms/src/elements/MultiThumbRange.spec.tsx

@@ -438,7 +456,7 @@ describe('MultiThumbRange', () => {
      const { getAllByTestId } = render(<MultiThumbRange minValue={50} maxValue={40} />);
      const thumb = getAllByTestId('thumb')[1];

-      expect(thumb).toHaveStyle('left: 50px');
+      expect(thumb).toHaveStyle('left: 40px');


I wouldn't have expected this to change, @jzempel do you know why?

Yes, in the new hook we picked a consistent approach for applying out-of-bounds logic – that is, start-to-end (the minimum will determine where the maximum can start rather than the other way around). The previous logic was inconsistent in MultiThumbRange.

Francois-Esquire · 2022-10-10T20:10:44Z

packages/forms/src/elements/MultiThumbRange.tsx

+  (
+    {
+      min = MIN,
+      max = MAX,


Do we need to define a default value for min and max here if the defaultProps were set?

This helps avoid type-checked conditional logic for calculations that follow.

coveralls · 2022-10-10T21:19:45Z

Coverage increased (+0.02%) to 96.12% when pulling fabcbac on jzempel/use-slider into 0e6b986 on main.

jgorfine-zendesk

Hey @jzempel — overall, the code looks great; however, when I did some basic testing on the latest build, I ran into a couple of issues.

Dragging thumbs makes track fill disappear at ends of range

This happens both at the min and max:

Screen.Recording.2022-10-11.at.11.47.29.AM.mov

VoiceOver doesn't stay on thumb(s) when trying to increment or decrement with the arrow keys

I had observed similar behavior when I was working on the container originally, and I specifically noted that it went away with your version. Not totally sure what could be happening here:

Screen.Recording.2022-10-11.at.11.45.55.AM.mov

Wondering if maybe it has to do with the DOM structure, now that it's inside of a Field?

Keyboard functionality does appear to be working fine, when VoiceOver isn't involved. 👍

jgorfine-zendesk · 2022-10-11T15:43:22Z

packages/forms/src/types/index.ts

@@ -159,12 +159,14 @@ export interface IMultiThumbRangeProps extends Omit<HTMLAttributes<HTMLDivElemen
  min?: number;
  /** Sets the maximum permitted value */
  max?: number;
-  /** Sets the minimum thumb input value */
+  /** Sets the minimum thumb value */
  minValue?: number;


Does it make sense to pull in all of these types from the container types? To ensure a 1:1 match.

e.g.,
minValue?: IUseSliderProps['minValue']

etc.

Not a bad thought. But given that we've never done this in the past, I'd rather not establish a new pattern without added consideration and intention.

jzempel · 2022-10-11T18:00:34Z

@jgorfine-zendesk

Dragging thumbs makes track fill disappear at ends of range

I'm not able to reproduce. What are the characteristics of your environment? Also, do you have the same issues with the current https://zendeskgarden.github.io/react-components/?path=/story/packages-forms-multithumbrange--multi-thumb-range

VoiceOver doesn't stay on thumb(s) when trying to increment or decrement with the arrow keys

Are you able to reproduce with https://zendeskgarden.github.io/react-components/?path=/story/packages-forms-multithumbrange--multi-thumb-range

If there are no regressions, we may want to pick these up as follow-on issues.

jzempel · 2022-10-11T18:26:55Z

@jgorfine-zendesk

VoiceOver doesn't stay on thumb(s) when trying to increment or decrement with the arrow keys

p.s. just checking... are you using the VO+arrow keys? For example, on this page – https://garden.zendesk.com/components/multi-thumb-range – I need opt+rightarrow in order to operate the slider when VO is active.

jgorfine-zendesk · 2022-10-11T21:21:50Z

Are you able to reproduce with https://zendeskgarden.github.io/react-components/?path=/story/packages-forms-multithumbrange--multi-thumb-range

@jzempel I'll double-check and let you know. 👍 Totally agree that if this isn't something new, we shouldn't necessarily address it now.

p.s. just checking... are you using the VO+arrow keys? For example, on this page – https://garden.zendesk.com/components/multi-thumb-range – I need opt+rightarrow in order to operate the slider when VO is active.

I was using the arrow keys by themselves. This is how I had tested the Slider container, too.

jgorfine-zendesk · 2022-10-13T15:16:27Z

Hey @jzempel — following up on the two behaviors I flagged earlier this week.

Dragging thumbs makes track fill disappear at ends of range

Just tested the odd dragging behavior again on staging. Here's a fresh video of what I was seeing:

Drag.functionality.working.not.as.expected.on.staging.Storybook.mov

Interestingly enough, I experienced the same odd behavior on prod:

Reproducing.drag.functionality.on.prod.Storybook.mov

However, I wasn't seeing this behavior at all on the Garden website, on prod:

Drag.functionality.working.as.expected.on.Garden.website.mov

This leads me to think that, maybe, the issue is with the Storybook demo itself.

tl;dr: This probably is something we can revisit in the future.

VoiceOver doesn't stay on thumb(s) when trying to increment or decrement with the arrow keys

Just tested this again on staging —both with and without the VO keys. In this video, I'm interacting with the min value thumb with only the arrow keys, and then I'm interacting with the max value thumb with the arrow keys + VO keys:

Arrow.keys.with.and.without.VO.keys.have.strange.behavior.on.staging.mov

On prod, I was able to navigate the existing Multi-thumb range sample using only the arrow keys:

Arrow.keys.work.without.VO.keys.on.Storybook.prod.mov

Same for the Garden website, on prod:

Arrow.keys.work.without.VO.keys.on.Garden.website.prod.mov

This leads me to think that something is going on with the keyboard functionality code, or, perhaps, the DOM structure when the Multi-thumb range lives inside of a Field.

tl;dr: We may want to look into this a bit more now, as it potentially is a regression in functionality. 💥

jgorfine-zendesk · 2022-10-13T15:41:23Z

As a point of comparison, here's what I experienced when I tested the component on staging, via Assistiv Labs. In each of these tests, I had the screen reader on, and navigated using the left and right arrow keys only.

Chrome x JAWS (Windows)

Multi-thumb.range.-.Chrome.x.JAWS.mov

Chrome x NVDA (Windows)

Multi-thumb.range.-.Chrome.x.NVDA.mov

…ard nav

jzempel · 2022-10-13T22:19:49Z

@jgorfine-zendesk I applied the 0.1.1 container fix and VO+arrow keys seem to be working as expected, on Safari, without screenreader drift.

jgorfine-zendesk

Hey @jzempel, I have some good news and some bad news.

The good news

The Multi-thumb range appears to be working as intended on the following browser and screen reader combinations:

VoiceOver x Safari

Multi-thumb.range.staging.Safari.x.VoiceOver.mov

NVDA x Chrome (via AssistivLabs)

Multi-thumb.range.staging.Chrome.x.NVDA.mov

JAWS x Chrome (via AssistivLabs)

Multi-thumb.range.staging.Chrome.x.JAWS.mov

The bad news

When I tested the staging instance on Chrome with VoiceOver on my local machine, I was completely unable to operate either slider with the keyboard —both with and without the VO keys.

Here's a video in which the keyboard navigation is working just fine, without VoiceOver...and then becomes completely inoperable with it:

Multi-thumb.range.staging.Chrome.x.VoiceOver.mov

Moving forward

Since it's likely that someone using VoiceOver will be using it with Safari (per the WebAIM Screen Reader Survey #9, conducted last year), and Safari + VoiceOver appears to be working as expected on both of our machines, I say we go ahead and merge these changes in. We could always loop in @zendesk-lzingarelli for additional testing and QA and do a fast followup if the bug rears its ugly head again.

Screenreader drift addressed in container code

jzempel · 2022-10-18T18:18:11Z

When I tested the staging instance on Chrome with VoiceOver on my local machine, I was completely unable to operate either slider with the keyboard —both with and without the VO keys.

@jgorfine-zendesk at some point we might want to do a setup comparison. Chrome works fine for me with VO activated – as long as I hold down the <option> key.

jzempel added 8 commits September 26, 2022 14:52

Initial useSlider hook replacement

ab0bb6f

Update testing

0d4394a

Add new uncontrolled and jump props

2c5b83d

Add uncontrolled and jump testing

0532c84

Add container-slider dependency

bdc739c

Uncontrolled does not make sense for this component without backing i…

8e20ec4

…nputs

Remove non-relevant documentation

4f4e330

Merge branch 'main' into jzempel/use-slider

2d7e9b9

jzempel added the PR: New Feature 🚀 label Oct 10, 2022

jzempel requested a review from a team as a code owner October 10, 2022 16:56

jzempel requested a review from jgorfine-zendesk October 10, 2022 16:57

zendesk-garden deployed to staging October 10, 2022 17:26 View deployment

Francois-Esquire reviewed Oct 10, 2022

View reviewed changes

Merge branch 'main' into jzempel/use-slider

5af67b8

zendesk-garden deployed to staging October 10, 2022 21:25 View deployment

jgorfine-zendesk previously requested changes Oct 11, 2022

View reviewed changes

Francois-Esquire approved these changes Oct 12, 2022

View reviewed changes

jzempel mentioned this pull request Oct 13, 2022

fix(slider): prevent default screenreader cursor navigation zendeskgarden/react-containers#486

Merged

4 tasks

jzempel added 2 commits October 13, 2022 18:13

Upgrade to container-slider 0.1.1 with fixes for screenreader + keybo…

e222a39

…ard nav

Merge branch 'main' into jzempel/use-slider

fabcbac

jzempel requested a review from jgorfine-zendesk October 13, 2022 22:18

zendesk-garden deployed to staging October 13, 2022 22:49 View deployment

jgorfine-zendesk reviewed Oct 18, 2022

View reviewed changes

jzempel merged commit fb5ed0f into main Oct 18, 2022

jzempel deleted the jzempel/use-slider branch October 18, 2022 18:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(forms): back `MultiThumbSlider` with new `useSlider` hook #1431

feat(forms): back `MultiThumbSlider` with new `useSlider` hook #1431

jzempel commented Oct 10, 2022

Francois-Esquire Oct 10, 2022

jzempel Oct 10, 2022

Francois-Esquire Oct 10, 2022

jzempel Oct 10, 2022

coveralls commented Oct 10, 2022 •

edited

jgorfine-zendesk left a comment •

edited

jgorfine-zendesk Oct 11, 2022

jzempel Oct 11, 2022

jzempel commented Oct 11, 2022 •

edited

jzempel commented Oct 11, 2022

jgorfine-zendesk commented Oct 11, 2022

jgorfine-zendesk commented Oct 13, 2022

jgorfine-zendesk commented Oct 13, 2022

jzempel commented Oct 13, 2022

jgorfine-zendesk left a comment

jzempel commented Oct 18, 2022

feat(forms): back MultiThumbSlider with new useSlider hook #1431

feat(forms): back MultiThumbSlider with new useSlider hook #1431

Conversation

jzempel commented Oct 10, 2022

Description

Detail

Checklist

Francois-Esquire Oct 10, 2022

Choose a reason for hiding this comment

jzempel Oct 10, 2022

Choose a reason for hiding this comment

Francois-Esquire Oct 10, 2022

Choose a reason for hiding this comment

jzempel Oct 10, 2022

Choose a reason for hiding this comment

coveralls commented Oct 10, 2022 • edited

jgorfine-zendesk left a comment • edited

Choose a reason for hiding this comment

Dragging thumbs makes track fill disappear at ends of range

VoiceOver doesn't stay on thumb(s) when trying to increment or decrement with the arrow keys

jgorfine-zendesk Oct 11, 2022

Choose a reason for hiding this comment

jzempel Oct 11, 2022

Choose a reason for hiding this comment

jzempel commented Oct 11, 2022 • edited

jzempel commented Oct 11, 2022

jgorfine-zendesk commented Oct 11, 2022

jgorfine-zendesk commented Oct 13, 2022

Dragging thumbs makes track fill disappear at ends of range

VoiceOver doesn't stay on thumb(s) when trying to increment or decrement with the arrow keys

jgorfine-zendesk commented Oct 13, 2022

Chrome x JAWS (Windows)

Chrome x NVDA (Windows)

jzempel commented Oct 13, 2022

jgorfine-zendesk left a comment

Choose a reason for hiding this comment

The good news

VoiceOver x Safari

NVDA x Chrome (via AssistivLabs)

JAWS x Chrome (via AssistivLabs)

The bad news

Moving forward

jzempel commented Oct 18, 2022

feat(forms): back `MultiThumbSlider` with new `useSlider` hook #1431

feat(forms): back `MultiThumbSlider` with new `useSlider` hook #1431

coveralls commented Oct 10, 2022 •

edited

jgorfine-zendesk left a comment •

edited

jzempel commented Oct 11, 2022 •

edited