@squiz/xaccel-accessibility

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

Property	Property description	Property type	Is required
cardRef	Reference to the Card element	HTMLElement	[x]
linkRef	Reference to the Link that should be fully-clickable	HTMLAnchorElement	[x]

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

Property	Property description	Property type	Is required
openActionRef	Reference to the Button element	HTMLButtonElement	[x]
childItems	Element that can be navigated through by keyboard	HTMLElement[]	[x]

Usage

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

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