spectrum-web-components chore(slider): double click on slider handle to reset slider position

Description

Double click on slider handle to reset slider position

Related issue(s)

https://github.com/adobe/spectrum-web-components/issues/2065

Motivation and context

How has this been tested?

[ ] Test case 1
1. Go here
2. Do this
[ ] Test case 2
1. Go here
2. Do this

Screenshots (if appropriate)

https://github.com/adobe/spectrum-web-components/assets/8790510/f1a8432c-275e-4e12-9d4d-2a13d9c87059

Types of changes

[ ] Bug fix (non-breaking change which fixes an issue)
[x] New feature (non-breaking change which adds functionality)
[x] Breaking change (fix or feature that would cause existing functionality to change)
[ ] Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

[x] I have signed the Adobe Open Source CLA.
[x] My code follows the code style of this project.
[ ] If my change required a change to the documentation, I have updated the documentation in this pull request.
[x] I have read the CONTRIBUTING document.
[x] I have added tests to cover my changes.
[x] All new and existing tests passed.
[x] I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

Feb 01 '24 11:02 Rajdeepc

Branch preview

Visual regression test results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

Feb 01 '24 13:02 github-actions[bot]

Tachometer results

Chrome

action-bar permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	489 kB	68.17ms - 70.76ms	-	unsure 🔍 -3% - +3% -1.98ms - +2.15ms
branch	474 kB	67.78ms - 70.99ms	unsure 🔍 -3% - +3% -2.15ms - +1.98ms	-

action-menu permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	655 kB	159.95ms - 163.34ms	-	unsure 🔍 -1% - +2% -2.13ms - +2.44ms
branch	635 kB	159.96ms - 163.03ms	unsure 🔍 -2% - +1% -2.44ms - +2.13ms	-

combobox permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	706 kB	37.21ms - 37.57ms	-	unsure 🔍 -0% - +1% -0.16ms - +0.40ms
branch	695 kB	37.05ms - 37.48ms	unsure 🔍 -1% - +0% -0.40ms - +0.16ms	-

menu permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	480 kB	206.64ms - 210.76ms	-	unsure 🔍 -0% - +2% -0.97ms - +4.66ms
branch	465 kB	204.93ms - 208.78ms	unsure 🔍 -2% - +0% -4.66ms - +0.97ms	-

overlay permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	494 kB	53.76ms - 54.82ms	-	unsure 🔍 -0% - +2% -0.25ms - +1.08ms
branch	475 kB	53.47ms - 54.28ms	unsure 🔍 -2% - +0% -1.08ms - +0.25ms	-

picker permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	518 kB	545.63ms - 552.87ms	-	faster ✔ 0% - 2% 0.73ms - 13.64ms
branch	501 kB	551.10ms - 561.78ms	slower ❌ 0% - 2% 0.73ms - 13.64ms	-

popover permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	386 kB	21.24ms - 21.37ms	-	slower ❌ 1% - 2% 0.16ms - 0.33ms
branch	373 kB	21.00ms - 21.12ms	faster ✔ 1% - 2% 0.16ms - 0.33ms	-

slider permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	481 kB	101.89ms - 103.94ms	-	unsure 🔍 -1% - +1% -1.47ms - +1.19ms
branch	469 kB	102.21ms - 103.90ms	unsure 🔍 -1% - +1% -1.19ms - +1.47ms	-

split-button permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	722 kB	1860.85ms - 1863.21ms	-	unsure 🔍 -0% - -0% -4.76ms - -1.63ms
branch	708 kB	1864.19ms - 1866.25ms	unsure 🔍 +0% - +0% +1.63ms - +4.76ms	-

tooltip permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	560 kB	43.19ms - 43.95ms	-	unsure 🔍 -0% - +2% -0.18ms - +0.84ms
branch	539 kB	42.91ms - 43.58ms	unsure 🔍 -2% - +0% -0.84ms - +0.18ms	-

Firefox

action-bar permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	489 kB	147.43ms - 154.01ms	-	unsure 🔍 -2% - +4% -2.63ms - +6.63ms
branch	474 kB	145.47ms - 151.97ms	unsure 🔍 -4% - +2% -6.63ms - +2.63ms	-

action-menu permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	655 kB	320.04ms - 333.32ms	-	unsure 🔍 -1% - +4% -2.20ms - +12.80ms
branch	635 kB	317.90ms - 324.86ms	unsure 🔍 -4% - +1% -12.80ms - +2.20ms	-

combobox permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	706 kB	67.77ms - 75.15ms	-	slower ❌ 7% - 19% 4.55ms - 12.17ms
branch	695 kB	62.14ms - 64.06ms	faster ✔ 7% - 16% 4.55ms - 12.17ms	-

menu permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	480 kB	435.39ms - 447.05ms	-	unsure 🔍 -2% - +2% -6.96ms - +9.56ms
branch	465 kB	434.07ms - 445.77ms	unsure 🔍 -2% - +2% -9.56ms - +6.96ms	-

overlay permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	589 kB	114.23ms - 119.97ms	-	unsure 🔍 -1% - +5% -1.57ms - +5.29ms
branch	579 kB	113.36ms - 117.12ms	unsure 🔍 -4% - +1% -5.29ms - +1.57ms	-

picker permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	518 kB	1014.82ms - 1044.70ms	-	unsure 🔍 -0% - +3% -3.71ms - +27.71ms
branch	501 kB	1012.88ms - 1022.64ms	unsure 🔍 -3% - +0% -27.71ms - +3.71ms	-

popover permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	386 kB	42.42ms - 46.10ms	-	unsure 🔍 -5% - +7% -2.22ms - +3.26ms
branch	373 kB	41.71ms - 45.77ms	unsure 🔍 -7% - +5% -3.26ms - +2.22ms	-

