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.

@labkey-danield
Copy link
Copy Markdown
Contributor

labkey-danield commented May 20, 2026

Should the tab order across the top nav bar be different? Should it be strictly left to right? Now it start left to right (from header) and then jumps to user menu. The numbers below show the current tab order:
Screenshot 2026-05-19 at 3 06 26 PM

Do we need to add access to the home and admin icons in the folder entries in the mega menu?
Screenshot 2026-05-19 at 3 13 19 PM

I cannot exit an editable grid using only the keyboard after I have typed in some values:

  1. Go the add samples (manually) page
  2. Tab into the editable grid.
  3. Type in some values into the fields
    Result:
    After typing some values I cannot tab out of the grid.
Screenshot 2026-05-19 at 3 31 34 PM

When editing a job I cannot tab from the task to the fields in the task detail. I only tab into the detail fields from the last task.
Screenshot 2026-05-19 at 4 09 51 PM

I cannot tab to a task after applying a template.
Screenshot 2026-05-19 at 4 57 38 PM

Dropdowns at the bottom of the screen don't scroll into view and I cannot see what it is I'm selecting.
Screenshot 2026-05-19 at 5 21 44 PM

Cannot remove a parent after adding on the one on the detail page:
Screenshot 2026-05-19 at 5 22 27 PM

Drop. down menus do not close after tabbing out of them. (I can only get them to close if I click on the page)
Screenshot 2026-05-19 at 5 33 58 PM
Screenshot 2026-05-19 at 5 37 08 PM

Tabbing in the color picker for a Status does not highlight the color in focus / selected.
Screenshot 2026-05-19 at 7 43 15 PM
Color picker for SampleType has a slight blur around the selected color.
Screenshot 2026-05-19 at 7 44 09 PM

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.

4 participants