Accessibility improvements: Keyboard interactions

[cnathe]

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

• Accessibility improvements: Keyboard interactions #2003
• https://github.com/LabKey/labkey-ui-premium/pull/952
• https://github.com/LabKey/limsModules/pull/2205
• Accessibility improvements: Keyboard interactions platform#7666
• Accessibility improvements: Keyboard interactions testAutomation#2996

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

[labkey-nicka]

With this change we're now conflating mouse and keyboard events. In general, we should not return the DOM event if we do not intend for its use. This will not be applicable everywhere but a good "default" policy. In this particular case I recommend separating the onDelete call.

import React, { FC, memo, useCallback } from 'react';
import { useEnterEscape } from '../../../public/useEnterEscape';

interface Props {
    className?: string;
    iconCls: string;
    id?: string;
    onDelete: () => void;
    title: string;
}

export const DeleteIcon: FC<Props> = memo(({ id, title, className = 'field-icon', onDelete, iconCls }) => {
    const callOnDelete = useCallback(() => {
        onDelete();
    }, [onDelete]);
    const onKeyDown = useEnterEscape(callOnDelete);

    return (
        <span className={className} id={id} onClick={callOnDelete} onKeyDown={onKeyDown} tabIndex={0} title={title}>
            <span className={`fa fa-times-circle ${iconCls}`} />
        </span>
    );
});
DeleteIcon.displayName = 'DeleteIcon';

[labkey-nicka]

Conflating event types. Here I think it is also safe to not hand the event back through props (after examining the usages).

[labkey-nicka]

nit: (unrelated) Simplify onToggle to:

const onToggle = useCallback(() => {
    setCollapsed(c => !c);
}, []);

[labkey-nicka]

Add type="button"

[labkey-nicka]

Add type="button"

[labkey-nicka]

Add type="button"

[labkey-nicka]

Conflating event types

[labkey-nicka]

Conflating event types

[labkey-nicka]

The typings should be strengthened here. We expect keyboard event handling. I believe this should work (updated docs as well):

/**
 * React hook for when you want to intercept Enter and Escape keys (e.g., for a text input where Enter is to save
 * and Escape is to cancel). Pass the result of this hook to the onKeyDown prop of an <input /> element.
 * @param onEnter function to call when the Enter key is pressed.
 * @param onEscape function to call when the Escape key is pressed.
 * @param allowMultiSelect When false, if the shift-key or meta-key are pressed skip processing key event. Default is false.
 */
export function useEnterEscape<E = Element>(
    onEnter?: KeyboardEventHandler<E>,
    onEscape?: KeyboardEventHandler<E>,
    allowMultiSelect?: boolean
) {
    return useCallback<KeyboardEventHandler<E>>(
        evt => {
            if (!allowMultiSelect && (evt.shiftKey || evt.metaKey)) return;

            switch (evt.key) {
                case Key.ENTER:
                    evt.stopPropagation();
                    evt.preventDefault();
                    onEnter?.(evt);
                    break;
                case Key.ESCAPE:
                    evt.stopPropagation();
                    evt.preventDefault();
                    onEscape?.(evt);
                    break;
                default:
                    break;
            }
        },
        [allowMultiSelect, onEnter, onEscape]
    );
}

[labkey-nicka]

Same note regarding stronger typings. Additionally, I would follow the same logic for applying the onEnter defensively.

export function onEnterKeyDown<E = Element>(onEnter: KeyboardEventHandler<E>): KeyboardEventHandler<E> {
    return evt => {
        if (evt.shiftKey || evt.metaKey) return;

        switch (evt.key) {
            case Key.ENTER:
                evt.stopPropagation();
                evt.preventDefault();
                onEnter?.(evt);
                break;
        }
    };
}