@wikimedia/codex/dist/types/composables/useButtonGroupKeyboardNav.d.ts

Codex Design System for Wikimedia

import { Ref, ComponentPublicInstance } from 'vue';
import { ButtonGroupItem } from '../types';
/**
 * Get handling for arrow key navigation for button groups.
 *
 * Pass in the `buttons` prop to get a series of vars and functions needed to support arrow key
 * navigation of button groups in LTR and RTL. Within the button group component, do the following:
 *   1. Assign the `rootElement` ref to the root div.
 *   2. Set each button's ref to `( ref ) => assignTemplateRef( ref, index )`.
 *   3. Set the following event handlers for each button:
 *     a. `@focus="onFocus( index )"
 *     b. `@blur="onBlur"
 *     c. `@keydown="onKeydown"
 *
 * @param buttonsProp
 * @return refs and functions
 */
export default function useButtonGroupKeyboardNav(buttonsProp: Ref<ButtonGroupItem[]>): {
    rootElement: Ref<HTMLDivElement | undefined>;
    assignTemplateRef: (templateRef: ComponentPublicInstance | Element | null, index: number) => void;
    onFocus: (index: number) => void;
    onBlur: () => void;
    onKeydown: (e: KeyboardEvent) => void;
};