From c57fba2c0fa878c31b52dd654413237401a4abd9 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Mon, 18 Sep 2023 13:38:51 -0400
Subject: [PATCH 1/6] fix(Nav): allow rtl scrolling

---
 .../react-core/src/components/Nav/NavList.tsx | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/react-core/src/components/Nav/NavList.tsx b/packages/react-core/src/components/Nav/NavList.tsx
index acb8de5776e..8c0c65e458a 100644
--- a/packages/react-core/src/components/Nav/NavList.tsx
+++ b/packages/react-core/src/components/Nav/NavList.tsx
@@ -28,6 +28,7 @@ class NavList extends React.Component<NavListProps> {
     ariaLeftScroll: 'Scroll left',
     ariaRightScroll: 'Scroll right'
   };
+  private direction = 'ltr';
 
   state = {
     scrollViewAtStart: false,
@@ -51,7 +52,7 @@ class NavList extends React.Component<NavListProps> {
     }
   };
 
-  scrollLeft = () => {
+  scrollBack = () => {
     // find first Element that is fully in view on the left, then scroll to the element before it
     const container = this.navList.current;
     if (container) {
@@ -65,13 +66,19 @@ class NavList extends React.Component<NavListProps> {
         }
       }
       if (lastElementOutOfView) {
-        container.scrollLeft -= lastElementOutOfView.scrollWidth;
+        if (this.direction === 'ltr') {
+          // LTR scrolls left to go back
+          container.scrollLeft -= lastElementOutOfView.scrollWidth;
+        } else {
+          // RTL scrolls right to go back
+          container.scrollLeft += lastElementOutOfView.scrollWidth;
+        }
       }
       this.handleScrollButtons();
     }
   };
 
