feat(touch-action): adding touch action none to draggable components (#3656)

* feat(touch-action): adding touch action to draggable components

* chore(touch-action): restoring some metadata files

* chore(touch-action): token files

* chore(touch-action): adding token files)

* chore(touch-action): restoring token css files

* chore(touch-action): removing token dist css files

* feat(touch-action): adding touch action to slider handle

* chore(touch-action): fix typos in changeset

* feat(touch-action): adding user select none to color area

Author: aramos-adobe

.changeset/thick-ears-win.md

@@ -0,0 +1,15 @@
+---
+"@spectrum-css/colorhandle": minor
+"@spectrum-css/colorslider": minor
+"@spectrum-css/colorarea": minor
+"@spectrum-css/colorwheel": minor
+"@spectrum-css/slider": minor
+---
+
+### Including the touch action rule for draggable content
+
+The slider, color slider, color area, color wheel, color handle all deserve to have their touch-action property managed so that trying to set the value of those interfaces doesn't cause page scrolling in touch context.
+
+Adding `touch-action: none` to a slider or any draggable component is necessary to prevent the browser's default touch behaviors—such as scrolling, pinch-zooming, or double-tap zooming from interfering with the component's intended interaction.
+
+These components also include `user-select: none` to prevent selection or highlighting of any text elements.

components/colorarea/index.css

@@ -16,7 +16,7 @@
 
 	/* @TODO: leveraging the rgb token in this case to achieve the desired border color implementation as rgb + opacity are required by the `rgba` function. */
 	--spectrum-colorarea-border-color-rgb: var(--spectrum-gray-1000-rgb);
-	--spectrum-colorarea-border-color: rgba(var(--spectrum-colorarea-border-color-rgb), var(--spectrum-color-area-border-opacity));
+	--spectrum-colorarea-border-color: rgb(var(--spectrum-colorarea-border-color-rgb), var(--spectrum-color-area-border-opacity));
 	--spectrum-colorarea-border-width: var(--spectrum-color-area-border-width);
 	--spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color);
 	--spectrum-colorarea-height: var(--spectrum-color-area-height);
@@ -27,7 +27,6 @@
 	position: relative;
 	display: inline-block;
 	cursor: default;
-	user-select: none;
 	min-inline-size: var(--mod-colorarea-min-width, var(--spectrum-colorarea-min-width));
 	min-block-size: var(--mod-colorarea-min-height, var(--spectrum-colorarea-min-height));
 	inline-size: var(--mod-colorarea-width, var(--spectrum-colorarea-width));
@@ -36,6 +35,9 @@
 	border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius));
 	border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color, var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color)));
 
+	touch-action: none; /* Disable touch scrolling on touch devices to allow for color picking */
+	user-select: none;
+
 	&.is-focused {
 		z-index: 2;
 	}

components/colorhandle/index.css

@@ -55,6 +55,9 @@
 
 	transition: all var(--mod-colorhandle-animation-duration, var(--spectrum-animation-duration-100)) var(--mod-colorhandle-animation-easing, ease-in-out);
 
+	touch-action: none; /* Disable touch scrolling on touch devices to allow for color picking */
+	user-select: none; /* Prevent text selection when dragging the handle */
+
 	&::after {
 		content: "";
 		inset-inline: calc(50% - calc(var(--mod-colorhandle-hitarea-size, var(--spectrum-color-control-track-width)) / 2));

components/colorslider/index.css

@@ -30,6 +30,8 @@
 	inline-size: var(--mod-color-slider-length, var(--spectrum-color-slider-length));
 	block-size: var(--mod-color-slider-control-track-width, var(--spectrum-color-slider-control-track-width));
 
+	touch-action: none; /* Disable touch scrolling on touch devices to allow for color picking */
+
 	/* Otherwise we randomly drag a file icon */
 	user-select: none;
 

components/colorwheel/index.css

@@ -37,6 +37,7 @@
 	min-inline-size: var(--mod-colorwheel-min-inline-size, var(--spectrum-colorwheel-min-inline-size));
 	inline-size: var(--mod-colorwheel-inline-size, var(--spectrum-colorwheel-inline-size));
 	block-size: var(--mod-colorwheel-block-size, var(--spectrum-colorwheel-block-size));
+	touch-action: none; /* Disable touch scrolling on touch devices to allow for color picking */
 	user-select: none;
 	cursor: default;
 

components/slider/index.css

@@ -207,6 +207,9 @@
 	padding-inline-end: var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap));
 	margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
 
+	touch-action: none; /* Disable touch scrolling on touch devices to allow dragging slider */
+	user-select: none;
+
 	&::before {
 		content: "";
 		display: block;
@@ -244,6 +247,8 @@
 	padding-inline-end: 0;
 	margin-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
 	margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+	user-select: none;
+	touch-action: none; /* Disable touch scrolling on touch devices to allow dragging slider handle */
 }
 
 /* over-write for Range, without the LTR RTL post-css hack */