Updates Image Editor slider to update rotation without requiring dragging, hides graduation list from AT

CHANGELOG-WIP.md

@@ -11,6 +11,7 @@
 - Improved the accessibility of Checkboxes and Radio Buttons fields that allow custom options. ([#16080](https://github.com/craftcms/cms/pull/16080))
 - Improved the accessibility of control panel icons. ([#16128](https://github.com/craftcms/cms/pull/16128))
 - Improved the accessibility of Selectize inputs. ([#16110](https://github.com/craftcms/cms/pull/16110))
+- Improved the accessibility of the image rotation control within the Image Editor. ([#16218](https://github.com/craftcms/cms/pull/16218))
 
 ### Administration
 - Added the “Show the ‘URL Suffix’ field” setting to Link fields. ([#15813](https://github.com/craftcms/cms/discussions/15813))

src/web/assets/cp/src/css/_image_editor.scss

@@ -427,21 +427,38 @@ html.noscroll body {
 .slide-rule .graduations ul {
   position: relative;
   float: inline-start;
+  height: 40px;
+
+  /* We need to use "left" vs. a logical property here because that's wha the JS sets */
+  transition: 200ms left linear; /* stylelint-disable-line */
+}
+
+.slide-rule.dragging .graduations ul {
+  transition: none;
 }
 
 .slide-rule .graduations ul li {
   display: inline-block;
   font-size: 8px;
   position: relative;
   width: 10px;
+
+  &:hover {
+    cursor: pointer;
+
+    &::before {
+      border-inline-start-color: #63a6e1;
+    }
+  }
 }
 
 .slide-rule .graduations ul li:not(.main-graduation) {
   inset-inline-start: 1px;
 }
 
 .slide-rule .graduations ul li.main-graduation::before {
-  border-inline-start-width: 3px;
+  border-inline-start-width: 4px;
+  height: 10px;
 }
 
 .slide-rule .graduations ul li.main-graduation .label {
@@ -456,8 +473,8 @@ html.noscroll body {
 .slide-rule .graduations ul li::before {
   content: '';
   position: absolute;
-  border-inline-start: 1px solid var(--white);
-  height: 10px;
+  border-inline-start: 2px solid var(--white);
+  height: 6px;
   inset-block-start: 0;
   inset-inline-start: 0;
 }
@@ -489,6 +506,7 @@ html.noscroll body {
   position: absolute;
   inset-block: 0 1px;
   inset-inline: 0;
+  pointer-events: none;
   background-image: linear-gradient(
     to right,
     var(--gray-900) 0%,

src/web/assets/cp/src/js/SlideRuleInput.js

@@ -6,6 +6,9 @@ Craft.SlideRuleInput = Garnish.Base.extend({
   $selectedOption: null,
   $input: null,
   value: null,
+  dragging: false,
+  sensitivity: 3,
+  rotateIntent: false,
 
   startPositionX: null,
 
@@ -24,7 +27,11 @@ Craft.SlideRuleInput = Garnish.Base.extend({
     this.$graduations = $('<div class="graduations"></div>').appendTo(
       this.$container
     );
-    this.$graduationsUl = $('<ul></ul>').appendTo(this.$graduations);
+    this.$graduationsUl = $('<ul></ul>')
+      .attr({
+        'aria-hidden': 'true',
+      })
+      .appendTo(this.$graduations);
 
     this.$container.attr({
       role: 'slider',
@@ -126,25 +133,44 @@ Craft.SlideRuleInput = Garnish.Base.extend({
   _handleTapStart: function (ev, touch) {
     ev.preventDefault();
 
+    // Only allow rotation if the user taps on anything within the graduations container
+    this.rotateIntent = $(ev.target).is('.graduations *');
+
+    if (!this.rotateIntent) return;
+
     this.startPositionX = touch.position.x;
     this.startLeft = this.$graduationsUl.position().left;
 
-    this.dragging = true;
     this.onStart();
   },
 
   _handleTapMove: function (ev, touch) {
-    if (this.dragging) {
-      ev.preventDefault();
+    if (!this.rotateIntent) return;
 
-      var curX = this.startPositionX - touch.position.x;
-      var left = this.startLeft - curX;
-      var value = this.positionToValue(left);
+    if (Math.abs(touch.position.x - this.startPositionX) > this.sensitivity) {
+      this.dragging = true;
+      this.$container.addClass('dragging');
+      ev.preventDefault();
+      this._setValueFromTouch(touch);
+      this.onChange();
+    }
+  },
 
-      this.setValue(value);
+  _setValueFromTouch: function (touch) {
+    let referencePosition = this.dragging
+      ? this.startPositionX
+      : this.$cursor.offset().left + this.$cursor.outerWidth() / 2;
+    let delta;
 
-      this.onChange();
+    if (this.dragging) {
+      delta = referencePosition - touch.position.x;
+    } else {
+      delta = touch.position.x - referencePosition;
     }
+
+    const position = this.startLeft - delta;
+    const value = this.positionToValue(position);
+    this.setValue(value);
   },
 
   setValue: function (value) {
@@ -191,12 +217,21 @@ Craft.SlideRuleInput = Garnish.Base.extend({
     this.value = value;
   },
 
-  _handleTapEnd: function (ev) {
+  _handleTapEnd: function (ev, touch) {
+    if (!this.rotateIntent) return;
+
     if (this.dragging) {
       ev.preventDefault();
       this.dragging = false;
-      this.onEnd();
+      this.$container.removeClass('dragging');
+    } else {
+      this._setValueFromTouch(touch);
+      this.onChange();
     }
+
+    this.onEnd();
+    this.startPositionX = null;
+    this.rotateIntent = false;
   },
 
   positionToValue: function (position) {