-  scrollRight = () => {
+  scrollForward = () => {
     // find last Element that is fully in view on the right, then scroll to the element after it
     const container = this.navList.current;
     if (container) {
@@ -85,7 +92,13 @@ class NavList extends React.Component<NavListProps> {
         }
       }
       if (firstElementOutOfView) {
-        container.scrollLeft += firstElementOutOfView.scrollWidth;
+        if (this.direction === 'ltr') {
+          // LTR scrolls right to go forward
+          container.scrollLeft += firstElementOutOfView.scrollWidth;
+        } else {
+          // RTL scrolls left to go forward
+          container.scrollLeft -= firstElementOutOfView.scrollWidth;
+        }
       }
       this.handleScrollButtons();
     }
@@ -93,6 +106,7 @@ class NavList extends React.Component<NavListProps> {
 
   componentDidMount() {
     this.observer = getResizeObserver(this.navList.current, this.handleScrollButtons, true);
+    this.direction = getComputedStyle(this.navList.current).getPropertyValue('direction');
     this.handleScrollButtons();
   }
 
@@ -114,7 +128,7 @@ class NavList extends React.Component<NavListProps> {
                   <button
                     className={css(styles.navScrollButton)}
                     aria-label={ariaLeftScroll}
-                    onClick={this.scrollLeft}
+                    onClick={this.scrollBack}
                     disabled={scrollViewAtStart}
                     tabIndex={isSidebarOpen ? null : -1}
                   >
@@ -134,7 +148,7 @@ class NavList extends React.Component<NavListProps> {
                   <button
                     className={css(styles.navScrollButton)}
                     aria-label={ariaRightScroll}
-                    onClick={this.scrollRight}
+                    onClick={this.scrollForward}
                     disabled={scrollViewAtEnd}
                     tabIndex={isSidebarOpen ? null : -1}
                   >

From 06fae627feca583c83922d924fddd2a1ad2de42e Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Mon, 18 Sep 2023 13:41:15 -0400
Subject: [PATCH 2/6] add direction assignment to update

---
 packages/react-core/src/components/Nav/NavList.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react-core/src/components/Nav/NavList.tsx b/packages/react-core/src/components/Nav/NavList.tsx
index 8c0c65e458a..edae9fc0746 100644
--- a/packages/react-core/src/components/Nav/NavList.tsx
+++ b/packages/react-core/src/components/Nav/NavList.tsx
@@ -114,6 +114,10 @@ class NavList extends React.Component<NavListProps> {
     this.observer();
   }
 
+  componentDidUpdate() {
+    this.direction = getComputedStyle(this.navList.current).getPropertyValue('direction');
+  }
+
   render() {
     const { children, className, ariaLeftScroll, ariaRightScroll, ...props } = this.props;
     const { scrollViewAtStart, scrollViewAtEnd } = this.state;

From 8c499e506b54e2990e87de6b959cdd9dbc01c222 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Tue, 19 Sep 2023 10:52:28 -0400
Subject: [PATCH 3/6] update aria label descriptions

---
 packages/react-core/src/components/Nav/NavList.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-core/src/components/Nav/NavList.tsx b/packages/react-core/src/components/Nav/NavList.tsx
index edae9fc0746..3634b02b447 100644
--- a/packages/react-core/src/components/Nav/NavList.tsx
+++ b/packages/react-core/src/components/Nav/NavList.tsx
@@ -14,9 +14,9 @@ export interface NavListProps
   children?: React.ReactNode;
   /** Additional classes added to the list */
   className?: string;
-  /** Aria-label for the left scroll button */
+  /** Aria-label for the back scroll button */
   ariaLeftScroll?: string;
-  /** Aria-label for the right scroll button */
+  /** Aria-label for the forward scroll button */
   ariaRightScroll?: string;
 }
 

From 9625ae866b653ff9ad3c2b9523a007c2ff62bf8a Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Thu, 21 Sep 2023 11:51:10 -0400
Subject: [PATCH 4/6] add new props and deprecate old

---
 .../react-core/src/components/Nav/NavList.tsx | 26 ++++++++++++++-----
 .../__tests__/__snapshots__/Nav.test.tsx.snap | 20 +++++++-------
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/packages/react-core/src/components/Nav/NavList.tsx b/packages/react-core/src/components/Nav/NavList.tsx
index 3634b02b447..84538d17dc1 100644
--- a/packages/react-core/src/components/Nav/NavList.tsx
+++ b/packages/react-core/src/components/Nav/NavList.tsx
@@ -14,10 +14,14 @@ export interface NavListProps
   children?: React.ReactNode;
   /** Additional classes added to the list */
   className?: string;
-  /** Aria-label for the back scroll button */
+  /** @deprecated Aria-label for the left scroll button */
   ariaLeftScroll?: string;
-  /** Aria-label for the forward scroll button */
+  /** @deprecated Aria-label for the right scroll button */
   ariaRightScroll?: string;
+  /** Aria-label for the back scroll button */
+  backScrollAriaLabel?: string;
+  /** Aria-label for the forward scroll button */
+  forwardScrollAriaLabel?: string;
 }
 
 class NavList extends React.Component<NavListProps> {
@@ -26,7 +30,9 @@ class NavList extends React.Component<NavListProps> {
   context!: React.ContextType<typeof NavContext>;
   static defaultProps: NavListProps = {
     ariaLeftScroll: 'Scroll left',
-    ariaRightScroll: 'Scroll right'
+    backScrollAriaLabel: 'Scroll back',
+    ariaRightScroll: 'Scroll right',
+    forwardScrollAriaLabel: 'Scroll foward'
   };
   private direction = 'ltr';
 
@@ -119,7 +125,15 @@ class NavList extends React.Component<NavListProps> {
   }
 
   render() {
-    const { children, className, ariaLeftScroll, ariaRightScroll, ...props } = this.props;
+    const {
+      children,
+      className,
+      ariaLeftScroll,
+      ariaRightScroll,
+      backScrollAriaLabel,
+      forwardScrollAriaLabel,
+      ...props
+    } = this.props;
     const { scrollViewAtStart, scrollViewAtEnd } = this.state;
 
     return (
@@ -131,7 +145,7 @@ class NavList extends React.Component<NavListProps> {
                 {isHorizontal && (
                   <button
                     className={css(styles.navScrollButton)}
-                    aria-label={ariaLeftScroll}
+                    aria-label={backScrollAriaLabel || ariaLeftScroll}
                     onClick={this.scrollBack}
                     disabled={scrollViewAtStart}
                     tabIndex={isSidebarOpen ? null : -1}
@@ -151,7 +165,7 @@ class NavList extends React.Component<NavListProps> {
                 {isHorizontal && (
                   <button
                     className={css(styles.navScrollButton)}
-                    aria-label={ariaRightScroll}
+                    aria-label={forwardScrollAriaLabel || ariaRightScroll}
                     onClick={this.scrollForward}
                     disabled={scrollViewAtEnd}
                     tabIndex={isSidebarOpen ? null : -1}
diff --git a/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap b/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap
index 88426bb27d2..dce2e3c6f9f 100644
--- a/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap
+++ b/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap
@@ -573,7 +573,7 @@ exports[`Nav Horizontal Nav List 1`] = `
     data-ouia-safe="true"
   >
     <button
-      aria-label="Scroll left"
+      aria-label="Scroll back"
       class="pf-v5-c-nav__scroll-button"
       disabled=""
     >
@@ -649,7 +649,7 @@ exports[`Nav Horizontal Nav List 1`] = `
       </li>
     </ul>
     <button
-      aria-label="Scroll right"
+      aria-label="Scroll foward"
       class="pf-v5-c-nav__scroll-button"
       disabled=""
     >
@@ -681,7 +681,7 @@ exports[`Nav Horizontal SubNav List 1`] = `
     data-ouia-safe="true"
   >
     <button
-      aria-label="Scroll left"
+      aria-label="Scroll back"
       class="pf-v5-c-nav__scroll-button"
       disabled=""
     >
@@ -757,7 +757,7 @@ exports[`Nav Horizontal SubNav List 1`] = `
       </li>
     </ul>
     <button
-      aria-label="Scroll right"
+      aria-label="Scroll foward"
       class="pf-v5-c-nav__scroll-button"
       disabled=""
     >
@@ -948,7 +948,7 @@ exports[`Nav Nav List with custom item nodes 1`] = `
     data-ouia-safe="true"
   >
     <button
-      aria-label="Scroll left"
+      aria-label="Scroll back"
       class="pf-v5-c-nav__scroll-button"
       disabled=""
     >
@@ -984,7 +984,7 @@ exports[`Nav Nav List with custom item nodes 1`] = `
       </li>
     </ul>
     <button
-      aria-label="Scroll right"
+      aria-label="Scroll foward"
       class="pf-v5-c-nav__scroll-button"
       disabled=""
     >
@@ -1016,7 +1016,7 @@ exports[`Nav Nav List with flyout 1`] = `
     data-ouia-safe="true"
   >
     <button
-      aria-label="Scroll left"
+      aria-label="Scroll back"
       class="pf-v5-c-nav__scroll-button"
       disabled=""
     >
@@ -1073,7 +1073,7 @@ exports[`Nav Nav List with flyout 1`] = `
       </li>
     </ul>
     <button
-      aria-label="Scroll right"
+      aria-label="Scroll foward"
       class="pf-v5-c-nav__scroll-button"
       disabled=""
     >
@@ -1186,7 +1186,7 @@ exports[`Nav Tertiary Nav List 1`] = `
     data-ouia-safe="true"
   >
     <button
-      aria-label="Scroll left"
+      aria-label="Scroll back"
       class="pf-v5-c-nav__scroll-button"
       disabled=""
     >
@@ -1262,7 +1262,7 @@ exports[`Nav Tertiary Nav List 1`] = `
       </li>
     </ul>
     <button
-      aria-label="Scroll right"
+      aria-label="Scroll foward"
       class="pf-v5-c-nav__scroll-button"
       disabled=""
     >

From 0b8a0406c8705204bf22be1ad877a62a1670a164 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Thu, 21 Sep 2023 13:07:28 -0400
Subject: [PATCH 5/6] update desc

---
 packages/react-core/src/components/Nav/NavList.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-core/src/components/Nav/NavList.tsx b/packages/react-core/src/components/Nav/NavList.tsx
index 84538d17dc1..27ee81f9ba3 100644
--- a/packages/react-core/src/components/Nav/NavList.tsx
+++ b/packages/react-core/src/components/Nav/NavList.tsx
@@ -14,9 +14,9 @@ export interface NavListProps
   children?: React.ReactNode;
   /** Additional classes added to the list */
   className?: string;
-  /** @deprecated Aria-label for the left scroll button */
+  /** @deprecated Please use backScrollAriaLabel. Aria-label for the left scroll button */
   ariaLeftScroll?: string;
-  /** @deprecated Aria-label for the right scroll button */
+  /** @deprecated Please use forwardScrollAriaLabel. Aria-label for the right scroll button */
   ariaRightScroll?: string;
   /** Aria-label for the back scroll button */
   backScrollAriaLabel?: string;

From f6ba7162ab1f16010d2c8c037fca56f51c09d8d4 Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Thu, 21 Sep 2023 13:30:29 -0400
Subject: [PATCH 6/6] update other test snaps

---
 .../Page/__tests__/__snapshots__/Page.test.tsx.snap  | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
index 3cfdf602a6d..1843b06aabc 100644
--- a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
+++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
@@ -602,7 +602,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
             data-ouia-safe="true"
           >
             <button
-              aria-label="Scroll left"
+              aria-label="Scroll back"
               class="pf-v5-c-nav__scroll-button"
               disabled=""
             >
@@ -687,7 +687,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
               </li>
             </ul>
             <button
-              aria-label="Scroll right"
+              aria-label="Scroll foward"
               class="pf-v5-c-nav__scroll-button"
               disabled=""
             >
@@ -785,7 +785,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
             data-ouia-safe="true"
           >
             <button
-              aria-label="Scroll left"
+              aria-label="Scroll back"
               class="pf-v5-c-nav__scroll-button"
               disabled=""
             >
@@ -870,7 +870,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
               </li>
             </ul>
             <button
-              aria-label="Scroll right"
+              aria-label="Scroll foward"
               class="pf-v5-c-nav__scroll-button"
               disabled=""
             >
@@ -1070,7 +1070,7 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
           data-ouia-safe="true"
         >
           <button
-            aria-label="Scroll left"
+            aria-label="Scroll back"
             class="pf-v5-c-nav__scroll-button"
             disabled=""
           >
@@ -1155,7 +1155,7 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
             </li>
           </ul>
           <button
-            aria-label="Scroll right"
+            aria-label="Scroll foward"
             class="pf-v5-c-nav__scroll-button"
             disabled=""
           >