Skip to content

Improve Canvas Tab Support#399

Open
PauloMFJ wants to merge 3 commits into
datacommonsorg:mainfrom
madebypxlp:paulo/improve-tab-support
Open

Improve Canvas Tab Support#399
PauloMFJ wants to merge 3 commits into
datacommonsorg:mainfrom
madebypxlp:paulo/improve-tab-support

Conversation

@PauloMFJ

@PauloMFJ PauloMFJ commented Jul 6, 2026

Copy link
Copy Markdown
Contributor

Overview

Adds keyboard tab navigation through card content on the tldraw canvas, which tldraw normally swallows to cycle shape selection.

Changes

  • New registerCardTabNavigation — a capture-phase Tab/Shift+Tab handler that steps through a flat list of every card's focusable elements in reading order (top-to-bottom, left-to-right), wrapping at the ends. It skips culled cards, stays out of the way of open dialogs and tldraw text editing, dives into the selected card when tabbing in from the canvas, and calls markEventAsHandled so tldraw ignores the event.
  • Wired into AtlasProvider — registers on editor mount, cleans up on unmount.
  • Card CSS — reveal the action bar on :focus-within (not just selection) so it's reachable via Tab.
  • useFocusTrap improvements — export and broaden TABBABLE_ELEMENTS (add inputs/selects/textareas, exclude disabled) for reuse; guard against non-HTMLElement active elements.
  • Re-enabled focus trap in the chart options menu — removed the stale TODO now that Tab handling works.
  • CSS layer reorderbase now sits after primitive. This was changed because tldraw has a default outline: none on * elements which was overriding our base style. Our base is quite lean so this change is safe.

@PauloMFJ PauloMFJ self-assigned this Jul 6, 2026

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces custom tab navigation for cards within the tldraw canvas, allowing users to seamlessly step through focusable card elements. It also refactors the focus trap utility and updates related CSS styles. The review feedback highlights several critical improvements: ensuring the capture-phase tab listener does not break custom interactive elements (like menus or dialogs), fixing a strict weak ordering violation in the card sorting logic, correctly targeting the last focusable element when navigating backwards with Shift+Tab, and excluding hidden inputs from the tabbable elements selector.

Comment thread dataweaver/apps/web/src/components/scopes/atlas/register_card_tab_navigation.ts Outdated
Comment thread dataweaver/apps/web/src/components/scopes/atlas/register_card_tab_navigation.ts Outdated
Comment thread dataweaver/apps/web/src/hooks/use_focus_trap.ts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant