diff --git a/CHANGELOG.md b/CHANGELOG.md
index 036c5d90..1638deaf 100644
--- a/CHANGELOG.md
+++ b/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`;
diff --git a/src/coreUtils/dom.ts b/src/coreUtils/dom.ts
index c3fe774b..5f99fcf6 100644
--- a/src/coreUtils/dom.ts
+++ b/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;
+}
diff --git a/src/widgets/connectionsMenu/connectionList.tsx b/src/widgets/connectionsMenu/connectionList.tsx
index 51ad5d16..a2150545 100644
--- a/src/widgets/connectionsMenu/connectionList.tsx
+++ b/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>
     );
 }
diff --git a/src/widgets/toolbarAction.tsx b/src/widgets/toolbarAction.tsx
index 8443d840..d78b70a3 100644
--- a/src/widgets/toolbarAction.tsx
+++ b/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}
diff --git a/src/widgets/utility/accessibleList.tsx b/src/widgets/utility/accessibleList.tsx
deleted file mode 100644
index e59a3b40..00000000
--- a/src/widgets/utility/accessibleList.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-import * as React from 'react';
-
-import { useLatest } from '../../coreUtils/hooks';
-
-import {
-    AccessibleTree, type TreeModel, type TreeRenderItem, TreeState, type TreeItemState,
-} from './accessibleTree';
-
-/**
- * Function to render content for each item in an {@link AccessibleList}.
- */
-export type ListRenderItem<T, S> = (props: {
-    /**
-     * Item data.
-     */
-    item: T;
-    /**
-     * Props to set on a sub-element to make it focusable.
-     *
-     * Can be applied to multiple sub-elements to move focus
-     * between them with `Tab` key.
-     */
-    focusProps: ListFocusableProps;
-    /**
-     * Selected state for the item.
-     *
-     * Item is considered selected when the value is different from `undefined`.
-     */
-    selected: S | undefined;
-}) => React.ReactElement | null;
-
-/**
- * Props for a focusable DOM-element within an {@link AccessibleList}.
- */
-export interface ListFocusableProps {
-    /**
-     * See [tabIndex](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex).
-     */
-    readonly tabIndex: number;
-}
-
-const DEFAULT_ROOT_PROPS: React.HTMLProps<HTMLUListElement> = {
-    role: 'list',
-};
-
-const DEFAULT_ITEM_PROPS: React.HTMLProps<HTMLLIElement> = {
-    role: 'listitem',
-};
-
-/**
- * Utility component as base for [accessible](https://www.w3.org/TR/wai-aria/)
- * list-like container.
- *
- * The container component acts as [focus group](https://www.w3.org/TR/wai-aria/#managingfocus)
- * with keyboard navigation via arrow keys between items and `Tab` key to move focus
- * to/from container or within currently focused item (if it has multiple focusable children).
- *
- * @category Components
- */
-export function AccessibleList<T extends object, S = boolean>(props: {
-    /**
-     * Item data to render in the list.
-     */
-    items: readonly T[];
-    /**
-     * Pure function to get unique key for an item.
-     */
-    getItemKey: (item: T) => string;
-    /**
-     * Pure function to determine whether an item is active (`true`) or disabled (`false`).
-     *
-     * Disabled items cannot be focused on.
-     */
-    isItemActive?: (item: T) => boolean;
-    /**
-     * Pure function to render an item.
-     */
-    renderItem: ListRenderItem<T, S>;
-    /**
-     * Selection state for the list items.
-     */
-    selection?: ListSelection<S>;
-    /**
-     * Props for the top-level container element.
-     *
-     * **Default**:
-     * ```
-     * {role: 'list'}
-     * ```
-     */
-    rootProps?: React.HTMLProps<HTMLUListElement>;
-    /**
-     * Props for each element wrapper around rendered item.
-     *
-     * **Default**:
-     * ```
-     * {role: 'listitem'}
-     * ```
-     */
-    itemProps?: React.HTMLProps<HTMLLIElement>;
-}) {
-    const {items, getItemKey, isItemActive, renderItem, selection, rootProps, itemProps} = props;
-
-    const renderTreeItem = React.useCallback<TreeRenderItem<T, S>>(
-        ({item, focusProps, selected}) => renderItem({item, focusProps, selected}),
-        [renderItem]
-    );
-
-    const latestGetKey = useLatest(getItemKey);
-    const latestIsActive = useLatest(isItemActive);
-    const model = React.useMemo((): TreeModel<T, S> => ({
-        getKey: item => latestGetKey.current(item),
-        getChildren: item => undefined,
-        getDefaultSelected: (item, selected) => undefined,
-        isActive: item => latestIsActive.current?.(item) ?? true,
-    }), [latestGetKey, latestIsActive]);
-
-    const forestProps = React.useMemo((): React.HTMLProps<HTMLUListElement> => ({}), []);
-
-    return (
-        <AccessibleTree model={model}
-            items={items}
-            renderItem={renderTreeItem}
-            selected={selection?._state}
-            rootProps={rootProps ?? DEFAULT_ROOT_PROPS}
-            forestProps={forestProps}
-            itemProps={itemProps ?? DEFAULT_ITEM_PROPS}
-        />
-    );
-}
-
-/**
- * Represents a selection state in an {@link AccessibleList}.
- *
- * Item is considered to be selected if associated value is different from `undefined`.
- */
-export class ListSelection<S> implements Iterable<readonly [string, S]> {
-    private static readonly _empty = new ListSelection(
-        new TreeState<any>()
-    );
-
-    /** @hidden */
-    readonly _state: TreeState<S>;
-
-    private constructor(state: TreeState<S>) {
-        this._state = state;
-    }
-
-    /**
-     * Gets a empty selection state.
-     */
-    static empty<S>(): ListSelection<S> {
-        return ListSelection._empty as ListSelection<S>;
-    }
-
-    /**
-     * Creates a selection state from a sequence of `[item, state]` pairs.
-     */
-    static fromEntries<S>(entries: Iterable<readonly [string, S]>): ListSelection<S> {
-        const states = new Map<string, TreeItemState<S>>();
-        for (const [key, state] of entries) {
-            states.set(key, {value: state});
-        }
-        return new ListSelection(new TreeState(states));
-    }
-
-    [Symbol.iterator](): Iterator<readonly [string, S]> {
-        return this.entries();
-    }
-
-    /**
-     * Gets an iterator over selected `[item, state]` pairs.
-     */
-    *entries(): Iterator<readonly [string, S]> {
-        for (const [key, state] of this._state) {
-            if (state.value !== undefined) {
-                yield [key, state.value];
-            }
-        }
-    }
-
-    /**
-     * Gets a selection state for the item with the specified `key`.
-     */
-    get(key: string): S | undefined {
-        return this._state.get(key)?.value;
-    }
-
-    /**
-     * Updates a selection state for the item with the specified `key`.
-     */
-    update(key: string, updater: (previous: S | undefined) => S | undefined): ListSelection<S> {
-        const nextState = this._state.setAt({key, child: undefined}, updater);
-        if (nextState === this._state) {
-            return this;
-        }
-        return new ListSelection(nextState);
-    }
-}
diff --git a/src/widgets/utility/accessibleTree.tsx b/src/widgets/utility/accessibleTree.tsx
index bb3cb59e..deccba26 100644
--- a/src/widgets/utility/accessibleTree.tsx
+++ b/src/widgets/utility/accessibleTree.tsx
@@ -1,10 +1,18 @@
 import * as React from 'react';
 
-import { findNextWithin, findPreviousWithin } from '../../coreUtils/dom';
+import { findParentWithin } from '../../coreUtils/dom';
+
+import { FocusGroup, FocusGroupController, useFocusGroupItem } from './focusGroup';
 
 export interface AccessibleTreeProps<T, S> {
     model: TreeModel<T, S>;
+    /**
+     * Item data to render in the tree.
+     */
     items: readonly T[];
+    /**
+     * Pure function to render an item.
+     */
     renderItem: TreeRenderItem<T, S>;
     expanded?: TreeState<boolean>;
     /**
@@ -12,155 +20,171 @@ export interface AccessibleTreeProps<T, S> {
      */
     defaultExpanded?: boolean;
     onSetExpanded?: (item: T, path: TreeDownPath, expand: boolean) => void;
+    /**
+     * Selection state for the tree.
+     */
     selected?: TreeState<S>;
     /**
      * @default undefined
      */
     defaultSelected?: S;
+    /**
+     * Props for the top-level container element.
+     *
+     * **Default**:
+     * ```
+     * {role: 'list'}
+     * ```
+     */
     rootProps: React.HTMLProps<HTMLUListElement>;
     forestProps: React.HTMLProps<HTMLUListElement>;
+    /**
+     * Props for each element wrapper around rendered item.
+     *
+     * **Default**:
+     * ```
+     * {role: 'listitem'}
+     * ```
+     */
     itemProps: React.HTMLProps<HTMLLIElement>;
 }
 
 export interface TreeModel<T, S> {
+    /**
+     * Pure function to get unique key for an item.
+     */
     readonly getKey: (item: T) => string;
     readonly getChildren: (item: T) => readonly T[] | undefined;
     readonly getDefaultSelected: (item: T, selected: S | undefined) => S | undefined;
+    /**
+     * Pure function to determine whether an item is active (`true`) or disabled (`false`).
+     *
+     * Disabled items cannot be focused on.
+     */
     readonly isActive: (item: T) => boolean;
 }
 
+/**
+ * Function to render content for each item in an {@link AccessibleTree}.
+ */
 export type TreeRenderItem<T, S> = (props: {
+    /**
+     * Item data.
+     */
     item: T;
     path: TreeUpPath;
+    /**
+     * Props to set on a sub-element to make it focusable.
+     *
+     * Can be applied to multiple sub-elements to move focus
+     * between them with `Tab` key.
+     */
     focusProps: TreeFocusableProps;
     expanded: boolean;
+    /**
+     * Selected state for the item.
+     *
+     * Item is considered selected when the value is different from `undefined`.
+     */
     selected: S | undefined;
 }) => React.ReactElement | null;
 
+/**
+ * Props for a focusable DOM-element.
+ */
 export interface TreeFocusableProps {
-    readonly tabIndex: number;
+    /**
+     * See [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex).
+     */
+    readonly tabIndex: number | undefined;
 }
 
+/**
+ * Utility component as base for [accessible](https://www.w3.org/TR/wai-aria/)
+ * tree-like container with selection.
+ *
+ * @category Components
+ */
 export function AccessibleTree<T extends object, S>(props: AccessibleTreeProps<T, S>) {
     const {
         model, items, renderItem, expanded, defaultExpanded, onSetExpanded,
         selected, defaultSelected, rootProps, forestProps, itemProps,
     } = props;
 
-    const getTotalChildCount = React.useMemo(() => makeGetTotalChildCount(model), [model]);
     const treeContext = React.useMemo((): TreeContext<T, S> => ({
         model,
-        getTotalChildCount,
         renderItem,
         forestProps,
         itemProps,
-    }), [model, getTotalChildCount, renderItem, forestProps, itemProps]);
+    }), [model, renderItem, forestProps, itemProps]);
 
-    const rootRef = React.useRef<HTMLUListElement>(null);
-    const [focusIndex, setFocusIndex] = React.useState(0);
-    const tryFocusOnItemElement = (target: Element | undefined) => {
-        if (target) {
-            const focusable = target.querySelector('[tabIndex]');
-            if (focusable instanceof HTMLElement) {
-                focusable.focus();
-            }
-            const targetIndex = Number(target.getAttribute('data-tree-index'));
-            if (Number.isFinite(targetIndex)) {
-                setFocusIndex(targetIndex);
+    const onKeyDown = (
+        e: React.KeyboardEvent<HTMLUListElement>,
+        controller: FocusGroupController
+    ) => {
+        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+            controller.defaultKeyDown(e);
+        } else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+            if (e.target instanceof HTMLElement && onSetExpanded) {
+                e.preventDefault();
+                const current = findParentWithin(
+                    e.target,
+                    e.currentTarget,
+                    item => item.hasAttribute('data-tree-index')
+                );
+                if (!current) {
+                    return;
+                }
+                const currentIndex = Number(current.getAttribute('data-tree-index'));
+                if (Number.isFinite(currentIndex)) {
+                    if (e.key === 'ArrowLeft' && (
+                        !current.hasAttribute('aria-expanded') ||
+                        current.getAttribute('aria-expanded') === 'false'
+                    )) {
+                        controller.focusParent({from: current});
+                    } else {
+                        // Expand or collapse current item
+                        const indexPath = reconstructTreeIndexPath(current, e.currentTarget);
+                        const found = indexPath
+                            ? lookupTreeItem(treeContext.model, items, indexPath)
+                            : undefined;
+                        if (found) {
+                            const [target, path] = found;
+                            const expand = e.key === 'ArrowRight';
+                            onSetExpanded(target, path, expand);
+                        }
+                    }
+                }
             }
+        } else {
+            rootProps?.onKeyDown?.(e);
         }
     };
 
-    React.useEffect(() => {
-        setFocusIndex(previousIndex => {
-            const previousItem = findItemAtIndex(
-                model, getTotalChildCount, items, 0, previousIndex
-            );
-            if (!(previousItem && model.isActive(previousItem[0]))) {
-                const found = findItem(model, items, item => model.isActive(item));
-                if (found) {
-                    const [nextItem, nextIndex] = found;
-                    return nextIndex;
-                }
-            }
-            return previousIndex;
-        });
-    }, [model, getTotalChildCount, items]);
-
     return (
-        <Forest treeContext={treeContext}
-            items={items}
-            index={0}
-            focusIndex={focusIndex}
-            expanded={expanded}
-            defaultExpanded={defaultExpanded ?? false}
-            selected={selected}
-            defaultSelected={defaultSelected}
-            rootProps={{
-                ...rootProps,
-                ref: rootRef,
-                onClick: e => {
-                    const current = findTreeIndexedAt(e.target, e.currentTarget);
-                    if (current) {
-                        const currentIndex = Number(current.getAttribute('data-tree-index'));
-                        if (Number.isFinite(currentIndex)) {
-                            setFocusIndex(currentIndex);
-                        }
-                    }
-                },
-                onKeyDown: e => {
-                    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-                        e.preventDefault();
-                        const current = findTreeIndexedAt(e.target, e.currentTarget);
-                        if (current) {
-                            const next = e.key === 'ArrowUp'
-                                ? findPreviousWithin(current, e.currentTarget, isActiveIndexedElement)
-                                : findNextWithin(current, e.currentTarget, isActiveIndexedElement);
-                            tryFocusOnItemElement(next);
-                        }
-                    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
-                        if (onSetExpanded) {
-                            e.preventDefault();
-                            const current = findTreeIndexedAt(e.target, e.currentTarget);
-                            if (!current) {
-                                return;
-                            }
-                            const currentIndex = Number(current.getAttribute('data-tree-index'));
-                            if (Number.isFinite(currentIndex)) {
-                                if (e.key === 'ArrowLeft' && (
-                                    !current.hasAttribute('aria-expanded') ||
-                                    current.getAttribute('aria-expanded') === 'false'
-                                )) {
-                                    // Focus on parent item
-                                    const parent = current.parentElement
-                                        ? findTreeIndexedAt(current.parentElement, e.currentTarget)
-                                        : undefined;
-                                    tryFocusOnItemElement(parent);
-                                } else {
-                                    // Expand or collapse current item
-                                    const found = findItemAtIndex(
-                                        model, getTotalChildCount, items, 0, currentIndex
-                                    );
-                                    if (found) {
-                                        const [target, path] = found;
-                                        const expand = e.key === 'ArrowRight';
-                                        onSetExpanded(target, path, expand);
-                                    }
-                                }
-                            }
-                        }
-                    } else {
-                        rootProps?.onKeyDown?.(e);
-                    }
-                },
-            }}
-        />
+        <FocusGroup>
+            {({ref, controller}) => (
+                <Forest
+                    treeContext={treeContext}
+                    items={items}
+                    expanded={expanded}
+                    defaultExpanded={defaultExpanded ?? false}
+                    selected={selected}
+                    defaultSelected={defaultSelected}
+                    rootProps={{
+                        ...rootProps,
+                        ref,
+                        onClick: controller.defaultClick,
+                        onKeyDown: e => onKeyDown(e, controller),
+                    }}
+                />
+            )}
+        </FocusGroup>
     );
 }
 
 interface TreeContext<T, S> {
     readonly model: TreeModel<T, S>;
-    readonly getTotalChildCount: (item: T) => number;
     readonly renderItem: TreeRenderItem<T, S>;
     readonly forestProps: React.HTMLProps<HTMLUListElement>;
     readonly itemProps: React.HTMLProps<HTMLLIElement>;
@@ -169,9 +193,7 @@ interface TreeContext<T, S> {
 function Forest<T, S>(props: {
     treeContext: TreeContext<T, S>;
     items: readonly T[];
-    index: number;
     parentPath?: TreeUpPath;
-    focusIndex: number;
     expanded: TreeState<boolean> | undefined;
     defaultExpanded: boolean;
     selected: TreeState<S> | undefined;
@@ -179,17 +201,14 @@ function Forest<T, S>(props: {
     rootProps?: React.HTMLProps<HTMLUListElement>;
 }) {
     const {
-        treeContext, items, index, parentPath, focusIndex, expanded, defaultExpanded,
+        treeContext, items, parentPath, expanded, defaultExpanded,
         selected, defaultSelected, rootProps,
     } = props;
-    const {model, getTotalChildCount, forestProps} = treeContext;
+    const {model, forestProps} = treeContext;
     const targetProps = rootProps ?? forestProps;
-    let nextIndex = index;
     return (
         <ul {...targetProps}>
-            {items.map(item => {
-                const itemIndex = nextIndex;
-                nextIndex += 1 + getTotalChildCount(item);
+            {items.map((item, index) => {
                 const path: TreeUpPath = {
                     parent: parentPath,
                     key: model.getKey(item),
@@ -198,9 +217,8 @@ function Forest<T, S>(props: {
                     <Item key={path.key}
                         treeContext={treeContext}
                         item={item}
-                        index={itemIndex}
+                        index={index}
                         path={path}
-                        focusIndex={focusIndex}
                         expanded={expanded?.get(path.key)}
                         defaultExpanded={defaultExpanded}
                         selected={selected?.get(path.key)}
@@ -217,43 +235,40 @@ function Item<T, S>(props: {
     item: T;
     index: number;
     path: TreeUpPath;
-    focusIndex: number;
     expanded: TreeItemState<boolean> | undefined;
     defaultExpanded: boolean;
     selected: TreeItemState<S> | undefined;
     defaultSelected: S | undefined;
 }) {
     const {
-        treeContext, item, index, path, focusIndex, expanded, defaultExpanded,
+        treeContext, item, index, path, expanded, defaultExpanded,
         selected, defaultSelected,
     } = props;
     const {model, renderItem, itemProps} = treeContext;
 
+    const isActive = model.isActive(item);
+    const {ref, tabIndex} = useFocusGroupItem({active: isActive});
     const leafExpanded = expanded?.value ?? defaultExpanded;
     const leafSelected = selected?.value ?? defaultSelected;
     const children = model.getChildren(item);
 
     return (
         <li {...itemProps}
+            ref={ref}
             data-tree-index={index}
-            data-tree-active={model.isActive(item) ? true : undefined}
             aria-expanded={!children || children.length === 0 ? undefined : leafExpanded}
             aria-selected={leafSelected !== undefined}>
             {renderItem({
                 item,
                 path,
-                focusProps: {
-                    tabIndex: index === focusIndex ? 0 : -1,
-                },
+                focusProps: {tabIndex},
                 expanded: leafExpanded,
                 selected: leafSelected,
             })}
             {leafExpanded && children && children.length > 0 ? (
                 <Forest treeContext={treeContext}
                     items={children}
-                    index={index + 1}
                     parentPath={path}
-                    focusIndex={focusIndex}
                     expanded={expanded?.level}
                     defaultExpanded={defaultExpanded}
                     selected={selected?.level}
@@ -364,104 +379,52 @@ export function treePathToDown(upPath: TreeUpPath): TreeDownPath {
     return downward;
 }
 
-function makeGetTotalChildCount<T extends object, S>(
-    model: TreeModel<T, S>
-): (item: T) => number {
-    const totalChildCount = new WeakMap<T, number>();
-    const getTotalChildCount = (item: T): number => {
-        const children = model.getChildren(item);
-        if (!children || children.length === 0) {
-            return 0;
-        }
-        let count = totalChildCount.get(item);
-        if (count === undefined) {
-            count = children.reduce(
-                (acc, child) => acc + 1 + getTotalChildCount(child),
-                0
-            );
-            totalChildCount.set(item, count);
-        }
-        return count;
-    };
-    return getTotalChildCount;
-}
-
-function findItem<T, S>(
-    model: TreeModel<T, S>,
-    items: readonly T[],
-    isMatch: (item: T) => boolean
-): [T, number] | undefined {
-    const stack: Array<[readonly T[], number]> = [[items, 0]];
-    let nextIndex = 0;
-    while (true) {
-        const frame = stack.pop();
-        if (!frame) {
-            break;
-        }
-        const [children, startAt] = frame;
-        for (let i = startAt; i < children.length; i++) {
-            const child = children[i];
-            if (isMatch(child)) {
-                return [child, nextIndex];
-            }
-            nextIndex++;
-            const nested = model.getChildren(child);
-            if (nested && nested.length > 0) {
-                frame[1] = i + 1;
-                stack.push(frame);
-                stack.push([nested, 0]);
-                break;
+function reconstructTreeIndexPath(item: Element, parent: Element): number[] | undefined {
+    const indexPath: number[] = [];
+    let current: Element | null = item;
+    while (current && current !== parent) {
+        if (current.hasAttribute('data-tree-index')) {
+            const index = Number(current.getAttribute('data-tree-index'));
+            if (Number.isFinite(index)) {
+                indexPath.push(index);
+            } else {
+                return undefined;
             }
         }
+        current = current.parentElement;
     }
-    return undefined;
+    indexPath.reverse();
+    return indexPath;
 }
 
-function findItemAtIndex<T, S>(
+function lookupTreeItem<T, S>(
     model: TreeModel<T, S>,
-    getTotalChildCount: (item: T) => number,
     items: readonly T[],
-    firstIndex: number,
-    targetIndex: number
+    indexPath: readonly number[]
 ): [T, TreeDownPath] | undefined {
-    let current = firstIndex;
-    for (const item of items) {
-        if (current === targetIndex) {
-            return [item, {key: model.getKey(item), child: undefined}];
-        }
-        current++;
-        const count = getTotalChildCount(item);
-        if (targetIndex < current + count) {
-            const children = model.getChildren(item);
-            if (!children) {
-                return undefined;
-            }
-            const found = findItemAtIndex(model, getTotalChildCount, children, current, targetIndex);
-            if (found) {
-                const [target, child] = found;
-                return [target, {key: model.getKey(item), child}];
-            }
+    let level: readonly T[] | undefined = items;
+    let item: T | undefined;
+    let topPath: { child: TreeDownPath | undefined; key: string } | undefined;
+    let tailPath: { child: TreeDownPath | undefined; key: string } | undefined;
+    for (const index of indexPath) {
+        if (!level || index < 0 || index >= level.length) {
             return undefined;
         }
-        current += count;
-    }
-    return undefined;
-}
-
-function findTreeIndexedAt(target: EventTarget, parent: HTMLElement): HTMLElement | undefined {
-    if (!(target instanceof HTMLElement)) {
-        return undefined;
-    }
-    let current: HTMLElement | null = target;
-    while (current && current !== parent) {
-        if (current.hasAttribute('data-tree-index')) {
-            return current;
+        item = level[index];
+        if (tailPath) {
+            tailPath.child = {
+                child: undefined,
+                key: model.getKey(item),
+            };
+            tailPath = tailPath.child;
+        } else {
+            topPath = {
+                child: undefined,
+                key: model.getKey(item),
+            };
+            tailPath = topPath;
         }
-        current = current.parentElement;
+        level = model.getChildren(item);
     }
-    return undefined;
-}
-
-function isActiveIndexedElement(element: Element): boolean {
-    return element.hasAttribute('data-tree-index') && element.hasAttribute('data-tree-active');
+    return item && topPath ? [item, topPath] : undefined;
 }
diff --git a/src/widgets/utility/dropdown.tsx b/src/widgets/utility/dropdown.tsx
index 45d27476..7c47b6be 100644
--- a/src/widgets/utility/dropdown.tsx
+++ b/src/widgets/utility/dropdown.tsx
@@ -1,6 +1,10 @@
 import cx from 'clsx';
 import * as React from 'react';
 
+import {
+    FocusGroup, FocusGroupController, useFocusGroup, useFocusGroupItem,
+} from './focusGroup';
+
 /**
  * Props for {@link Dropdown} component.
  *
@@ -123,22 +127,36 @@ export function DropdownMenu(props: DropdownMenuProps) {
         [expanded, setExpanded]
     );
     const onClickOutside = React.useCallback(() => setExpanded(false), [setExpanded]);
+    const onKeyDown = (e: React.KeyboardEvent, controller: FocusGroupController) => {
+        if (e.key === 'Escape') {
+            setExpanded(false);
+        } else {
+            controller.defaultKeyDown(e);
+        }
+    };
     return (
         <DropdownMenuContext.Provider value={providedContext}>
-            <Dropdown {...otherProps}
-                className={cx(className, MENU_CLASS_NAME)}
-                aria-haspopup='menu'
-                direction={direction}
-                expanded={expanded}
-                toggle={
-                    <DropdownMenuToggleButton title={title} />
-                }
-                onClickOutside={onClickOutside}>
-                <ul role='menu'
-                    className={`${MENU_CLASS_NAME}__items`}>
-                    {children}
-                </ul>
-            </Dropdown>
+            <FocusGroup>
+                {({ref, controller}) => (
+                    <Dropdown {...otherProps}
+                        className={cx(className, MENU_CLASS_NAME)}
+                        aria-haspopup='menu'
+                        direction={direction}
+                        expanded={expanded}
+                        toggle={
+                            <DropdownMenuToggleButton title={title} />
+                        }
+                        onClickOutside={onClickOutside}>
+                        <div ref={ref}
+                            role='menu'
+                            className={`${MENU_CLASS_NAME}__items`}
+                            onClick={controller.defaultClick}
+                            onKeyDown={e => onKeyDown(e, controller)}>
+                            {children}
+                        </div>
+                    </Dropdown>
+                )}
+            </FocusGroup>
         </DropdownMenuContext.Provider>
     );
 }
@@ -161,7 +179,12 @@ export function useDropdownMenu(): DropdownMenuContext {
 function DropdownMenuToggleButton(props: { title?: string }) {
     const {title} = props;
     const {expanded, setExpanded} = useDropdownMenu();
-
+    const controller = useFocusGroup();
+    React.useLayoutEffect(() => {
+        if (!expanded) {
+            controller.ensureFocusable({reset: true});
+        }
+    }, [expanded]);
     return (
         <button type='button'
             className={cx(
@@ -215,26 +238,33 @@ const ITEM_CLASS_NAME = 'reactodia-dropdown-menu-item';
  */
 export function DropdownMenuItem(props: DropdownMenuItemProps) {
     const {className, title, disabled, onSelect, children, ...otherProps} = props;
-    const menuContext = useDropdownMenu();
+    const {expanded, setExpanded} = useDropdownMenu();
+
+    const isActive = expanded && !disabled;
+    const {ref, tabIndex} = useFocusGroupItem({active: isActive});
 
     const wrappedOnClick = React.useCallback(() => {
-        menuContext?.setExpanded(() => false);
+        setExpanded(() => false);
         onSelect?.();
-    }, [onSelect, menuContext]);
+    }, [onSelect, setExpanded]);
 
     return (
-        <li {...otherProps}
+        <button {...otherProps}
+            ref={ref}
+            type='button'
             role='menuitem'
+            tabIndex={tabIndex}
             className={cx(
                 className,
                 ITEM_CLASS_NAME,
                 disabled ? `${ITEM_CLASS_NAME}--disabled` : undefined,
                 'reactodia-btn reactodia-btn-default'
             )}
+            disabled={disabled}
             title={title}
             onClick={disabled ? undefined : wrappedOnClick}>
             {children}
-        </li>
+        </button>
     );
 }
 
diff --git a/src/widgets/utility/focusGroup.tsx b/src/widgets/utility/focusGroup.tsx
new file mode 100644
index 00000000..efedae64
--- /dev/null
+++ b/src/widgets/utility/focusGroup.tsx
@@ -0,0 +1,363 @@
+import * as React from 'react';
+
+import { findNextWithin, findPreviousWithin, findParentWithin } from '../../coreUtils/dom';
+import { Events, EventSource } from '../../coreUtils/events';
+import { useObservedProperty } from '../../coreUtils/hooks';
+
+/**
+ * Utility component to implement [accessible](https://www.w3.org/TR/wai-aria/) focus container.
+ *
+ * The root component acts as [focus group](https://www.w3.org/TR/wai-aria/#managingfocus)
+ * with pre-defined methods to provide keyboard navigation between items (e.g. with arrow keys)
+ * and `Tab` key to move focus to/from container or within currently focused item
+ * (if a {@link useFocusGroupItem group item} has multiple focusable children).
+ *
+ * @category Components
+ * @see {@link useFocusGroup}
+ * @see {@link useFocusGroupItem}
+ */
+export function FocusGroup(props: {
+    /**
+     * Render function for children content with {@link useFocusGroupItem focusable items}.
+     *
+     * Focusable group root ***must** use provided {@link FocusGroupProvidedProps.ref ref}
+     * to properly maintain the focusable state.
+     */
+    children: (providedProps: FocusGroupProvidedProps) => React.ReactNode;
+}) {
+    const {children} = props;
+    const [controller] = React.useState(() => new StatefulFocusGroupController());
+
+    const content = children({ref: controller._setRoot, controller});
+
+    const [focusableVersion, setFocusableVersion] = React.useState(0);
+    React.useLayoutEffect(
+        () => controller.ensureFocusable(),
+        [focusableVersion, content]
+    );
+
+    React.useEffect(() => {
+        let queued = false;
+        const listener = () => {
+            if (!queued) {
+                queued = true;
+                setTimeout(() => {
+                    setFocusableVersion(v => (v + 1) % Number.MAX_SAFE_INTEGER);
+                    queued = false;
+                }, 0);
+            }
+        };
+        controller.events.on('lostFocusable', listener);
+        return () => controller.events.off('lostFocusable', listener);
+    }, []);
+
+    return (
+        <FocusGroupContext.Provider value={controller}>
+            {content}
+        </FocusGroupContext.Provider>
+    );
+}
+
+const FocusGroupContext = React.createContext<StatefulFocusGroupController | null>(null);
+
+/**
+ * Props for {@link FocusGroup} children render function.
+ */
+export interface FocusGroupProvidedProps {
+    /**
+     * **Required** ref for the group root element.
+     */
+    readonly ref: (element: HTMLElement | null) => void;
+    /**
+     * Controller to manipulate the focus inside the group.
+     */
+    readonly controller: FocusGroupController;
+}
+
+/**
+ * @category Hooks
+ * @see {@link FocusGroup}
+ */
+export function useFocusGroup(): FocusGroupController {
+    const controller = React.useContext(FocusGroupContext);
+    if (!controller) {
+        throw new Error('Reactodia: missing <FocusGroup> context');
+    }
+    return controller;
+}
+
+/**
+ * Result for {@link useFocusGroupItem} hook function.
+ */
+export interface UseFocusGroupItemResult {
+    /**
+     * **Required** ref for the focusable group item element.
+     */
+    readonly ref: (element: HTMLElement | null) => void;
+    /**
+     * [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex)
+     * attribute for the focusable sub-children inside the group item.
+     */
+    readonly tabIndex: -1 | 0 | undefined;
+}
+
+/**
+ * Hook to render a focusable item inside {@link FocusGroup}.
+ *
+ * Focusable item allows multiple "tab-indexable" sub-children inside reachable via `Tab` key
+ * when the item is focused. When moving focus with {@link FocusGroupController.focusNext}
+ * and other methods, the first "tab-indexable" sub-child would be focused.
+ *
+ * Focusable item element ***must** use provided {@link UseFocusGroupItemResult.ref ref}
+ * to properly maintain the focusable state.
+ *
+ * @category Hooks
+ * @see {@link FocusGroup}
+ */
+export function useFocusGroupItem(params?: {
+    /**
+     * Sets the group item to be "active" as opposed to "disabled".
+     *
+     * Only active items can be focused with {@link FocusGroupController} methods.
+     */
+    active?: boolean;
+    /**
+     * Internal item label for debugging purposes.
+     */
+    debugLabel?: string | number;
+}): UseFocusGroupItemResult {
+    const {debugLabel, active = true} = params ?? {};
+    const controller = React.useContext(FocusGroupContext);
+    if (!controller) {
+        throw new Error('Reactodia: missing <FocusGroup> context');
+    }
+    const [token] = React.useState(new FocusToken(debugLabel));
+    const itemRef = React.useCallback((element: HTMLElement | null) => {
+        controller._bindFocusable(token, element);
+    }, [controller, token]);
+    const isFocused = useObservedProperty(
+        controller.events,
+        'changeFocus',
+        () => controller._getFocus() === token
+    );
+    return {
+        ref: itemRef,
+        tabIndex: active ? (isFocused ? 0 : -1) : undefined,
+    };
+}
+
+class FocusToken {
+    constructor(
+        readonly debugLabel?: string | number
+    ) {}
+}
+
+/**
+ * Controller to manipulate the focus inside the {@link FocusGroup}.
+ */
+export interface FocusGroupController {
+    /**
+     * Gets current focus group root DOM element.
+     */
+    getRoot(): HTMLElement | null;
+    /**
+     * Tries to focus on active item containing specified `leaf` child.
+     */
+    focusAt(leaf: HTMLElement): void;
+    /**
+     * Tries to focus on a previous active item closest to item with
+     * specified `from` child.
+     */
+    focusPrevious(params: { from: Element }): void;
+    /**
+     * Tries to focus on a next active item closest to item with
+     * specified `from` child.
+     */
+    focusNext(params: { from: Element }): void;
+    /**
+     * Tries to focus on a parent active item closest to item with
+     * specified `from` child.
+     */
+    focusParent(params: { from: Element }): void;
+    /**
+     * Ensures that the group has a reachable via `Tab` key focusable item
+     * otherwise (or always if `reset` is true) makes the first active
+     * focusable item as such.
+     */
+    ensureFocusable(params?: { reset?: boolean }): void;
+    /**
+     * Default implementation for `onClick` handler which focuses on the clicked item.
+     */
+    readonly defaultClick: (e: React.MouseEvent) => void;
+    /**
+     * Default implementation for `onKeyDown` handler which focuses on the next/previous
+     * items on `ArrowDown`/`ArrowUp` keys.
+     */
+    readonly defaultKeyDown: (e: React.KeyboardEvent) => void;
+}
+
+interface FocusGroupControllerEvents {
+    changeFocus: { readonly source: StatefulFocusGroupController };
+    lostFocusable: { readonly source: StatefulFocusGroupController };
+}
+
+class StatefulFocusGroupController implements FocusGroupController {
+    private readonly _source = new EventSource<FocusGroupControllerEvents>();
+    readonly events: Events<FocusGroupControllerEvents> = this._source;
+
+    private _root: HTMLElement | null = null;
+    private _tokens = new WeakMap<Element, FocusToken>();
+    private _focus: FocusToken | undefined;
+
+    getRoot(): HTMLElement | null {
+        return this._root;
+    }
+
+    readonly _setRoot = (root: HTMLElement | null) => {
+        this._root = root;
+        this._focus = undefined;
+    };
+
+    _getFocus(): FocusToken | undefined {
+        return this._focus;
+    }
+
+    _bindFocusable(token: FocusToken, element: HTMLElement | null) {
+        if (element) {
+            this._tokens.set(element, token);
+        } else if (token === this._focus) {
+            this._source.trigger('lostFocusable', {source: this});
+        }
+    }
+
+    private _isItem = (element: Element): boolean => {
+        return this._tokens.has(element);
+    };
+
+    private _isFocusableItem = (element: Element): boolean => {
+        return this._isItem(element) && Boolean(
+            element.hasAttribute('tabindex') || element.querySelector('[tabindex]')
+        );
+    };
+
+    focusAt(leaf: HTMLElement): void {
+        if (!this._root) {
+            return;
+        }
+        const item = findParentWithin(leaf, this._root, this._isItem);
+        if (item) {
+            this._changeFocused(item);
+        }
+    }
+
+    focusPrevious(params: { from: Element }): void {
+        const {from} = params;
+        if (!this._root) {
+            return;
+        }
+        const item = findParentWithin(from, this._root, this._isItem);
+        if (item) {
+            const previous = findPreviousWithin(item, this._root, this._isFocusableItem);
+            this._tryFocusOnItemElement(previous);
+        }
+    }
+
+    focusNext(params: { from: Element }): void {
+        const {from} = params;
+        if (!this._root) {
+            return;
+        }
+        const item = findParentWithin(from, this._root, this._isItem);
+        if (item) {
+            const next = findNextWithin(item, this._root, this._isFocusableItem);
+            this._tryFocusOnItemElement(next);
+        }
+    }
+
+    focusParent(params: { from: Element }): void {
+        const {from} = params;
+        if (!this._root) {
+            return;
+        }
+        const item = findParentWithin(from, this._root, this._isItem);
+        if (!item) {
+            return;
+        }
+        const parent = item.parentElement
+            ? findParentWithin(item.parentElement, this._root, this._isItem)
+            : undefined;
+        this._tryFocusOnItemElement(parent);
+    }
+
+    ensureFocusable(params?: { reset?: boolean }): void {
+        const {reset = false} = params ?? {};
+        if (!this._root) {
+            return;
+        }
+
+        const focusedToken = reset ? undefined : this._focus;
+        if (focusedToken) {
+            for (const focusable of this._root.querySelectorAll('[tabindex="0"]')) {
+                const item = findParentWithin(focusable, this._root, this._isItem);
+                const itemToken = item ? this._tokens.get(item) : undefined;
+                if (itemToken === focusedToken) {
+                    /* Focused item exists and focusable */
+                    return;
+                }
+            }
+        }
+
+        let foundFocusable = false;
+        for (const focusable of this._root.querySelectorAll('[tabindex]')) {
+            const item = findParentWithin(focusable, this._root, this._isItem);
+            if (item && this._tokens.has(item)) {
+                foundFocusable = true;
+                this._changeFocused(item);
+                break;
+            }
+        }
+
+        if (reset && !foundFocusable) {
+            this._focus = undefined;
+        }
+    }
+
+    private _tryFocusOnItemElement(target: Element | undefined): void {
+        if (target) {
+            const focusable = target.hasAttribute('tabindex')
+                ? target : target.querySelector('[tabindex]');
+            if (focusable instanceof HTMLElement) {
+                focusable.focus();
+            }
+            this._changeFocused(target);
+        }
+    };
+
+    private _changeFocused(target: Element): void {
+        const token = this._tokens.get(target);
+        if (token && this._focus !== token) {
+            this._focus = token;
+            this._source.trigger('changeFocus', {source: this});
+        }
+    }
+
+    defaultClick = (e: React.MouseEvent) => {
+        if (e.target instanceof HTMLElement) {
+            this.focusAt(e.target);
+        }
+    };
+
+    defaultKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            if (e.target instanceof HTMLElement) {
+                this.focusPrevious({from: e.target});
+            }
+        } else if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            if (e.target instanceof HTMLElement) {
+                this.focusNext({from: e.target});
+            }
+        }
+    };
+}
diff --git a/src/widgets/utility/searchResults.tsx b/src/widgets/utility/searchResults.tsx
index a48bff87..466526a6 100644
--- a/src/widgets/utility/searchResults.tsx
+++ b/src/widgets/utility/searchResults.tsx
@@ -8,9 +8,7 @@ import { ElementModel, ElementIri } from '../../data/model';
 import { getAllPresentEntities } from '../../editor/dataDiagramModel';
 import { useWorkspace } from '../../workspace/workspaceContext';
 
-import {
-    AccessibleList, type ListRenderItem, ListSelection, type ListFocusableProps,
-} from './accessibleList';
+import { FocusGroup, useFocusGroupItem } from './focusGroup';
 import { ListElementView, startDragElements } from './listElementView';
 
 const CLASS_NAME = 'reactodia-search-results';
@@ -75,22 +73,6 @@ export function SearchResults(props: SearchResultsProps) {
         useDragAndDrop = true, multiSelection = true, footer,
     } = props;
 
-    const renderItem = React.useCallback<ListRenderItem<ElementItem, boolean>>(
-        ({item, focusProps, selected}) => (
-            <ResultItem item={item} focusProps={focusProps} selected={selected} />
-        ),
-        []
-    );
-    const rootProps = React.useMemo((): React.HTMLProps<HTMLUListElement> => ({
-        className: `${CLASS_NAME}__root`,
-        role: 'list',
-        'aria-multiselectable': true,
-    }), []);
-    const itemProps = React.useMemo((): React.HTMLProps<HTMLLIElement> => ({
-        className: `${CLASS_NAME}__item`,
-        role: 'listitem',
-    }), []);
-
     const computeIsItemDisabled = useIsItemDisabledWithDefault(isItemDisabled);
     const extendedItems = React.useMemo(() => items.map((data): ElementItem => ({
         data,
@@ -145,13 +127,6 @@ export function SearchResults(props: SearchResultsProps) {
         ]
     );
 
-    const selected = React.useMemo((): ListSelection<boolean> | undefined => {
-        if (selection.size === 0) {
-            return undefined;
-        }
-        return ListSelection.fromEntries(Array.from(selection, iri => [iri, true]));
-    }, [selection]);
-
     React.useEffect(() => {
         const leftovers = new Set(selection);
         for (const item of extendedItems) {
@@ -169,15 +144,23 @@ export function SearchResults(props: SearchResultsProps) {
     return (
         <SearchResultsContext.Provider value={searchResultsContext}>
             <div className={CLASS_NAME}>
-                <AccessibleList
-                    items={extendedItems}
-                    getItemKey={getElementItemKey}
-                    isItemActive={isElementItemActive}
-                    renderItem={renderItem}
-                    selection={selected}
-                    rootProps={rootProps}
-                    itemProps={itemProps}
-                />
+                <FocusGroup>
+                    {({ref, controller}) => (
+                        <ul ref={ref}
+                            className={`${CLASS_NAME}__root`}
+                            role='list'
+                            aria-multiselectable={true}
+                            onClick={controller.defaultClick}
+                            onKeyDown={controller.defaultKeyDown}>
+                            {extendedItems.map(item => (
+                                <ResultItem key={getElementItemKey(item)}
+                                    item={item}
+                                    selected={selection.has(item.data.id)}
+                                />
+                            ))}
+                        </ul>
+                    )}
+                </FocusGroup>
                 {footer}
             </div>
         </SearchResultsContext.Provider>
@@ -240,34 +223,42 @@ function useSearchResultsContext(): SearchResultsContext {
 
 function ResultItem(props: {
     item: ElementItem;
-    focusProps: ListFocusableProps;
-    selected: boolean | undefined;
+    selected: boolean;
 }) {
-    const {item, focusProps, selected} = props;
+    const {item, selected} = props;
     const {
         highlightText, useDragAndDrop, selection, onSetSelected,
     } = useSearchResultsContext();
+    const {ref, tabIndex} = useFocusGroupItem({
+        debugLabel: item.data.id,
+        active: item.active,
+    });
     return (
-        <ListElementView {...(item.active ? focusProps : undefined)}
-            element={item.data}
-            highlightText={highlightText}
-            disabled={!item.active}
-            selected={Boolean(selected)}
-            onClick={item.active ? e => onSetSelected(item, !selected, e) : undefined}
-            onKeyDown={e => {
-                if (item.active && e.key === ' ') {
-                    e.preventDefault();
-                    onSetSelected(item, !selected, e);
-                }
-            }}
-            onDragStart={useDragAndDrop ? e => {
-                const iris: ElementIri[] = [];
-                selection.forEach(iri => iris.push(iri));
-                if (!selection.has(item.data.id)) {
-                    iris.push(item.data.id);
-                }
-                return startDragElements(e, iris);
-            } : undefined}
-        />
+        <li ref={ref}
+            className={`${CLASS_NAME}__item`}
+            role='listitem'>
+            <ListElementView
+                tabIndex={tabIndex}
+                element={item.data}
+                highlightText={highlightText}
+                disabled={!item.active}
+                selected={Boolean(selected)}
+                onClick={item.active ? e => onSetSelected(item, !selected, e) : undefined}
+                onKeyDown={e => {
+                    if (item.active && e.key === ' ') {
+                        e.preventDefault();
+                        onSetSelected(item, !selected, e);
+                    }
+                }}
+                onDragStart={useDragAndDrop ? e => {
+                    const iris: ElementIri[] = [];
+                    selection.forEach(iri => iris.push(iri));
+                    if (!selection.has(item.data.id)) {
+                        iris.push(item.data.id);
+                    }
+                    return startDragElements(e, iris);
+                } : undefined}
+            />
+        </li>
     );
 }
diff --git a/src/workspace.ts b/src/workspace.ts
index 0cddf167..3a660404 100644
--- a/src/workspace.ts
+++ b/src/workspace.ts
@@ -205,13 +205,14 @@ export {
 export {
     AnnotationSupport, type AnnotationSupportProps, type AnnotationCommands,
 } from './widgets/annotation';
-export {
-    AccessibleList, type ListFocusableProps, type ListRenderItem, ListSelection,
-} from './widgets/utility/accessibleList';
 export { DraggableHandle, type DraggableHandleProps } from './widgets/utility/draggableHandle';
 export {
     DropdownMenu, type DropdownMenuProps, DropdownMenuItem, type DropdownMenuItemProps,
 } from './widgets/utility/dropdown';
+export {
+    FocusGroup, useFocusGroup, type FocusGroupController,
+    useFocusGroupItem, type UseFocusGroupItemResult,
+} from './widgets/utility/focusGroup';
 export {
     ListElementView, type ListElementViewProps, highlightSubstring, startDragElements,
 } from './widgets/utility/listElementView';
diff --git a/styles/utility/_dropdown.scss b/styles/utility/_dropdown.scss
index 41476e31..f0522acd 100644
--- a/styles/utility/_dropdown.scss
+++ b/styles/utility/_dropdown.scss
@@ -52,9 +52,6 @@
   }
 
   &__items {
-    margin: 0;
-    padding: 0;
-    list-style: none;
     display: flex;
     background-color: theme.$background-color-surface;
   }
@@ -71,6 +68,7 @@
 .reactodia-dropdown-menu-item {
   display: flex;
   border-radius: unset;
+  outline-offset: -2px;
 
   .reactodia-dropdown--down &:first-child {
     border-top-right-radius: theme.$button-border-radius;
@@ -99,11 +97,4 @@
     margin-bottom: calc(-1 * theme.$button-border-width);
     border-bottom-color: theme.$button-default-border-color;
   }
-
-  &--disabled, &--disabled:hover {
-    color: theme.$button-default-color;
-    background-color: theme.$input-background-color-disabled;
-    cursor: not-allowed;
-    opacity: .65;
-  }
 }