Accessibility improvements: Keyboard interactions (#2003)

### version 7.38.0
*Released*: 21 May 2026
- Accessibility improvements for app pages: Keyboard Interactions
  - 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

Author: cnathe

packages/components/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.37.1",
+  "version": "7.38.0",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

packages/components/package.json

@@ -1,6 +1,18 @@
 # @labkey/components
 Components, models, actions, and utility functions for LabKey applications and pages
 
+### version 7.38.0
+*Released*: 21 May 2026
+- Accessibility improvements for app pages: Keyboard Interactions
+  - 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
+
 ### version 7.37.1
 *Released*: 20 May 2026
 - Molecule and PS bulk import by file
@@ -28,7 +40,7 @@ Components, models, actions, and utility functions for LabKey applications and p
 - Package updates
 
 ### version 7.35.1
-*Released*: 12 May 2026
+*Released*: 7 May 2026
 - Package updates
 
 ### version 7.35.0

packages/components/releaseNotes/components.md

@@ -850,7 +850,7 @@ import {
     WORKFLOW_HOME_HREF,
     WORKFLOW_KEY,
 } from './internal/app/constants';
-import { Key, useEnterEscape } from './public/useEnterEscape';
+import { Key, onEnterKeyDown, useEnterEscape } from './public/useEnterEscape';
 import { DateInput } from './internal/components/DateInput';
 import { EditInlineField } from './internal/components/EditInlineField';
 import { FileAttachmentArea } from './internal/components/files/FileAttachmentArea';
@@ -1575,6 +1575,7 @@ export {
     NOT_IN_EXP_DESCENDANTS_OF_FILTER_TYPE,
     Notifications,
     NotificationsContextProvider,
+    onEnterKeyDown,
     OntologyBrowserFilterPanel,
     OntologyBrowserPage,
     OntologyConceptOverviewPanel,

packages/components/src/index.ts

@@ -1,23 +1,29 @@
-import React, { FC, memo, PropsWithChildren, ReactNode, useEffect } from 'react';
+import React, { FC, memo, PropsWithChildren, ReactNode, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
 
 import { usePortalRef } from './hooks';
 import { ModalButtons, ModalButtonsProps } from './ModalButtons';
+import { Key } from '../public/useEnterEscape';
+
+const FOCUSABLE_SELECTORS =
+    'a, button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 
 interface BaseModalProps extends PropsWithChildren {
     bsSize?: 'lg' | 'sm';
     className?: string;
+    onCancel?: () => void;
 }
 
 /**
  * This component renders the absolute basic elements needed to render a modal. You probably shouldn't use this
  * component, instead you should probably be using Modal, which has a bunch of props to make it easier to render a
  * typical modal with save/close buttons and the appropriate logic for those buttons.
  */
-export const BaseModal: FC<BaseModalProps> = ({ bsSize, children, className }) => {
+export const BaseModal: FC<BaseModalProps> = ({ bsSize, children, className, onCancel }) => {
     const portalRef = usePortalRef('modal');
+    const modalRef = useRef<HTMLDivElement>(null);
     const className_ = classNames('modal-dialog', className, {
         'modal-sm': bsSize === 'sm',
         'modal-lg': bsSize === 'lg',
@@ -31,13 +37,46 @@ export const BaseModal: FC<BaseModalProps> = ({ bsSize, children, className }) =
         };
     }, []);
 
+    useEffect(() => {
+        // Focus the modal on open so keyboard navigation starts within it rather than behind it
+        modalRef.current?.focus();
+    }, []);
+
+    useEffect(() => {
+        // Trap focus within the modal so Tab/Shift+Tab cycle only through modal elements,
+        // and close the modal on Escape
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === Key.ESCAPE) {
+                onCancel?.();
+            } else if (e.key === Key.TAB) {
+                const focusable = Array.from(
+                    modalRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTORS) ?? []
+                );
+                if (!focusable.length) return;
+                const first = focusable[0];
+                const last = focusable[focusable.length - 1];
+                if (e.shiftKey && document.activeElement === first) {
+                    e.preventDefault();
+                    last.focus();
+                } else if (!e.shiftKey && document.activeElement === last) {
+                    e.preventDefault();
+                    first.focus();
+                }
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [onCancel]);
+
     const modal = (
         <div className="modal-wrapper">
             <div className="fade in modal-backdrop" />
 
             <div className="lk-modal modal">
                 <div className={className_}>
-                    <div className="modal-content">{children}</div>
+                    <div className="modal-content" ref={modalRef} tabIndex={-1}>
+                        {children}
+                    </div>
                 </div>
             </div>
         </div>
@@ -111,7 +150,7 @@ export const Modal: FC<ModalProps> = memo(props => {
     } = props;
     const showHeader = !!(onCancel || title);
     return (
-        <BaseModal bsSize={bsSize} className={className}>
+        <BaseModal bsSize={bsSize} className={className} onCancel={onCancel}>
             {showHeader && !header && <ModalHeader onCancel={onCancel} title={title} />}
             {header}
 

packages/components/src/internal/Modal.tsx

@@ -9,6 +9,7 @@ import { AnnouncementsAPIWrapper, getDefaultAnnouncementsAPIWrapper } from './AP
 import { AnnouncementModel } from './model';
 import { Thread } from './Thread';
 import { ThreadEditor } from './ThreadEditor';
+import { useEnterEscape } from '../../public/useEnterEscape';
 
 interface Props {
     api?: AnnouncementsAPIWrapper;
@@ -67,6 +68,7 @@ export const Discussions: FC<Props> = memo(props => {
     const onShow = useCallback(() => {
         setShowEditor(true);
     }, []);
+    const onShowKeyDown = useEnterEscape(onShow);
 
     const updatePendingThread = useCallback(
         (threadId: number, hasPendingChange: boolean) => {
@@ -101,23 +103,23 @@ export const Discussions: FC<Props> = memo(props => {
                 <Thread
                     api={api}
                     containerPath={containerPath}
-                    discussionSrcIdentifier={discussionSrcIdentifier}
                     discussionSrcEntityType={discussionSrcEntityType}
+                    discussionSrcIdentifier={discussionSrcIdentifier}
                     key={thread.rowId}
                     nounPlural={nounPlural}
                     nounSingular={nounSingular}
                     onCreate={loadDiscussions}
                     onDelete={loadDiscussions}
                     onUpdate={loadDiscussions}
                     readOnly={readOnly}
+                    setPendingChange={updatePendingThread}
                     thread={thread}
                     user={user}
-                    setPendingChange={updatePendingThread}
                 />
             ))}
 
             {allowCreateThread && !showEditor && (
-                <span className="clickable-text" onClick={onShow}>
+                <span className="clickable-text" onClick={onShow} onKeyDown={onShowKeyDown} tabIndex={0}>
                     <i className="fa fa-comments" />
                     Start a thread
                 </span>
@@ -127,8 +129,8 @@ export const Discussions: FC<Props> = memo(props => {
                 <ThreadEditor
                     api={api}
                     containerPath={containerPath}
-                    discussionSrcIdentifier={discussionSrcIdentifier}
                     discussionSrcEntityType={discussionSrcEntityType}
+                    discussionSrcIdentifier={discussionSrcIdentifier}
                     nounPlural={nounPlural}
                     nounSingular={nounSingular}
                     onCancel={onCancel}

packages/components/src/internal/announcements/Discussions.tsx

@@ -4,6 +4,7 @@ import { Alert } from '../components/base/Alert';
 import { Modal } from '../Modal';
 
 import { Attachment, getAttachmentURL } from './model';
+import { useEnterEscape } from '../../public/useEnterEscape';
 
 interface ThreadAttachmentProps {
     attachment: Attachment;
@@ -13,6 +14,7 @@ interface ThreadAttachmentProps {
 
 const ThreadAttachment: FC<ThreadAttachmentProps> = memo(({ attachment, containerPath, onRemove }) => {
     const _onRemove = useCallback(() => onRemove(attachment.name), [attachment, onRemove]);
+    const onRemoveKeyDown = useEnterEscape(_onRemove);
     // Only generate a URL if the file has been uploaded.
     const url = attachment.created !== undefined ? getAttachmentURL(attachment, containerPath) : undefined;
 
@@ -22,6 +24,8 @@ const ThreadAttachment: FC<ThreadAttachmentProps> = memo(({ attachment, containe
                 <span
                     className="fa fa-times-circle thread-attachment-icon thread-attachment-icon--remove"
                     onClick={_onRemove}
+                    onKeyDown={onRemoveKeyDown}
+                    tabIndex={0}
                 />
             )}
 
@@ -30,7 +34,7 @@ const ThreadAttachment: FC<ThreadAttachmentProps> = memo(({ attachment, containe
             {url === undefined && <span>{attachment.name}</span>}
 
             {url !== undefined && (
-                <a href={url} target="_blank" rel="noopener noreferrer">
+                <a href={url} rel="noopener noreferrer" target="_blank">
                     {attachment.name}
                 </a>
             )}
@@ -54,10 +58,10 @@ export const ThreadAttachments: FC<ThreadAttachmentsProps> = memo(({ attachments
             <div className="thread-editor-attachments__list">
                 {attachments.map(attachment => (
                     <ThreadAttachment
-                        key={attachment.name}
                         attachment={attachment}
-                        onRemove={onRemove}
                         containerPath={containerPath}
+                        key={attachment.name}
+                        onRemove={onRemove}
                     />
                 ))}
             </div>

packages/components/src/internal/announcements/ThreadAttachments.tsx

@@ -17,6 +17,7 @@ import { fromNow, parseDate } from '../util/Date';
 import { AnnouncementModel } from './model';
 import { ThreadEditor, ThreadEditorProps } from './ThreadEditor';
 import { ThreadAttachments } from './ThreadAttachments';
+import { useEnterEscape } from '../../public/useEnterEscape';
 
 interface DeleteThreadBSModalProps {
     cancel: () => void;
@@ -25,8 +26,8 @@ interface DeleteThreadBSModalProps {
 
 const DeleteThreadModal: FC<DeleteThreadBSModalProps> = ({ cancel, onDelete }) => (
     <Modal
-        confirmText="Yes, Delete Thread"
         confirmClass="btn-danger"
+        confirmText="Yes, Delete Thread"
         onCancel={cancel}
         onConfirm={onDelete}
         title="Delete this comment thread?"
@@ -39,8 +40,8 @@ DeleteThreadModal.displayName = 'DeleteThreadModal';
 
 const DeleteReplyModal: FC<DeleteThreadBSModalProps> = ({ cancel, onDelete }) => (
     <Modal
-        confirmText="Yes, Delete Reply"
         confirmClass="btn-danger"
+        confirmText="Yes, Delete Reply"
         onCancel={cancel}
         onConfirm={onDelete}
         title="Delete this reply?"
@@ -83,7 +84,7 @@ const ThreadBlockHeader: FC<ThreadBlockHeaderProps> = props => {
     return (
         <div className="thread-block-header">
             <span className="thread-block-header__user">
-                <UserLink userId={author.id} userDisplayValue={author.displayName} />
+                <UserLink userDisplayValue={author.displayName} userId={author.id} />
             </span>
             <div className="pull-right">
                 <span className="thread-block-header__date">
@@ -93,9 +94,9 @@ const ThreadBlockHeader: FC<ThreadBlockHeaderProps> = props => {
                 {(onDelete || onEdit) && (
                     <DropdownMenu
                         className="thread-block-header__menu"
-                        label={"Manage thread block"}
-                        title={<i className="fa fa-ellipsis-v" />}
+                        label={'Manage thread block'}
                         pullRight
+                        title={<i className="fa fa-ellipsis-v" />}
                     >
                         {onEdit !== undefined && (
                             <MenuItem className="thread-block-header__menu-edit" onClick={onEdit}>
@@ -184,6 +185,7 @@ export const ThreadBlock: FC<ThreadBlockProps> = props => {
     const onReply = useCallback(() => {
         setReplying(true);
     }, []);
+    const onReplyKeyDown = useEnterEscape(onReply);
 
     const onReplied = useCallback((thread: AnnouncementModel) => {
         clearTimeout(recentTimeout);
@@ -206,20 +208,25 @@ export const ThreadBlock: FC<ThreadBlockProps> = props => {
                 {!editing && (
                     <div className="thread-block-body">
                         <ThreadBlockHeader
+                            author={thread.author}
                             created={thread.created}
+                            isThread={!thread.parent}
                             modified={thread.modified}
                             onDelete={allowDelete ? onDeleteThread : undefined}
                             onEdit={allowUpdate ? onEdit : undefined}
-                            author={thread.author}
-                            isThread={!thread.parent}
                         />
                         {error !== undefined && <Alert>{error}</Alert>}
                         <div className="thread-block-body__content" dangerouslySetInnerHTML={threadBody} />
 
                         <ThreadAttachments attachments={thread.attachments ?? []} containerPath={containerPath} />
 
                         {allowReply && (
-                            <span className="clickable-text thread-block__reply" onClick={onReply}>
+                            <span
+                                className="clickable-text thread-block__reply"
+                                onClick={onReply}
+                                onKeyDown={onReplyKeyDown}
+                                tabIndex={0}
+                            >
                                 Reply
                             </span>
                         )}
@@ -245,8 +252,8 @@ export const ThreadBlock: FC<ThreadBlockProps> = props => {
                         onCancel={onCancel}
                         onCreate={onReplied}
                         parent={thread.parent ?? thread.entityId}
-                        thread={undefined}
                         setPendingChange={setPendingChange}
+                        thread={undefined}
                     />
                 </div>
             )}