@sit-onyx/headless 1.0.0-beta.21 → 1.0.0-beta.23

package/dist/composables/menuButton/createMenuButton.d.ts

@@ -0,0 +1,78 @@
+import { MaybeRef, Ref } from 'vue';
+type CreateMenuButtonOptions = {
+    isExpanded: Readonly<Ref<boolean>>;
+    trigger: Readonly<MaybeRef<"hover" | "click">>;
+    onToggle: () => void;
+    disabled?: Readonly<Ref<boolean>>;
+    /**
+     * Whether the menu button opens to the top or bottom. Defines the keyboard navigation behavior (e.g. Arrow up and down).
+     *
+     * @default "bottom"
+     */
+    position?: MaybeRef<"top" | "bottom">;
+};
+/**
+ * Based on https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/
+ */
+export declare const createMenuButton: (options: CreateMenuButtonOptions) => {
+    elements: {
+        listItem: {
+            role: string;
+        };
+        menuItem: (data: {
+            active?: boolean;
+            disabled?: boolean;
+        }) => {
+            "aria-current": "page" | undefined;
+            "aria-disabled": boolean | undefined;
+            role: string;
+            onKeydown: (event: KeyboardEvent) => void;
+        };
+        root: import('vue').ComputedRef<{
+            onMouseenter?: (() => void) | undefined;
+            onMouseleave?: (() => void) | undefined;
+            id: string;
+            onKeydown: (event: KeyboardEvent) => void;
+            ref: import('../../utils/builder.js').HeadlessElRef<HTMLElement>;
+        }>;
+        button: import('vue').ComputedRef<{
+            readonly "aria-controls": string;
+            readonly "aria-expanded": boolean;
+            readonly "aria-haspopup": true;
+            readonly onFocus: () => void;
+            readonly onClick: () => void;
+            readonly id: string;
+            readonly disabled: boolean | undefined;
+        }>;
+        menu: {
+            id: string;
+            ref: import('../../utils/builder.js').HeadlessElRef<HTMLElement>;
+            role: string;
+            "aria-labelledby": string;
+            onClick: () => void;
+        };
+    };
+};
+type CreateMenuItemOptions = {
+    /**
+     * Called when the menu item should be opened (if it has nested children).
+     */
+    onOpen?: () => void;
+};
+export declare const createMenuItems: (options?: CreateMenuItemOptions | undefined) => {
+    elements: {
+        listItem: {
+            role: string;
+        };
+        menuItem: (data: {
+            active?: boolean;
+            disabled?: boolean;
+        }) => {
+            "aria-current": "page" | undefined;
+            "aria-disabled": boolean | undefined;
+            role: string;
+            onKeydown: (event: KeyboardEvent) => void;
+        };
+    };
+};
+export {};

package/dist/composables/menuButton/createMenuButton.testing.d.ts

@@ -0,0 +1,24 @@
+import { Locator, Page } from '@playwright/test';
+export type MenuButtonTestingOptions = {
+    /**
+     * Playwright page.
+     */
+    page: Page;
+    /**
+     * Locator for the button element.
+     */
+    button: Locator;
+    /**
+     * Menu, e.g. a `<ul>` element.
+     */
+    menu: Locator;
+    /**
+     * List items (at least 3).
+     */
+    menuItems: Locator;
+};
+/**
+ * Playwright utility for executing accessibility testing for a navigation menu.
+ * Will check aria attributes and keyboard shortcuts as defined in https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-links.
+ */
+export declare const menuButtonTesting: ({ page, button, menu, menuItems, }: MenuButtonTestingOptions) => Promise<void>;

package/dist/composables/navigationMenu/TestMenu.ct.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/composables/navigationMenu/TestMenu.d.vue.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLElement>;
+export default _default;

package/dist/composables/navigationMenu/createMenu.d.ts

@@ -0,0 +1,21 @@
+import { MaybeRef } from 'vue';
+type CreateNavigationMenu = {
+    /**
+     * Name of the navigation landmark.
+     * Usually this is the name of the website.
+     */
+    navigationName?: MaybeRef<string | undefined>;
+};
+/**
+ * Based on https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/
+ */
+export declare const createNavigationMenu: (args_0: CreateNavigationMenu) => {
+    elements: {
+        nav: {
+            "aria-label": string | undefined;
+            id: string;
+            onKeydown: (event: KeyboardEvent) => void;
+        };
+    };
+};
+export {};

package/dist/composables/navigationMenu/createMenu.testing.d.ts

@@ -0,0 +1,16 @@
+import { Locator } from '@playwright/test';
+export type NavigationMenuTestingOptions = {
+    /**
+     * Locator for the navigation landmark.
+     */
+    nav: Locator;
+    /**
+     * Locator for the button elements.
+     */
+    buttons: Locator;
+};
+/**
+ * Playwright utility for executing accessibility testing for a navigation menu.
+ * Will check aria attributes and keyboard shortcuts as defined in https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/
+ */
+export declare const navigationTesting: ({ nav, buttons }: NavigationMenuTestingOptions) => Promise<void>;

package/dist/composables/tabs/TestTabs.ct.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/composables/tabs/TestTabs.d.vue.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/dist/composables/tabs/createTabs.d.ts

