|
| 1 | +/** |
| 2 | + * Implements ARIA active descendant keyboard navigation. |
| 3 | + * |
| 4 | + * @example |
| 5 | + * ```ts |
| 6 | + * import * as ActiveDescendant from "makeup-active-descendant"; |
| 7 | + * |
| 8 | + * const widgetEl = document.querySelector(".widget"); |
| 9 | + * const focusEl = widgetEl.querySelector("input"); |
| 10 | + * const containerEl = widgetEl.querySelector("ul"); |
| 11 | + * |
| 12 | + * const activeDescendant = ActiveDescendant.createLinear(widgetEl, focusEl, containerEl, "li"); |
| 13 | + * |
| 14 | + * widgetEl.addEventListener("activeDescendantChange", function (e) { |
| 15 | + * console.log(e.detail); |
| 16 | + * }); |
| 17 | + * ``` |
| 18 | + */ |
| 19 | + |
| 20 | +import type { AutoInitOption, AutoResetOption, AxisOption } from "makeup-navigation-emitter"; |
| 21 | + |
| 22 | +/** |
| 23 | + * Options for creating a linear active descendant |
| 24 | + */ |
| 25 | +export interface ActiveDescendantOptions { |
| 26 | + /** |
| 27 | + * The HTML class name that will be applied to the ARIA active descendant element (default: 'active-descendant') |
| 28 | + */ |
| 29 | + activeDescendantClassName?: string; |
| 30 | + /** |
| 31 | + * Declares the initial active descendant item (default: "none") |
| 32 | + * - "none": no index position is set (useful in programmatic active-descendant) |
| 33 | + * - "interactive": first non aria-disabled or hidden element |
| 34 | + * - "ariaChecked": first element with aria-checked=true (useful in ARIA menu) |
| 35 | + * - "ariaSelected": first element with aria-selected=true (useful in ARIA tabs) |
| 36 | + * - "ariaSelectedOrInteractive": first element with aria-selected=true, falling back to "interactive" if not found (useful in ARIA listbox) |
| 37 | + * - number: specific index position of items (throws error if non-interactive) |
| 38 | + */ |
| 39 | + autoInit?: AutoInitOption; |
| 40 | + /** |
| 41 | + * Declares the active descendant item after a reset and/or when keyboard focus exits the widget (default: "none") |
| 42 | + * - "none": no index position is set (useful in programmatic active-descendant) |
| 43 | + * - "current": index remains current (radio button like behaviour) |
| 44 | + * - "interactive": index moves to first non aria-disabled or hidden element |
| 45 | + * - "ariaChecked": index moves to first element with aria-checked=true |
| 46 | + * - "ariaSelected": index moves to first element with aria-selected=true |
| 47 | + * - number: specific index position of items (throws error if non-interactive) |
| 48 | + */ |
| 49 | + autoReset?: AutoResetOption; |
| 50 | + /** |
| 51 | + * Specify true to scroll the container as activeDescendant changes (default: false) |
| 52 | + */ |
| 53 | + autoScroll?: boolean; |
| 54 | + /** |
| 55 | + * Specify 'x' for left/right arrow keys, 'y' for up/down arrow keys, or 'both' (default: 'both') |
| 56 | + */ |
| 57 | + axis?: AxisOption; |
| 58 | + /** |
| 59 | + * CSS selector of descendant elements that will be ignored by the navigation emitters key event delegation |
| 60 | + * (i.e. these elements will _not_ operate the active descendant) (default: null) |
| 61 | + */ |
| 62 | + ignoreByDelegateSelector?: string | null; |
| 63 | + /** |
| 64 | + * Specify whether arrow keys should wrap/loop (default: false) |
| 65 | + */ |
| 66 | + wrap?: boolean; |
| 67 | +} |
| 68 | + |
| 69 | +/** |
| 70 | + * Event detail for activeDescendantInit event |
| 71 | + */ |
| 72 | +export interface ActiveDescendantInitEventDetail { |
| 73 | + /** All items that match item selector */ |
| 74 | + items: HTMLElement[]; |
| 75 | + /** Index position before initialization */ |
| 76 | + fromIndex: number | null; |
| 77 | + /** Index position after initialization */ |
| 78 | + toIndex: number | null; |
| 79 | +} |
| 80 | + |
| 81 | +/** |
| 82 | + * Event detail for activeDescendantChange event |
| 83 | + */ |
| 84 | +export interface ActiveDescendantChangeEventDetail { |
| 85 | + /** Index position before change */ |
| 86 | + fromIndex: number | null; |
| 87 | + /** Index position after change */ |
| 88 | + toIndex: number | null; |
| 89 | +} |
| 90 | + |
| 91 | +/** |
| 92 | + * Event detail for activeDescendantReset event |
| 93 | + */ |
| 94 | +export interface ActiveDescendantResetEventDetail { |
| 95 | + /** Index position before reset */ |
| 96 | + fromIndex: number | null; |
| 97 | + /** Index position after reset */ |
| 98 | + toIndex: number | null; |
| 99 | +} |
| 100 | + |
| 101 | +/** |
| 102 | + * Event detail for activeDescendantMutation event |
| 103 | + */ |
| 104 | +export interface ActiveDescendantMutationEventDetail { |
| 105 | + /** Index position before mutation */ |
| 106 | + fromIndex: number | null; |
| 107 | + /** Index position after mutation */ |
| 108 | + toIndex: number | null; |
| 109 | +} |
| 110 | + |
| 111 | +/** |
| 112 | + * Active descendant instance |
| 113 | + */ |
| 114 | +export interface LinearActiveDescendant { |
| 115 | + /** The index position of the current active descendant */ |
| 116 | + index: number | null; |
| 117 | + /** The current item at the index position */ |
| 118 | + currentItem: HTMLElement | undefined; |
| 119 | + /** All items that match item selector */ |
| 120 | + items: HTMLElement[]; |
| 121 | + /** Whether arrow keys should wrap/loop */ |
| 122 | + wrap: boolean; |
| 123 | + /** |
| 124 | + * Will force a reset to the value specified by `autoReset` |
| 125 | + */ |
| 126 | + reset(): void; |
| 127 | + /** |
| 128 | + * Destroys all event listeners |
| 129 | + */ |
| 130 | + destroy(): void; |
| 131 | +} |
| 132 | + |
| 133 | +/** |
| 134 | + * Creates a linear active descendant instance |
| 135 | + * @param el - Root widget element |
| 136 | + * @param focusEl - The focusable element that will have aria-activedescendant set |
| 137 | + * @param itemContainerEl - The element that contains the "descendant" items |
| 138 | + * @param itemSelector - CSS selector for navigation items |
| 139 | + * @param selectedOptions - Optional configuration |
| 140 | + * @returns Active descendant instance |
| 141 | + */ |
| 142 | +export function createLinear( |
| 143 | + el: HTMLElement, |
| 144 | + focusEl: HTMLElement, |
| 145 | + itemContainerEl: HTMLElement, |
| 146 | + itemSelector: string, |
| 147 | + selectedOptions?: ActiveDescendantOptions |
| 148 | +): LinearActiveDescendant; |
| 149 | + |
0 commit comments