diff --git a/packages/react-core/src/components/Nav/NavList.tsx b/packages/react-core/src/components/Nav/NavList.tsx index acb8de5776e..27ee81f9ba3 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 left scroll button */ + /** @deprecated Please use backScrollAriaLabel. Aria-label for the left scroll button */ ariaLeftScroll?: string; - /** 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; + /** Aria-label for the forward scroll button */ + forwardScrollAriaLabel?: string; } class NavList extends React.Component { @@ -26,8 +30,11 @@ class NavList extends React.Component { context!: React.ContextType; static defaultProps: NavListProps = { ariaLeftScroll: 'Scroll left', - ariaRightScroll: 'Scroll right' + backScrollAriaLabel: 'Scroll back', + ariaRightScroll: 'Scroll right', + forwardScrollAriaLabel: 'Scroll foward' }; + private direction = 'ltr'; state = { scrollViewAtStart: false, @@ -51,7 +58,7 @@ class NavList extends React.Component { } }; - 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 +72,19 @@ class NavList extends React.Component { } } 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 +98,13 @@ class NavList extends React.Component { } } 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 +112,7 @@ class NavList extends React.Component { componentDidMount() { this.observer = getResizeObserver(this.navList.current, this.handleScrollButtons, true); + this.direction = getComputedStyle(this.navList.current).getPropertyValue('direction'); this.handleScrollButtons(); } @@ -100,8 +120,20 @@ class NavList extends React.Component { this.observer(); } + componentDidUpdate() { + this.direction = getComputedStyle(this.navList.current).getPropertyValue('direction'); + } + 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 ( @@ -113,8 +145,8 @@ class NavList extends React.Component { {isHorizontal && (