@@ -0,0 +1,48 @@
+import { MaybeRef, Ref } from 'vue';
+type CreateTabsOptions<TKey extends PropertyKey = PropertyKey> = {
+    /**
+     * Label of the tablist.
+     */
+    label: MaybeRef<string>;
+    /**
+     * Currently selected tab.
+     */
+    selectedTab: Ref<TKey>;
+    /**
+     * Called when the user selects a tab.
+     */
+    onSelect?: (selectedTabValue: TKey) => void;
+};
+/**
+ * Composable for implementing accessible tabs.
+ * Based on https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+ */
+export declare const createTabs: <T extends PropertyKey>(options: CreateTabsOptions<T>) => {
+    elements: {
+        tablist: import('vue').ComputedRef<{
+            role: string;
+            "aria-label": string;
+            onKeydown: (event: KeyboardEvent) => void;
+        }>;
+        tab: import('vue').ComputedRef<(data: {
+            value: T;
+            disabled?: boolean;
+        }) => {
+            readonly id: string;
+            readonly role: "tab";
+            readonly "aria-selected": boolean;
+            readonly "aria-controls": string;
+            readonly "aria-disabled": true | undefined;
+            readonly onClick: () => void | undefined;
+            readonly tabindex: 0 | -1;
+        }>;
+        tabpanel: import('vue').ComputedRef<(data: {
+            value: T;
+        }) => {
+            readonly id: string;
+            readonly role: "tabpanel";
+            readonly "aria-labelledby": string;
+        }>;
+    };
+};
+export {};

package/dist/composables/tabs/createTabs.testing.d.ts

@@ -0,0 +1,13 @@
+import { Locator, Page } from '@playwright/test';
+export type TabsTestingOptions = {
+    page: Page;
+    /**
+     * Locator of the tabs component. Must have at least 3 tabs where the first one is initially selected.
+     */
+    tablist: Locator;
+};
+/**
+ * Playwright utility for executing accessibility testing for tabs.
+ * Will check aria attributes and keyboard shortcuts as defined in https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+ */
+export declare const tabsTesting: (options: TabsTestingOptions) => Promise<void>;

package/dist/composables/tooltip/createToggletip.d.ts

@@ -0,0 +1,36 @@
+import { MaybeRefOrGetter, Ref } from 'vue';
+export type CreateToggletipOptions = {
+    toggleLabel: MaybeRefOrGetter<string>;
+    isVisible?: Ref<boolean>;
+};
+/**
+ * Create a toggletip as described in https://inclusive-components.design/tooltips-toggletips/
+ * Its visibility is toggled on click.
+ * Therefore a toggletip MUST NOT be used to describe the associated trigger element.
+ * Commonly this pattern uses a button with the ⓘ as the trigger element.
+ * To describe the associated element use `createTooltip`.
+ */
+export declare const createToggletip: (args_0: CreateToggletipOptions) => import('../../utils/builder.js').HeadlessComposable<{
+    /**
+     * The element which controls the toggletip visibility:
+     * Preferably a `button` element.
+     */
+    trigger: import('vue').ComputedRef<{
+        id: string;
+        onClick: () => boolean;
+        "aria-label": string;
+    }>;
+    /**
+     * The element with the relevant toggletip content.
+     * Only simple, textual content is allowed.
+     */
+    tooltip: {
+        onToggle: (e: Event) => void;
+        anchor: string;
+        popover: string;
+        role: string;
+        tabindex: string;
+    };
+}, {
+    isVisible: Ref<boolean, boolean> | Ref<false, false> | Ref<true, true>;
+}, undefined>;

package/dist/composables/tooltip/createTooltip.d.ts

@@ -0,0 +1,42 @@
+import { MaybeRefOrGetter, Ref } from 'vue';
+export type CreateTooltipOptions = {
+    /**
+     * Number of milliseconds to use as debounce when showing/hiding the tooltip.
+     */
+    debounce: MaybeRefOrGetter<number>;
+    isVisible?: Ref<boolean>;
+};
+/**
+ * Create a tooltip as described in https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role
+ * Its visibility is toggled on hover or focus.
+ * A tooltip MUST be used to describe the associated trigger element. E.g. The usage with the ⓘ would be incorrect.
+ * To provide contextual information use the `createToggletip`.
+ */
+export declare const createTooltip: (args_0: CreateTooltipOptions) => import('../../utils/builder.js').HeadlessComposable<{
+    /**
+     * The element which controls the tooltip visibility on hover.
+     */
+    trigger: {
+        onMouseover: () => boolean;
+        onMouseout: () => boolean;
+        onFocusin: () => boolean;
+        onFocusout: () => boolean;
+        "aria-describedby": string;
+    };
+    /**
+     * The element describing the tooltip.
+     * Only simple, textual and non-focusable content is allowed.
+     */
+    tooltip: {
+        onMouseover: () => boolean;
+        onMouseout: () => boolean;
+        onFocusin: () => boolean;
+        onFocusout: () => boolean;
+        popover: string;
+        role: string;
+        id: string;
+        tabindex: string;
+    };
+}, {
+    isVisible: Ref<boolean, boolean> | Ref<false, false> | Ref<true, true>;
+}, undefined>;

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export * from './composables/comboBox/createComboBox.js';
+export * from './composables/helpers/useGlobalListener.js';
+export * from './composables/helpers/useOutsideClick.js';
+export * from './composables/listbox/createListbox.js';
+export * from './composables/menuButton/createMenuButton.js';
+export * from './composables/navigationMenu/createMenu.js';
+export * from './composables/tabs/createTabs.js';
+export * from './composables/tooltip/createToggletip.js';
+export * from './composables/tooltip/createTooltip.js';
+export * from './utils/builder.js';
+export { isPrintableCharacter, wasKeyPressed } from './utils/keyboard.js';
+export { debounce } from './utils/timer.js';