Replace AccessibleList by simpler and more low-level FocusGroup component

CHANGELOG.md

@@ -6,7 +6,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 ## [Unreleased]
 #### 🚀 New Features
 - Make tree- and list-like components more accessible:
-  * Change `ClassTree`, `InstancesSearch`, `ConnectionsMenu` and `SearchResults` to be "focus group" components with support for keyboard interaction (arrow keys to move focus or toggle tree items, space to select);
+  * Change `ClassTree`, `InstancesSearch`, `ConnectionsMenu`, `SearchResults` and `DropdownMenu` to be "focus group" components with support for keyboard interaction (arrow keys to move focus or toggle tree items, space to select);
   * Add proper `aria-*` attributes for "focus group" containers and children e.g. `tree` and `treeitem` roles;
 - Support creating standalone workspace state (context) separated from UI components:
   * Workspace state can be created with `createWorkspace()` and provided to the UI components via `WorkspaceProvider`;

src/coreUtils/dom.ts

@@ -75,3 +75,18 @@ export function findPreviousWithin(
         }
     } while (current !== from);
 }
+
+export function findParentWithin(
+    from: Element,
+    parent: Element,
+    condition: (element: Element) => boolean
+): Element | undefined {
+    let current: Element | null = from;
+    while (current && current !== parent) {
+        if (condition(current)) {
+            return current;
+        }
+        current = current.parentElement;
+    }
+    return undefined;
+}

src/widgets/connectionsMenu/connectionList.tsx

@@ -7,9 +7,7 @@ import type { LinkTypeModel } from '../../data/model';
 import { generate128BitID, makeCaseInsensitiveFilter } from '../../data/utils';
 import { WithFetchStatus } from '../../editor/withFetchStatus';
 
-import {
-    AccessibleList, type ListRenderItem, type ListFocusableProps,
-} from '../utility/accessibleList';
+import { FocusGroup, useFocusGroupItem } from '../utility/focusGroup';
 import { highlightSubstring } from '../utility/listElementView';
 
 import { useWorkspace } from '../../workspace/workspaceContext';
@@ -93,46 +91,6 @@ export function ConnectionsList(props: {
         }
     }
 
