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,
    });
});