@squiz/xaccel-accessibility v1.15.1-beta.0

Accessibility Utilities

Description

The utilities under accessibility include: a hook for making card-like design patterns into a fully-clickable area and a hook for enabling keyboard inputs to navigate overlays.

useAccessibleCard

Hook Properties

Usage

import { useAccessibleCard } from '@squiz/xaccel-accessibility';

function CardListItem({ url, title, description }) {
    const { cardRef, linkRef } = useAccessibleCard();

    return (
        <li ref={cardRef}>
            <a href={url} ref={linkRef}>{title}</a>
            <p>{description}</p>
        </li>
    );
}

useKeyboardOverlayListControl

Hook Properties

Usage

const Component = React.forwardRef(({ ...props }, ref) => {
    const buttonRef = ref || useRef();

    const { containerProps, items, isOpen, setIsOpen } = useKeyboardOverlayListControl({
        openActionRef: buttonRef,
        childItems: children,
    });
});