-    const renderItem = React.useCallback<ListRenderItem<ConnectionEntry, void>>(
-        ({item, focusProps}) => {
-            if (item.type === 'link') {
-                return (
-                    <ConnectionLink
-                        link={item.linkType}
-                        direction={item.direction}
-                        count={item.count}
-                        filterKey={item.probable ? '' : filterKey}
-                        probability={item.probability}
-                        onExpandLink={onExpandLink}
-                        onMoveToFilter={onMoveToFilter}
-                        focusProps={focusProps}
-                    />
-                );
-            } else if (item.type === 'separator') {
-                return <hr className={`${CLASS_NAME}__links-list-hr`} />;
-            } else if (item.type === 'probable-hint') {
-                return (
-                    <li className={`${CLASS_NAME}__links-probably-label`}>
-                        {t.text('connections_menu.links.suggest_similar')}
-                    </li>
-                );
-            }
-            return null;
-        },
-        [t, filterKey, onExpandLink, onMoveToFilter]
-    );
-
-    const rootProps = React.useMemo((): React.HTMLProps<HTMLUListElement> => ({
-        /* For compatibility with React 19 typings */
-        ref: scrolledListRef as React.RefObject<HTMLUListElement>,
-        className: `${CLASS_NAME}__links-root`,
-        role: 'list',
-    }), []);
-    const itemProps = React.useMemo((): React.HTMLProps<HTMLLIElement> => ({
-        className: `${CLASS_NAME}__links-item`,
-        role: 'listitem',
-    }), []);
-
     return (
         <div
             className={cx(
@@ -142,14 +100,46 @@ export function ConnectionsList(props: {
             )}
             tabIndex={-1}
         >
-            <AccessibleList
-                items={entries}
-                getItemKey={getEntryKey}
-                isItemActive={isEntryActive}
-                renderItem={renderItem}
-                rootProps={rootProps}
-                itemProps={itemProps}
-            />
+            <FocusGroup>
+                {({ref, controller}) => (
+                    <ul ref={ref}
+                        className={`${CLASS_NAME}__links-root`}
+                        role='list'
+                        onClick={controller.defaultClick}
+                        onKeyDown={controller.defaultKeyDown}>
+                        {entries.map(item => {
+                            if (item.type === 'link') {
+                                return (
+                                    <ConnectionLink
+                                        key={getEntryKey(item)}
+                                        link={item.linkType}
+                                        direction={item.direction}
+                                        count={item.count}
+                                        filterKey={item.probable ? '' : filterKey}
+                                        probability={item.probability}
+                                        onExpandLink={onExpandLink}
+                                        onMoveToFilter={onMoveToFilter}
+                                    />
+                                );
+                            } else if (item.type === 'separator') {
+                                return (
+                                    <hr key={getEntryKey(item)}
+                                        className={`${CLASS_NAME}__links-list-hr`}
+                                    />
+                                );
+                            } else if (item.type === 'probable-hint') {
+                                return (
+                                    <li key={getEntryKey(item)}
+                                        className={`${CLASS_NAME}__links-probably-label`}>
+                                        {t.text('connections_menu.links.suggest_similar')}
+                                    </li>
+                                );
+                            }
+                            return null;
+                        })}
+                    </ul>
+                )}
+            </FocusGroup>
             {entries.length === 0 ? (
                 <label className={`${CLASS_NAME}__links-no-results`}>
                     {t.text('connections_menu.links.no_results')}
@@ -179,10 +169,6 @@ function getEntryKey(entry: ConnectionEntry): string {
     return entry.type === 'link' ? entry.key : entry.type;
 }
 
-function isEntryActive(entry: ConnectionEntry): boolean {
-    return entry.type === 'link';
-}
-
 function getConnectionLinks(links: LinkTypeModel[], options: {
     counts: ConnectionsData['counts'];
     scores: ConnectionSuggestions['scores'];
@@ -252,14 +238,15 @@ function ConnectionLink(props: {
     onExpandLink: (linkDataChunk: LinkDataChunk) => void;
     onMoveToFilter: ((linkDataChunk: LinkDataChunk) => void) | undefined;
     probability?: number;
-    focusProps?: ListFocusableProps;
 }) {
     const {
-        link, filterKey, direction, count, onExpandLink, onMoveToFilter, probability = 0, focusProps,
+        link, filterKey, direction, count, onExpandLink, onMoveToFilter, probability = 0,
     } = props;
     const {model} = useWorkspace();
     const t = useTranslation();
 
+    const {ref, tabIndex} = useFocusGroupItem();
+
     const relation = t.formatLabel(link.label, link.id, model.language);
     const relationIri = model.locale.formatIri(link.id);
     const probabilityPercent = Math.round(probability * 100);
@@ -300,12 +287,14 @@ function ConnectionLink(props: {
     };
 
     return (
-        <div className={`${CLASS_NAME}__link`}
+        <li ref={ref}
+            className={`${CLASS_NAME}__link`}
+            role='listitem'
             data-linktypeid={link.id}>
-            <button {...focusProps}
-                className={`${CLASS_NAME}__link-button`}
+            <button className={`${CLASS_NAME}__link-button`}
                 title={title}
                 onClick={onExpandLinkClick}
+                tabIndex={tabIndex}
             >
                 {direction === 'in' || direction === 'out' ? (
                     <div className={`${CLASS_NAME}__link-direction`}>
@@ -327,12 +316,12 @@ function ConnectionLink(props: {
                 />
             </button>
             {onMoveToFilter ? (
-                <button {...focusProps}
-                    className={`${CLASS_NAME}__link-filter-button`}
+                <button className={`${CLASS_NAME}__link-filter-button`}
                     onClick={onMoveToFilterClick}
                     title={t.text('connections_menu.link.move_to_filter.title')}
+                    tabIndex={tabIndex}
                 />
             ) : null}
-        </div>
+        </li>
     );
 }

src/widgets/toolbarAction.tsx

@@ -143,6 +143,7 @@ export function ToolbarActionOpen(props: ToolbarActionOpenProps) {
                 {children}
             </ToolbarAction>
             <input ref={inputRef}
+                role='none'
                 type='file'
                 className={`${CLASS_NAME}__open-input`}
                 accept={fileAccept}