feat(ActionSheet): add keyboard navigation for PageUp/Down, Home, End (#5009)

Closes #3875

Author: Lukas742

packages/main/src/components/ActionSheet/ActionSheet.cy.tsx

@@ -8,11 +8,11 @@ interface TestCompProptypes extends ActionSheetPropTypes {
 }
 
 const TestComp = (props: TestCompProptypes) => {
-  const { onBtnClick, open, children } = props;
+  const { onBtnClick, open = true, children, ...rest } = props;
   return (
     <>
       <button id="opener">Opener</button>
-      <ActionSheet className="myCustomClass" open={open} opener="opener">
+      <ActionSheet className="myCustomClass" open={open} opener="opener" {...rest}>
         {children || (
           <>
             <Button onClick={onBtnClick}>Accept</Button>
@@ -28,7 +28,7 @@ const TestComp = (props: TestCompProptypes) => {
 describe('ActionSheet', () => {
   it('Click Action', () => {
     const onBtnClick = cy.spy().as('onBtnClick');
-    cy.mount(<TestComp onBtnClick={onBtnClick} open />);
+    cy.mount(<TestComp onBtnClick={onBtnClick} />);
 
     cy.get('[ui5-responsive-popover]').should('be.visible');
 
@@ -39,10 +39,55 @@ describe('ActionSheet', () => {
 
   it('does not crash with other component', () => {
     cy.mount(
-      <TestComp open>
+      <TestComp>
         <Label>I should not crash</Label>
       </TestComp>
     );
     cy.findByText('I should not crash').should('be.visible');
   });
+
+  it('keyboard navigation', () => {
+    cy.mount(
+      <TestComp>
+        {new Array(15).fill('O.o').map((_, index) => (
+          <Button key={index}>{`Button${index}`}</Button>
+        ))}
+      </TestComp>
+    );
+    cy.focused().should('have.text', 'Button0');
+    cy.realPress('ArrowDown');
+    cy.focused().should('have.text', 'Button1');
+    cy.realPress('ArrowRight');
+    cy.realPress('ArrowRight');
+    cy.focused().should('have.text', 'Button3');
+    cy.realPress('PageUp');
+    cy.focused().should('have.text', 'Button0');
+    cy.realPress('PageDown');
+    cy.focused().should('have.text', 'Button5');
+    cy.realPress('End');
+    cy.focused().should('have.text', 'Button14');
+    cy.realPress('ArrowUp');
+    cy.focused().should('have.text', 'Button13');
+    cy.realPress('ArrowLeft');
+    cy.realPress('ArrowLeft');
+    cy.focused().should('have.text', 'Button11');
+    cy.realPress('PageDown');
+    cy.focused().should('have.text', 'Button14');
+    cy.realPress('Home');
+    cy.focused().should('have.text', 'Button0');
+
+    // todo: rtl detection of wcr and ui5wc doesn't work for some reason in cypress
+    // cy.mount(
+    //   <TestComp dir="rtl">
+    //     {new Array(15).fill('O.o').map((_, index) => (
+    //       <Button key={index}>{`Button${index}`}</Button>
+    //     ))}
+    //   </TestComp>
+    // );
+    // cy.focused().should('have.text', 'Button0');
+    // cy.realPress('ArrowLeft');
+    // cy.focused().should('have.text', 'Button1');
+    // cy.realPress('ArrowRight');
+    // cy.focused().should('have.text', 'Button0');
+  });
 });

packages/main/src/components/ActionSheet/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { isPhone } from '@ui5/webcomponents-base/dist/Device.js';
-import { useI18nBundle, useSyncRef } from '@ui5/webcomponents-react-base';
+import { useI18nBundle, useIsRTL, useSyncRef } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { ReactElement } from 'react';
 import React, { forwardRef, useReducer, useRef } from 'react';
@@ -164,6 +164,7 @@ const ActionSheet = forwardRef<ResponsivePopoverDomRef, ActionSheetPropTypes>((p
   const childrenToRender = flattenFragments(children);
   const childrenArrayLength = childrenToRender.length;
   const childrenLength = isPhone() && showCancelButton ? childrenArrayLength + 1 : childrenArrayLength;
+  const isRtl = useIsRTL(popoverRef);
 
   const canRenderPortal = useCanRenderPortal();
   if (!canRenderPortal) {
@@ -209,13 +210,39 @@ const ActionSheet = forwardRef<ResponsivePopoverDomRef, ActionSheetPropTypes>((p
 
   const handleKeyDown = (e) => {
     const currentIndex = parseInt(e.target.dataset.actionBtnIndex);
-    if (e.key === 'ArrowDown' && currentIndex + 1 < childrenLength) {
-      e.preventDefault();
-      actionBtnsRef.current.querySelector(`[data-action-btn-index="${currentIndex + 1}"]`).focus();
-    }
-    if (e.key === 'ArrowUp' && currentIndex > 0) {
-      e.preventDefault();
-      actionBtnsRef.current.querySelector(`[data-action-btn-index="${currentIndex - 1}"]`).focus();
+    switch (e.key) {
+      case 'ArrowDown':
+      case isRtl ? 'ArrowLeft' : 'ArrowRight':
+        if (currentIndex + 1 < childrenLength) {
+          e.preventDefault();
+          actionBtnsRef.current.querySelector(`[data-action-btn-index="${currentIndex + 1}"]`).focus();
+        }
+        break;
+      case 'ArrowUp':
+      case isRtl ? 'ArrowRight' : 'ArrowLeft':
+        if (currentIndex > 0) {
+          e.preventDefault();
+          actionBtnsRef.current.querySelector(`[data-action-btn-index="${currentIndex - 1}"]`).focus();
+        }
+        break;
+      case 'PageUp':
+        e.preventDefault();
+        actionBtnsRef.current.querySelector(`[data-action-btn-index="${Math.max(currentIndex - 5, 0)}"]`).focus();
+        break;
+      case 'PageDown':
+        e.preventDefault();
+        actionBtnsRef.current
+          .querySelector(`[data-action-btn-index="${Math.min(currentIndex + 5, childrenLength - 1)}"]`)
+          .focus();
+        break;
+      case 'Home':
+        e.preventDefault();
+        actionBtnsRef.current.querySelector(`[data-action-btn-index="0"]`).focus();
+        break;
+      case 'End':
+        e.preventDefault();
+        actionBtnsRef.current.querySelector(`[data-action-btn-index="${childrenLength - 1}"]`).focus();
+        break;
     }
   };