Merge pull request #20598 from calixteman/fix_sidebar_resize

Fix the sidebar resizer accessibility

Author: timvandermeij

web/sidebar.css

@@ -48,6 +48,7 @@
   min-width: var(--sidebar-min-width);
   max-width: var(--sidebar-max-width);
   backdrop-filter: var(--sidebar-backdrop-filter);
+  box-sizing: border-box;
 
   .sidebarResizer {
     width: var(--resizer-width);

web/sidebar.js

@@ -64,12 +64,10 @@ class Sidebar {
     this.#initialWidth = this.#width = parseFloat(
       style.getPropertyValue("--sidebar-width")
     );
-    resizer.ariaValueMin = parseFloat(
-      style.getPropertyValue("--sidebar-min-width")
-    );
-    resizer.ariaValueMax = parseFloat(
-      style.getPropertyValue("--sidebar-max-width")
-    );
+    resizer.ariaValueMin =
+      parseFloat(style.getPropertyValue("--sidebar-min-width")) || 0;
+    resizer.ariaValueMax =
+      parseFloat(style.getPropertyValue("--sidebar-max-width")) || Infinity;
     resizer.ariaValueNow = this.#width;
 
     this.#makeSidebarResizable();
@@ -123,7 +121,7 @@ class Sidebar {
       window.addEventListener(
         "pointermove",
         ev => {
-          if (!pointerMoveAC) {
+          if (!pointerMoveAC || Math.abs(ev.clientX - this.#prevX) < 1) {
             return;
           }
           stopEvent(ev);

web/viewer.html

@@ -278,7 +278,7 @@
                     <div id="attachmentsView" class="hidden"></div>
                     <div id="layersView" class="treeView hidden"></div>
                   </div>
-                  <div id="viewsManagerResizer" class="sidebarResizer"></div>
+                  <div id="viewsManagerResizer" class="sidebarResizer" role="separator" aria-controls="viewsManager" tabindex="0"></div>
                 </div>
                 <!-- sidebarContainer -->