[ @sdxc/ui/mixins ]
menubarKeys
Why JS.
import { menubarKeys } from "@sdxc/ui/mixins";Usage
Adapts the WAI-ARIA menubar keyboard pattern onto a Menubar's row of
triggers, handing off to each opened Menu's own menuKeys() mixin once
focus moves inside it, so each mixin owns keys only within its own scope.
Signature
menubarKeys(options?: MenubarKeys.Options): MixinDescriptor<HTMLElement>Returns a mixin descriptor for the row's mix prop.
Parameters
| Parameter | Type | Description |
|---|---|---|
options? | MenubarKeys.Options | Selector overrides for non-standard markup. |
Examples
<Menubar aria-label={t("app.menubar")} mix={menubarKeys()}>
<Menubar.Trigger commandfor="file-menu">{t("menubar.file")}</Menubar.Trigger>
<Menu id="file-menu" aria-label={t("menubar.fileMenu")} mix={menuKeys()}>
<Menu.Item>{t("actions.new")}</Menu.Item>
<Menu.Item>{t("actions.open")}</Menu.Item>
</Menu>
<Menubar.Trigger commandfor="edit-menu">{t("menubar.edit")}</Menubar.Trigger>
<Menu id="edit-menu" aria-label={t("menubar.editMenu")} mix={menuKeys()}>
<Menu.Item>{t("actions.undo")}</Menu.Item>
<Menu.Item>{t("actions.redo")}</Menu.Item>
</Menu>
</Menubar>Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/mixins too.
Interface
MenubarKeys.Options
Configuration accepted by menubarKeys.
| Member | Type | Description |
|---|---|---|
triggerSelector? | string | Selector, evaluated against the row's direct children, that identifies its top-level triggers. Defaults to [role="menuitem"]; scoped to direct children so nested Menu rows are never mistaken for triggers. |
itemSelector? | string | Selector, evaluated against whichever Menu a trigger opens, that identifies its rows. Defaults to [role^="menuitem"]; pass the same value here as the paired menuKeys() call's itemSelector. |