Accessibility improvements: Keyboard interactions

packages/components/package.json

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

packages/components/releaseNotes/components.md

@@ -1,6 +1,18 @@
 # @labkey/components
 Components, models, actions, and utility functions for LabKey applications and pages
 
+### version TBD
+*Released*: TBD
+- 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.0
 *Released*: 15 May 2026
 - Calculated Column Assistant
@@ -20,7 +32,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/src/index.ts

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

packages/components/src/internal/Modal.tsx

@@ -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/announcements/Discussions.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) => {
@@ -117,7 +119,7 @@ export const Discussions: FC<Props> = memo(props => {
             ))}
 
             {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>

packages/components/src/internal/announcements/ThreadAttachments.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}
                 />
             )}
 

packages/components/src/internal/announcements/ThreadBlock.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;
@@ -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);
@@ -219,7 +221,7 @@ export const ThreadBlock: FC<ThreadBlockProps> = props => {
                         <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>
                         )}

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

@@ -16,7 +16,7 @@ import { handleFileInputChange } from '../util/utils';
 import { isLoading, LoadingState } from '../../public/LoadingState';
 import { resolveErrorMessage } from '../util/messaging';
 import { LoadingSpinner } from '../components/base/LoadingSpinner';
-import { Key } from '../../public/useEnterEscape';
+import { Key, useEnterEscape } from '../../public/useEnterEscape';
 
 import { DropdownMenu, MenuItem } from '../dropdowns';
 
@@ -439,6 +439,7 @@ export const ThreadEditor: FC<ThreadEditorProps> = props => {
         onCancel?.();
         handlePendingChange();
     }, [thread?.rowId, onCancel, handlePendingChange]);
