frontend/projects/aria: keyboard nav + aria tweaks

Author: haraldschilly

src/packages/frontend/_projects.sass

@@ -141,6 +141,10 @@ div.cc-project-flyout-dragbar:hover
   cursor: pointer
   background-color: colors.$COL_GRAY_LLL
 
+.cc-projects-row-focused
+  > .ant-table-cell
+    background-color: colors.$COL_GRAY_LL
+
 .cc-project-flyout-files-panel,
 .cc-project-flyout-settings-panel
   .ant-collapse-content-box

src/packages/frontend/projects/projects-page.tsx

@@ -3,9 +3,10 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
+import type { InputRef } from "antd";
 import { Col, Grid, Row, Space } from "antd";
 import { Map, Set } from "immutable";
-import { useLayoutEffect, useRef } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
 import { useIntl } from "react-intl";
 
 // ensure redux stuff (actions and store) are initialized:
@@ -30,6 +31,7 @@ import { LoadAllProjects } from "./projects-load-all";
 import { ProjectsOperations } from "./projects-operations";
 import { StarredProjectsBar } from "./projects-starred";
 import { ProjectsTable } from "./projects-table";
+import type { ProjectsTableHandle } from "./projects-table";
 import { ProjectsTableControls } from "./projects-table-controls";
 import ProjectsPageTour from "./tour";
 import { useBookmarkedProjects } from "./use-bookmarked-projects";
@@ -63,6 +65,8 @@ export const ProjectsPage: React.FC = () => {
   const createNewRef = useRef<any>(null);
   const projectListRef = useRef<any>(null);
   const filenameSearchRef = useRef<any>(null);
+  const searchInputRef = useRef<InputRef>(null);
+  const projectsTableRef = useRef<ProjectsTableHandle>(null);
 
   // Calculating table height
   const containerRef = useRef<HTMLDivElement>(null);
@@ -91,6 +95,49 @@ export const ProjectsPage: React.FC = () => {
     string[] | null
   >(null);
 
+  const focusSearchInput = useCallback(() => {
+    const input = searchInputRef.current;
+    if (!input) return false;
+    input.focus({ cursor: "end" });
+    return true;
+  }, []);
+
+  const handleSearchNavigate = useCallback((direction: "down" | "up") => {
+    if (direction === "down") {
+      projectsTableRef.current?.focusFirstRow();
+    } else {
+      projectsTableRef.current?.focusLastRow();
+    }
+  }, []);
+
+  useEffect(() => {
+    const handleGlobalShortcut = (event: KeyboardEvent) => {
+      if (event.defaultPrevented) return;
+      const target = event.target as HTMLElement | null;
+      const isEditable =
+        !!target &&
+        (target.tagName === "INPUT" ||
+          target.tagName === "TEXTAREA" ||
+          target.isContentEditable);
+      const hasModifier = event.metaKey || event.ctrlKey || event.altKey;
+
+      if (event.key === "/" && !hasModifier && !isEditable) {
+        if (focusSearchInput()) {
+          event.preventDefault();
+        }
+        return;
+      }
+
+      if (event.key === "ArrowDown" && !hasModifier && !isEditable) {
+        projectsTableRef.current?.focusFirstRow();
+        event.preventDefault();
+      }
+    };
+
+    window.addEventListener("keydown", handleGlobalShortcut);
+    return () => window.removeEventListener("keydown", handleGlobalShortcut);
+  }, [focusSearchInput]);
+
   // if not shown, trigger a re-calculation
   const allLoaded = !!useTypedRedux(
     "projects",
@@ -313,6 +360,8 @@ export const ProjectsPage: React.FC = () => {
                 createNewRef={createNewRef}
                 searchRef={searchRef}
                 filtersRef={filtersRef}
+                searchInputRef={searchInputRef}
+                onSearchNavigate={handleSearchNavigate}
                 tour={
                   <ProjectsPageTour
                     searchRef={searchRef}
@@ -341,11 +390,13 @@ export const ProjectsPage: React.FC = () => {
               aria-label={`Projects list (${visible_projects.length} total)`}
             >
               <ProjectsTable
+                ref={projectsTableRef}
                 visible_projects={visible_projects}
                 height={tableHeight}
                 narrow={narrow}
                 filteredCollaborators={filteredCollaborators}
                 onFilteredCollaboratorsChange={setFilteredCollaborators}
+                onRequestSearchFocus={focusSearchInput}
               />
             </div>
 

src/packages/frontend/projects/projects-table-controls.tsx

@@ -12,9 +12,10 @@
 
 import type { SelectProps } from "antd";
 
-import { Button, Input, Select, Space, Switch } from "antd";
+import { Button, Input, InputRef, Select, Space, Switch } from "antd";
 import { Set } from "immutable";
 import { ReactNode, useMemo } from "react";
+import type { KeyboardEvent } from "react";
 import { defineMessage, useIntl } from "react-intl";
 
 import { useAutoFocusPreference } from "@cocalc/frontend/account";
@@ -47,13 +48,17 @@ const CONTROLS_STYLE: CSS = {
   justifyContent: "space-between",
 } as const;
 
+type SearchNavigateDirection = "up" | "down";
+
 interface Props {
   visible_projects: string[];
   onCreateProject: () => void;
   tour: ReactNode;
   createNewRef: React.RefObject<any>;
   searchRef: React.RefObject<any>;
   filtersRef: React.RefObject<any>;
+  searchInputRef?: React.RefObject<InputRef | null>;
+  onSearchNavigate?: (direction: SearchNavigateDirection) => void;
 }
 
 export function ProjectsTableControls({
@@ -63,6 +68,8 @@ export function ProjectsTableControls({
   createNewRef,
   searchRef,
   filtersRef,
+  searchInputRef,
+  onSearchNavigate,
 }: Props) {
   const intl = useIntl();
   const shouldAutoFocus = useAutoFocusPreference();
@@ -116,11 +123,22 @@ export function ProjectsTableControls({
     }
   }
 
+  function handleSearchKeyDown(e: KeyboardEvent<HTMLInputElement>) {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      onSearchNavigate?.("down");
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      onSearchNavigate?.("up");
+    }
+  }
+
   return (
     <Space style={CONTROLS_STYLE} direction="horizontal">
       {/* Left section: Search and Hashtags */}
       <Space wrap ref={searchRef}>
         <Input.Search
+          ref={searchInputRef}
           aria-label="Filter projects by name"
           placeholder={intl.formatMessage({
             id: "projects.table-controls.search.placeholder",
@@ -130,6 +148,7 @@ export function ProjectsTableControls({
           value={search}
           onChange={handleSearchChange}
           onPressEnter={handlePressEnter}
+          onKeyDown={handleSearchKeyDown}
           style={{ width: IS_MOBILE ? 125 : 250 }}
           allowClear
         />