slider permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	481 kB	200.14ms - 207.38ms	-	unsure 🔍 -3% - +2% -5.30ms - +4.98ms
branch	469 kB	200.26ms - 207.58ms	unsure 🔍 -2% - +3% -4.98ms - +5.30ms	-

split-button permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	722 kB	1635.23ms - 1643.29ms	-	faster ✔ 0% - 1% 3.32ms - 15.88ms
branch	708 kB	1644.04ms - 1653.68ms	slower ❌ 0% - 1% 3.32ms - 15.88ms	-

tooltip permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	654 kB	91.45ms - 96.59ms	-	slower ❌ 2% - 8% 1.70ms - 7.42ms
branch	641 kB	88.19ms - 90.73ms	faster ✔ 2% - 8% 1.70ms - 7.42ms	-

Feb 01 '24 13:02 github-actions[bot]

Please add tests cases for the various input modalities covered in this change to the PR description.

Feb 05 '24 12:02 Westbrook

screen-capture.webm Tested on simulator

Feb 08 '24 09:02 TarunAdobe

@Westbrook Slider Handle UI is updated according to S1 designs Screenshot 2024-02-14 at 3 48 28 PM

Feb 14 '24 10:02 Rajdeepc

Did you try listen to dblclick event to avoid timers here?

Feb 15 '24 08:02 spdev3000

Lighthouse scores

Category	Latest (report)	Main (report)	Branch (report)
Performance	0.97	0.97	0.98
Accessibility	1	1	1
Best Practices	1	1	1
SEO	1	0.92	0.92
PWA	1	1	1

What is this?

Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.

Transfer Size

Category	Latest	Main	Branch
Total	242.248 kB	228.573 kB	227.304 kB 🏆
Scripts	59.321 kB	54.409 kB	54.258 kB 🏆
Stylesheet	50.471 kB	42.302 kB	41.195 kB 🏆
Document	5.744 kB	5.15 kB	5.139 kB 🏆
Third Party	126.712 kB	126.712 kB	126.712 kB

Request Count

Category	Latest	Main	Branch
Total	42 🏆	43	43
Scripts	34 🏆	35	35
Stylesheet	5	5	5
Document	1	1	1
Third Party	2	2	2

Feb 21 '24 11:02 github-actions[bot]

Did you try listen to dblclick event to avoid timers here?

Yes thats the way to go forward to include on all the input modalities. The code should now listen to a dblClick event instead of handling it with a timer function. Thanks for pointing it out.

Feb 21 '24 11:02 Rajdeepc

@spdev3000 I've updated the slider to listen to a dblclick and reset the value accordingly. On a side note I am resetting the value of the slider on pressing enter key (once)... Let me know if this makes sense or is there some other way we want to deliver this. cc: @Westbrook

Feb 22 '24 11:02 TarunAdobe

lots of good stuff here. Can we add a storybook use case for providing a defaultValue via slider attribute? Also can we add a test, that compares the (provided from outside) defaultValue with the value after double click?

Regarding

On a side note I am resetting the value of the slider on pressing enter key (once)

Do you mean resetting when the slider handle has been focused and the user then press Enter key? Sounds ok to me for the use case, when editable=false (aka NumberField isn't visible).

Feb 22 '24 12:02 spdev3000

If it's not clear whether Escape or Enter or any other key might be used I vote for skipping it now and update later. If we decide to use Escape key - is it possible to stop bubbling the event when it has been detected and default value has been set? Otherwise we may do so from the outside of slider component.

Feb 23 '24 08:02 spdev3000

@spdev3000 I agree to you we can think of skipping it if we don't get the right direction from the accessibility team (I've dropped a message to start some discussion on this). And yes I think it is possible and we can stop the event from bubbling up but I'm not yet convinced if this is the right path. On a side note I was thinking about this - Can we add a storybook use case for providing a defaultValue via slider attribute? Currently we set the default value of the slider based on its initial value, i.e. we don't provide consumers a way to set the default value through an attribute in this implementation. I can be convinced to have that through attribute if you help my understand how that might be an important addition.

Feb 23 '24 08:02 TarunAdobe

@TarunAdobe Agree, stop the bubbling isn't a good idea, so feel free to follow a11y suggestions, what key to use.

I'd really appreciate a separate property/attribute default-value to be set independently of value - as we dynamically change sometimes the input value reg. to other circumstances and without a dedicated property/attribute - how should the slider know what is the original defaultValue to reset to? Also the defaultValue might change after initialization, but thats probably more an edge case.

Feb 23 '24 17:02 spdev3000

looks good to me so far - one question: If the slider is part of an overlaid popover or modal dialog and we want to leverage a default-value: If the user clicks and drags the slider handle and then presses Escape key to close/dismiss the outer popover overlay or the modal dialog - the slider would first reset its value and then the overlay would close, correct? If so: any idea how to let the user only close the overlay (containing the slider) and not reset the default value? Should we add another property to control/disable that (Escape=reset) behavior for such use cases?

Feb 26 '24 09:02 spdev3000

Valid question @spdev3000. You are right if the user drags the slider that is contained inside of an overlaid content and then presses escape the slider value will reset instead of closing the modal... This interaction pattern was suggested by someone from the accessibility team. And for your second question: I don't think it's possible to avoid reseting the value of the slider in case the slider has a default-value attribute and the user presses escape key. As for having a separate attribute/property to control this behaviour, It's possible to have it but we need a few more eyes on this... Maybe @Westbrook and @Rajdeepc can help us decide the correct path forward.

Feb 26 '24 09:02 TarunAdobe

As another requirement: the double click to default-value use case should also work for editable sliders, as most of our use cases have editable versions and need that feature working there as well.

Feb 28 '24 17:02 spdev3000