+    const onCancelKeyDown = useEnterEscape(handleCancel);
 
     const onSubmit = useCallback(() => {
         if (submitting) return;
@@ -518,10 +519,15 @@ export const ThreadEditor: FC<ThreadEditorProps> = props => {
             <label className="thread-editor__attachment-input btn btn-default">
                 <span className="fa fa-paperclip" />
                 <span className="sr-only">Attach files</span>
-                <input multiple onChange={onFileInputChange} type="file" />
+                <input multiple onChange={onFileInputChange} tabIndex={0} type="file" />
             </label>
 
-            <span className="clickable-text thread-editor__cancel-btn" onClick={handleCancel}>
+            <span
+                  className="clickable-text thread-editor__cancel-btn"
+                onClick={handleCancel}
+                onKeyDown={onCancelKeyDown}
+                tabIndex={0}
+            >
                 Cancel
             </span>
 

packages/components/src/internal/components/ColumnSelectionModal.test.tsx

@@ -123,7 +123,7 @@ describe('ColumnSelectionModal', () => {
             } else {
                 expect(removeIcon).toBeTruthy();
                 const iconParent = removeIcon.parentElement;
-                expect(iconParent.className).toContain('view-field__action clickable');
+                expect(iconParent.className).toContain('clickable-text view-field__action');
                 expect(iconParent.onclick).toBeDefined();
             }
         }

packages/components/src/internal/components/ColumnSelectionModal.tsx

@@ -101,7 +101,7 @@ export interface ColumnChoiceProps {
 // exported for jest tests
 export const ColumnChoice: FC<ColumnChoiceProps> = memo(props => {
     const { column, disabledMsg, isExpanded, isInView, onAddColumn, onExpandColumn, onCollapseColumn } = props;
-    const { onMouseEnter, onMouseLeave, portalEl, show, targetRef } = useOverlayTriggerState<HTMLDivElement>(
+    const { onMouseEnter, onMouseLeave, portalEl, show, targetRef } = useOverlayTriggerState<HTMLButtonElement>(
         'disabled-button-overlay',
         disabledMsg !== undefined,
         false
@@ -145,10 +145,10 @@ export const ColumnChoice: FC<ColumnChoiceProps> = memo(props => {
                     ))}
                     <div className="field-expand-icon">
                         {column.isLookup() && !isExpanded && (
-                            <i className="fa fa-chevron-right" onClick={_onExpandColumn} />
+                            <button className="clickable-text fa fa-chevron-right" onClick={_onExpandColumn} type="button" />
                         )}
                         {column.isLookup() && isExpanded && (
-                            <i className="fa fa-chevron-down" onClick={_onCollapseColumn} />
+                            <button className="clickable-text fa fa-chevron-down" onClick={_onCollapseColumn} type="button" />
                         )}
                     </div>
                 </>
@@ -160,17 +160,18 @@ export const ColumnChoice: FC<ColumnChoiceProps> = memo(props => {
                 </div>
             )}
             {!isInView && column.selectable && (
-                <div
-                    className={'pull-right view-field__action ' + (disabledMsg ? ' disabled ' : '')}
+                <button
+                    className={'clickable-text pull-right view-field__action ' + (disabledMsg ? ' disabled ' : '')}
                     onClick={disabled ? undefined : _onAddColumn}
                     onMouseEnter={onMouseEnter}
                     onMouseLeave={onMouseLeave}
                     ref={targetRef}
                     title={disabled ? undefined : 'Add this field to the view.'}
+                    type="button"
                 >
                     <i className="fa fa-plus" />
                     {show && createPortal(popover, portalEl)}
-                </div>
+                </button>
             )}
         </div>
     );
@@ -315,22 +316,24 @@ export const ColumnInView: FC<ColumnInViewProps> = memo(props => {
                     {!editing && (
                         <span className="pull-right">
                             {allowEditLabel && (
-                                <span
-                                    className="edit-inline-field__toggle"
+                                <button
+                                    className="clickable-text edit-inline-field__toggle"
                                     onClick={_onEditTitle}
                                     title="Edit the field's label for this view."
+                                    type="button"
                                 >
                                     <i className="fa fa-pencil" id={'select-' + index} />
-                                </span>
+                                </button>
                             )}
                             {!disableDelete && (
-                                <span
-                                    className="view-field__action clickable"
+                                <button
+                                    className="clickable-text view-field__action"
                                     onClick={_onRemoveColumn}
                                     title="Remove this field from the view."
+                                    type="button"
                                 >
                                     <i className="fa fa-times" />
-                                </span>
+                                </button>
                             )}
                             {disableDelete && <span className="margin-left-more"></span>}
                         </span>

packages/components/src/internal/components/EditInlineField.tsx

@@ -315,7 +315,7 @@ export const EditInlineField: FC<Props> = memo(props => {
                         className={classNames({ 'edit-inline-field__toggle': allowEdit, 'ws-pre-wrap': isTextArea })}
                         onClick={toggleEdit}
                         onKeyDown={toggleKeyDown}
-                        tabIndex={1}
+                        tabIndex={0}
                     >
                         {allowEdit && pullRight && <i className="fa fa-pencil pull-right" />}
                         {!isUser && displayValue}

packages/components/src/internal/components/ExpandableContainer.tsx

@@ -101,12 +101,13 @@ export const ExpandableContainer: FC<Props> = memo(props => {
                         'text-muted': !isExpandable,
                     })}
                 >
-                    <i
+                    <button
                         onClick={hasOnClick || isExpandable ? handleClick : undefined}
-                        className={classNames('fa', {
+                        className={classNames('clickable-text', 'fa', {
                             'fa-chevron-down': visible,
                             'fa-chevron-right': !visible,
                         })}
+                        type="button"
                     />
                 </div>
                 <div className="container-expandable-heading">

packages/components/src/internal/components/__snapshots__/ExpandableContainer.test.tsx.snap

@@ -19,8 +19,9 @@ exports[`<ExpandableContainer/> custom props 1`] = `
       <div
         class="pull-right container-expandable-child__chevron text-muted"
       >
-        <i
-          class="fa fa-chevron-down"
+        <button
+          class="clickable-text fa fa-chevron-down"
+          type="button"
         />
       </div>
       <div
@@ -62,8 +63,9 @@ exports[`<ExpandableContainer/> default props 1`] = `
       <div
         class="pull-right container-expandable-child__chevron"
       >
-        <i
-          class="fa fa-chevron-right"
+        <button
+          class="clickable-text fa fa-chevron-right"
+          type="button"
         />
       </div>
       <div