From 0f9d79860099d3bcc5da33ffbb802c3f3276b187 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Wed, 12 Feb 2025 16:18:59 +0100 Subject: [PATCH] Improve docs and inline comment. --- packages/components/src/tree-grid/README.md | 2 ++ packages/editor/src/components/list-view-sidebar/index.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/components/src/tree-grid/README.md b/packages/components/src/tree-grid/README.md index d6e861a7b9b18b..5e4ac28b0eb0e4 100644 --- a/packages/components/src/tree-grid/README.md +++ b/packages/components/src/tree-grid/README.md @@ -12,6 +12,8 @@ A tree grid is a hierarchical 2 dimensional UI component, for example it could b A tree grid allows the user to navigate using arrow keys. Up/down to navigate vertically across rows, and left/right to navigate horizontally between focusables in a row. +To make the keyboard navigation and roving tabindex behaviors work as expected it is important to avoid programmatically setting focus on any of the focusable items in the tree grid. In fact, `RovingTabIndexItem` handles the logic to make only one item navigable with the Tab key at a time. The other items can be navigated with the arrow keys. Triggering a focus event may conflict with the `RovingTabIndexItem` internal logic. + For more information on a tree grid, see the following links: - https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html diff --git a/packages/editor/src/components/list-view-sidebar/index.js b/packages/editor/src/components/list-view-sidebar/index.js index 651151a13232f0..b2af24bc39ecbb 100644 --- a/packages/editor/src/components/list-view-sidebar/index.js +++ b/packages/editor/src/components/list-view-sidebar/index.js @@ -53,7 +53,7 @@ export default function ListViewSidebar() { // This ref refers to the sidebar as a whole. const sidebarRef = useRef(); - // This ref refers to the tab panel. + // This ref refers to the tablist. const tabsRef = useRef(); // This ref refers to the list view application area. const listViewRef = useRef();