splitter bug fixes

- move step typing to correct element - move role=separator to correct element (per spec should be on the same element that contains aria-orientation and aria-value* attribs) - see https://www.w3.org/TR/wai-aria-1.2/#separator - fix bug where if home/end/enter were used in a splitter that has a minSize, after pressing those buttons, the arrow keys would no longer work
primefaces · Feb 24, 2024 · c26d9e7 · c26d9e7
1 parent a2a2f11
commit c26d9e7
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 19 deletions.
diff --git a/components/lib/splitter/Splitter.js b/components/lib/splitter/Splitter.js
@@ -253,24 +253,24 @@ export const Splitter = React.memo(
                 }
 
                 case 'Home': {
-                    resizePanel(index, 100, minSize);
+                    resizePanel(index, 100 - minSize, minSize);
 
                     event.preventDefault();
                     break;
                 }
 
                 case 'End': {
-                    resizePanel(index, minSize, 100);
+                    resizePanel(index, minSize, 100 - minSize);
 
                     event.preventDefault();
                     break;
                 }
 
                 case 'Enter': {
-                    if (prevSize.current > 100 - (minSize || 5)) {
-                        resizePanel(index, minSize, 100);
+                    if (prevSize.current >= 100 - (minSize || 5)) {
+                        resizePanel(index, minSize, 100 - minSize);
                     } else {
-                        resizePanel(index, 100, minSize);
+                        resizePanel(index, 100 - minSize, minSize);
                     }
 
                     event.preventDefault();
@@ -386,8 +386,7 @@ export const Splitter = React.memo(
                     onTouchStart: (event) => onGutterTouchStart(event, index),
                     onTouchMove: (event) => onGutterTouchMove(event),
                     onTouchEnd: (event) => onGutterTouchEnd(event),
-                    'data-p-splitter-gutter-resizing': false,
-                    role: 'separator'
+                    'data-p-splitter-gutter-resizing': false
                 },
                 ptm('gutter')
             );
@@ -396,6 +395,7 @@ export const Splitter = React.memo(
                 {
                     tabIndex: getPanelProp(panel, 'tabIndex') || 0,
                     className: cx('gutterHandler'),
+                    role: 'separator',
                     'aria-orientation': horizontal ? 'vertical' : 'horizontal',
                     'aria-controls': panelId,
                     'aria-label': getPanelProp(panel, 'aria-label'),

diff --git a/components/lib/splitter/__snapshots__/Splitter.spec.js.snap b/components/lib/splitter/__snapshots__/Splitter.spec.js.snap
@@ -23,7 +23,6 @@ exports[`Splitter Nested 1`] = `
       class="p-splitter-gutter"
       data-p-splitter-gutter-resizing="false"
       data-pc-section="gutter"
-      role="separator"
       style="width: 4px;"
     >
       <div
@@ -35,6 +34,7 @@ exports[`Splitter Nested 1`] = `
         aria-valuetext="20%"
         class="p-splitter-gutter-handle"
         data-pc-section="gutterhandler"
+        role="separator"
         tabindex="0"
       />
     </div>
@@ -66,7 +66,6 @@ exports[`Splitter Nested 1`] = `
           class="p-splitter-gutter"
           data-p-splitter-gutter-resizing="false"
           data-pc-section="gutter"
-          role="separator"
           style="height: 4px;"
         >
           <div
@@ -78,6 +77,7 @@ exports[`Splitter Nested 1`] = `
             aria-valuetext="15%"
             class="p-splitter-gutter-handle"
             data-pc-section="gutterhandler"
+            role="separator"
             tabindex="0"
           />
         </div>
@@ -109,7 +109,6 @@ exports[`Splitter Nested 1`] = `
               class="p-splitter-gutter"
               data-p-splitter-gutter-resizing="false"
               data-pc-section="gutter"
-              role="separator"
               style="width: 4px;"
             >
               <div
@@ -121,6 +120,7 @@ exports[`Splitter Nested 1`] = `
                 aria-valuetext="20%"
                 class="p-splitter-gutter-handle"
                 data-pc-section="gutterhandler"
+                role="separator"
                 tabindex="0"
               />
             </div>
@@ -165,7 +165,6 @@ exports[`Splitter Single Panel with size 1`] = `
       class="p-splitter-gutter"
       data-p-splitter-gutter-resizing="false"
       data-pc-section="gutter"
-      role="separator"
       style="height: 4px;"
     >
       <div
@@ -177,6 +176,7 @@ exports[`Splitter Single Panel with size 1`] = `
         aria-valuetext="5%"
         class="p-splitter-gutter-handle"
         data-pc-section="gutterhandler"
+        role="separator"
         tabindex="0"
       />
     </div>
@@ -207,7 +207,6 @@ exports[`Splitter Single Panel without size 1`] = `
       class="p-splitter-gutter"
       data-p-splitter-gutter-resizing="false"
       data-pc-section="gutter"
-      role="separator"
       style="height: 4px;"
     >
       <div
@@ -219,6 +218,7 @@ exports[`Splitter Single Panel without size 1`] = `
         aria-valuetext="100%"
         class="p-splitter-gutter-handle"
         data-pc-section="gutterhandler"
+        role="separator"
         tabindex="0"
       />
     </div>
@@ -249,7 +249,6 @@ exports[`Splitter Splitter requires two SplitterPanel components to wrap. 1`] =
       class="p-splitter-gutter"
       data-p-splitter-gutter-resizing="false"
       data-pc-section="gutter"
-      role="separator"
       style="width: 4px;"
     >
       <div
@@ -261,6 +260,7 @@ exports[`Splitter Splitter requires two SplitterPanel components to wrap. 1`] =
         aria-valuetext="50%"
         class="p-splitter-gutter-handle"
         data-pc-section="gutterhandler"
+        role="separator"
         tabindex="0"
       />
     </div>
@@ -301,7 +301,6 @@ exports[`Splitter Vertical layout 1`] = `
       class="p-splitter-gutter"
       data-p-splitter-gutter-resizing="false"
       data-pc-section="gutter"
-      role="separator"
       style="height: 4px;"
     >
       <div
@@ -313,6 +312,7 @@ exports[`Splitter Vertical layout 1`] = `
         aria-valuetext="50%"
         class="p-splitter-gutter-handle"
         data-pc-section="gutterhandler"
+        role="separator"
         tabindex="0"
       />
     </div>

diff --git a/components/lib/splitter/splitter.d.ts b/components/lib/splitter/splitter.d.ts
@@ -139,11 +139,6 @@ interface SplitterPanelProps extends Omit<React.DetailedHTMLProps<React.HTMLAttr
      * @readonly
      */
     children?: React.ReactNode | undefined;
-    /**
-     * Step factor to increment/decrement the size of the panels while pressing the arrow keys.
-     * @defaultValue 5
-     */
-    step?: number | undefined;
     /**
      * Uses to pass attributes to DOM elements inside the component.
      * @type {SplitterPanelPassThroughOptions}
@@ -196,6 +191,11 @@ export interface SplitterProps extends Omit<React.DetailedHTMLProps<React.HTMLAt
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Step factor to increment/decrement the size of the panels while pressing the arrow keys.
+     * @defaultValue 5
+     */
+    step?: number | undefined;
     /**
      * Uses to pass attributes to DOM elements inside the component.
      * @type {SplitterPassThroughOptions}