fixup! ✨(frontend) make components accessible to screen readers

Author: Ovgodd

src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx

@@ -12,10 +12,11 @@ import { Box, BoxButton, Icon, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { Doc, useTrans } from '@/features/docs/doc-management';
 import { useActionableMode } from '@/features/docs/doc-tree/hooks/useActionableMode';
-import { useTreeItemKeyboardActivate } from '@/features/docs/doc-tree/hooks/useTreeItemKeyboardActivate';
 import { useLeftPanelStore } from '@/features/left-panel';
 import { useResponsiveStore } from '@/stores';
 
+import { useKeyboardActivation } from '../hooks/useKeyboardActivation';
+
 import SubPageIcon from './../assets/sub-page-logo.svg';
 import { DocTreeItemActions } from './DocTreeItemActions';
 
@@ -80,7 +81,7 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
     }
   };
 
-  useTreeItemKeyboardActivate(isActive, handleActivate);
+  useKeyboardActivation(['Enter', ' '], isActive, handleActivate, true);
 
   // prepare the text for the screen reader
   const docTitle = doc.title || untitledDocument;
@@ -151,14 +152,14 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
             e.stopPropagation();
             handleActivate();
           }}
+          tabIndex={-1}
           $width="100%"
           $direction="row"
           $gap={spacingsTokens['xs']}
           $align="center"
           $minHeight="24px"
           data-testid={`doc-sub-page-item-${doc.id}`}
           aria-label={`${t('Open document')} ${docTitle}`}
-          role="button"
         >
           <Box $width="16px" $height="16px" aria-hidden="true">
             <SubPageIcon />