Skip to content

Accessibility improvements: Keyboard interactions#2003

Open
cnathe wants to merge 78 commits into
developfrom
fb_keyboardInteraction
Open

Accessibility improvements: Keyboard interactions#2003
cnathe wants to merge 78 commits into
developfrom
fb_keyboardInteraction

Conversation

@cnathe
Copy link
Copy Markdown
Contributor

@cnathe cnathe commented May 14, 2026

Rationale

This PR adds keyboard accessibility in several parts of the @labkey/components package. It converts non-interactive elements (<span>, <div>, <a>) with onClick handlers into proper <button> elements, adds focus trapping and
Escape-to-close behavior to modals, makes editable grid cells tab-focusable, and extends useEnterEscape to pass the keyboard event to callbacks. Several class components are refactored to functional components along the way.

Related Pull Requests

Changes

  • Make ActionButton a button so it can be tabbed to
  • Allow tab to app main menu folder items
  • Modals to have focus on open, allow tab only within modal elements, and ESCAPE to close
  • Use buttons with clickable-text styling instead of spans and divs with onClick properties
  • Update useEnterEscape to allow optional event argument to callbacks and to allow for multi-select behavior
  • EditableGrid Cell to allow tab focus with tabIndex 0
  • Update styling for file inputs on AttachmentCard so input field is not hidden
  • Add tabIndex and onKeyDown callback for thread components

cnathe and others added 30 commits May 7, 2026 16:07
@labkey-nicka labkey-nicka self-requested a review May 15, 2026 17:28
Comment thread packages/components/src/internal/components/base/DeleteIcon.tsx Outdated
Comment thread packages/components/src/internal/components/base/FieldExpansionToggle.tsx Outdated
Comment thread packages/components/src/internal/components/files/FileAttachmentEntry.tsx Outdated
Comment thread packages/components/src/internal/components/lineage/node/LineageNodeDetail.tsx Outdated
Comment thread packages/components/src/internal/util/messaging.tsx Outdated
Comment thread packages/components/src/internal/dropdowns.tsx
Comment thread packages/components/src/public/QueryModel/grid/Value.tsx Outdated
Comment thread packages/components/src/public/useEnterEscape.ts Outdated
Comment thread packages/components/src/public/useEnterEscape.ts Outdated
@cnathe cnathe requested a review from labkey-nicka May 18, 2026 15:38

useEffect(() => {
// Focus the modal on open so keyboard navigation starts within it rather than behind it
modalRef.current?.focus();
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.

Please verify this behavior doesn't override the focus done in the Expression Assistant focus into the prompt.

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.

3 participants