From 5d7c73eb1a84da12ea868a55cebbef2ff4dc9070 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yi=C4=9Fit=20FINDIKLI?= <yigitfindikli@gmail.com>
Date: Tue, 28 Nov 2023 15:23:44 +0300
Subject: [PATCH] #5429 for splitter

---
 components/doc/splitter/accessibilitydoc.js | 101 ++++++++++----------
 components/lib/splitter/Splitter.js         |  10 +-
 2 files changed, 57 insertions(+), 54 deletions(-)

diff --git a/components/doc/splitter/accessibilitydoc.js b/components/doc/splitter/accessibilitydoc.js
index 9ddcc6f417..113b853144 100644
--- a/components/doc/splitter/accessibilitydoc.js
+++ b/components/doc/splitter/accessibilitydoc.js
@@ -1,59 +1,56 @@
-import { DevelopmentSection } from '@/components/doc/common/developmentsection';
 import { DocSectionText } from '@/components/doc/common/docsectiontext';
 
 export function AccessibilityDoc() {
     return (
-        <DevelopmentSection>
-            <DocSectionText id="accessibility" label="Accessibility">
-                <h3>Screen Reader</h3>
-                <p>
-                    Splitter bar defines <i>separator</i> as the role with <i>aria-orientation</i> set to either horizontal or vertical.
-                </p>
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Splitter bar defines <i>separator</i> as the role with <i>aria-orientation</i> set to either horizontal or vertical.
+            </p>
 
-                <h3>Keyboard Support</h3>
-                <div className="doc-tablewrapper">
-                    <table className="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Key</th>
-                                <th>Function</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>
-                                    <i>tab</i>
-                                </td>
-                                <td>Moves focus through the splitter bar.</td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    <i>down arrow</i>
-                                </td>
-                                <td>Moves a vertical splitter down.</td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    <i>up arrow</i>
-                                </td>
-                                <td>Moves a vertical splitter up.</td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    <i>left arrow</i>
-                                </td>
-                                <td>Moves a vertical splitter to the left.</td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    <i>right arrow</i>
-                                </td>
-                                <td>Moves a vertical splitter to the right.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </DocSectionText>
-        </DevelopmentSection>
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus through the splitter bar.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Moves a vertical splitter down.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Moves a vertical splitter up.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>left arrow</i>
+                            </td>
+                            <td>Moves a vertical splitter to the left.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>right arrow</i>
+                            </td>
+                            <td>Moves a vertical splitter to the right.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
     );
 }
diff --git a/components/lib/splitter/Splitter.js b/components/lib/splitter/Splitter.js
index cc2bfb7a08..d12a0741b1 100644
--- a/components/lib/splitter/Splitter.js
+++ b/components/lib/splitter/Splitter.js
@@ -21,6 +21,7 @@ export const Splitter = React.memo(
         const prevPanelElement = React.useRef(null);
         const nextPanelElement = React.useRef(null);
         const prevPanelSize = React.useRef(null);
+        const prevSize = React.useRef(null);
         const prevPanelSizeNew = React.useRef(null);
         const nextPanelSize = React.useRef(null);
         const nextPanelSizeNew = React.useRef(null);
@@ -166,6 +167,7 @@ export const Splitter = React.memo(
                 nextPanelSizeNew.current = newNextPanelSize;
                 prevPanelElement.current.style.flexBasis = 'calc(' + newPrevPanelSize + '% - ' + (props.children.length - 1) * props.gutterSize + 'px)';
                 nextPanelElement.current.style.flexBasis = 'calc(' + newNextPanelSize + '% - ' + (props.children.length - 1) * props.gutterSize + 'px)';
+                prevSize.current = parseFloat(newPrevPanelSize).toFixed(4);
             }
         };
 
@@ -226,7 +228,9 @@ export const Splitter = React.memo(
         React.useEffect(() => {
             const panelElements = [...elementRef.current.children].filter((child) => DomHandler.getAttribute(child, 'data-pc-section') === 'splitterpanel.root');
 
-            panelElements.map((panelElement) => {
+            panelElements.map((panelElement, i) => {
+                prevSize.current = panelSize(panelSizes, 0);
+
                 if (panelElement.childNodes && ObjectUtils.isNotEmpty(DomHandler.find(panelElement, "[data-pc-name='splitter']") && DomHandler.find(panelElement, "[data-pc-section='root']"))) {
                     !isUnstyled() && DomHandler.addClass(panelElement, 'p-splitter-panel-nested');
                     panelElement.setAttribute('data-p-splitter-panel-nested', true);
@@ -259,7 +263,9 @@ export const Splitter = React.memo(
 
             const gutterHandlerProps = mergeProps(
                 {
-                    className: cx('gutterHandler')
+                    className: cx('gutterHandler'),
+                    'aria-orientation': props.layout,
+                    'aria-valuenow': prevSize.current
                 },
                 ptm('gutterHandler')
             );