@gunkin/uiify 0.0.16-alpha → 0.0.19-alpha

package/skills/uiify/references/elements/avatar.md

@@ -0,0 +1,47 @@
+# avatar
+
+Binding: gap
+
+Identify a person or account with a compact image and fallback.
+
+## Use when
+
+A person's identity helps distinguish nearby content, such as a participant list or comment author.
+
+## Avoid when
+
+Do not add a portrait when the name already provides all needed context and the image adds no information. Do not use an avatar as the only way to identify a person.
+
+## Structure
+
+This is an app-level composition, not a UIify component. Use an img with concise alt text when the portrait adds identity; use alt="" when visible adjacent text already names the person. Keep the name as text.
+
+## Responsive
+
+Set intrinsic dimensions to reserve space, preserve a consistent crop, and avoid shrinking the image below its useful size.
+
+## States
+
+Provide a stable initials or generic fallback when no usable image exists. If the image fails, keep the person's visible name.
+
+## Verify
+
+Check image alternative against nearby text, loading/failure fallback, intrinsic dimensions, and list reading order.
+
+## Common mistake
+
+Repeating the adjacent name in alt text makes assistive technology announce the same identity twice.
+
+## Custom implementation
+
+```html
+<img src="/people/ada.webp" width="40" height="40" alt="" />
+<span>Ada Lovelace</span>
+```
+
+This is an app-level composition; UIify does not currently ship this component.
+
+## Sources
+
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html) (verified 2026-10-16)

package/skills/uiify/references/elements/badge.md

@@ -0,0 +1,47 @@
+# badge
+
+Binding: gap
+
+Mark a short status or category beside related content.
+
+## Use when
+
+A short status or category qualifies nearby content and helps people scan it.
+
+## Avoid when
+
+Do not use a badge for a control, long explanation, or decoration that repeats an adjacent heading without adding meaning.
+
+## Structure
+
+This is an app-level composition, not a UIify component. Use non-interactive text beside the item it qualifies. Include the status in words; color and shape are supplementary.
+
+## Responsive
+
+Allow text to wrap or choose a concise label that remains readable at zoom. Keep the badge attached to its related heading or value in reading order.
+
+## States
+
+For status changes, update the text and announce meaningful dynamic changes in an appropriate status region. Do not use badge styling alone to indicate selection.
+
+## Verify
+
+Check text contrast, status conveyed without color, association with the item, zoom, and dynamic announcement only when needed.
+
+## Common mistake
+
+A green dot without a textual status does not explain what “active” means.
+
+## Custom implementation
+
+```html
+<p>Deployment <span>Pending review</span></p>
+```
+
+This is an app-level composition; UIify does not currently ship this component.
+
+## Sources
+
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html) (verified 2026-10-16)

package/skills/uiify/references/elements/bar-chart.md

@@ -0,0 +1,61 @@
+# bar-chart
+
+Binding: gap
+
+Compare values across a small set of named categories.
+
+## Use when
+
+Values are best compared across a modest set of named categories.
+
+## Avoid when
+
+Do not use a chart when a labeled table communicates the values more clearly, or when the category count makes bars and labels unreadable.
+
+## Structure
+
+This is an app-level composition, not a UIify component. Give the chart a concise title and text summary, label units and the compared period, and provide the same data in a readable table. Use SVG as a visual summary with a short accessible name.
+
+## Responsive
+
+Keep category names and values available when the graphic scales down. If the plot becomes cramped, allow a scrollable plot while leaving its data table readable.
+
+## States
+
+If values update, identify the period/version and expose the updated data in the table. Do not use color alone to distinguish series.
+
+## Verify
+
+Compare every plotted value with the table, check chart title/summary, units, axis labels, color contrast, and narrow viewport access.
+
+## Common mistake
+
+An SVG label such as “Sales chart” names the image but does not provide its values or trend.
+
+## Custom implementation
+
+```html
+<figure>
+  <figcaption>Signups by month, Q1 2026</figcaption>
+  <svg role="img" aria-label="Signups rise from 12 in January to 19 in February and 24 in March">
+    <!-- Render bars with category/value labels or a clear axis. -->
+  </svg>
+  <table>
+    <caption>Signups by month (number of accounts)</caption>
+    <thead><tr><th scope="col">Month</th><th scope="col">Signups</th></tr></thead>
+    <tbody>
+      <tr><th scope="row">January</th><td>12</td></tr>
+      <tr><th scope="row">February</th><td>19</td></tr>
+      <tr><th scope="row">March</th><td>24</td></tr>
+    </tbody>
+  </table>
+</figure>
+```
+
+This is an app-level composition; UIify does not currently ship this component.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/tutorials/images/complex/) (verified 2026-10-16)
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/img_role) (verified 2026-10-16)

package/skills/uiify/references/elements/breadcrumb.md

@@ -0,0 +1,38 @@
+# breadcrumb
+
+Binding: breadcrumb
+
+Show the current page within a hierarchy of parent pages.
+
+## Use when
+
+Show where the current page sits in a hierarchy and provide links to parent pages.
+
+## Avoid when
+
+Do not use breadcrumbs as the only way to navigate or show unrelated destinations.
+
+## Structure
+
+Use BreadcrumbRoot, BreadcrumbList, BreadcrumbItem, and BreadcrumbLink inside a labelled navigation landmark. Keep items in ancestor order, use current to identify the current page, and use links for ancestors.
+
+## Responsive
+
+Let long labels wrap or collapse middle ancestors with the documented items and maxItems props. Keep the current page visible.
+
+## States
+
+For a short trail, render each item. For a collapsed trail, make the omitted ancestors available through the documented native disclosure.
+
+## Verify
+
+Check that the navigation landmark has a name, ancestors are links, and the current page is announced as current. Test a long trail with keyboard and at a narrow viewport.
+
+## Common mistake
+
+Making the current page look like a link when it does not navigate.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-17)

package/skills/uiify/references/elements/button.md

@@ -0,0 +1,49 @@
+# button
+
+Binding: button
+
+Expose a clear action with its native interaction semantics.
+
+## Use when
+
+The person triggers an action on this page: submit a form, save, confirm, open a dialog or start a flow. `as="a"` gives a link the Button skin; the element stays a link.
+
+## Avoid when
+
+The control moves to another page: use a link (`<a href>` or `Button as="a"`). A choice between options is a `segmented-control` or `toggle-group`, not several buttons.
+
+## Structure
+
+One visible label names the result with a verb: "Save changes", "Invite member". An icon-only button (`size="icon"`) needs an accessible name through `aria-label`.
+
+```tsx
+<Button type="submit">Save changes</Button>
+<Button variant="ghost">Cancel</Button>
+```
+
+`Button` renders a native `<button>` with `type="button"` unless `type` is given; pass `type="submit"` inside a form.
+
+## Responsive
+
+Labels fit at 320 CSS px without truncation; shorten the copy rather than the target. In a narrow action row keep the primary action first in reading order and let the buttons wrap or stack instead of hiding one.
+
+## States
+
+Disabled: say nearby why the action is unavailable, or keep it enabled and validate on submit. Busy: keep the label and width, show progress text such as "Saving…" and ignore a second press. `selected` only for a toggle that stays on.
+
+## Verify
+
+Tab reaches every button in reading order with a visible focus indicator; Enter and Space activate it. One default (solid) button per decision area. Icon-only buttons have a non-empty name in the accessibility tree.
+
+## Common mistake
+
+Two solid buttons side by side, such as "Save" and "Delete", make people compare colors instead of labels. Keep one solid action, use `variant="outline"` or `"ghost"` for the alternative and `variant="destructive"` only where data is removed.
+
+Related laws: references/laws/von-restorff.md, references/laws/accessibility.md
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/ARIA/apg/patterns/button/) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) (verified 2026-10-17)

package/skills/uiify/references/elements/candle-chart.md

@@ -0,0 +1,38 @@
+# candle-chart
+
+Binding: candle-chart
+
+Ordered market-style observations need open, high, low, and close values in each time interval
+
+## Use when
+
+Ordered market-style observations need open, high, low, and close values in each time interval.
+
+## Avoid when
+
+Do not use candlesticks for generic category comparisons or hide exact values in a visual glyph. This component visualizes data; it does not provide financial recommendations.
+
+## Structure
+
+Use `CandleChart` with ordered time/open/high/low/close data, a descriptive label, and axis labels. UIify includes a data table fallback. Use /client for interactive crosshair/readout or live virtualized history.
+
+## Responsive
+
+Keep exact OHLC values available when candles become narrow. In live mode, the table follows the visible candles; provide another way to reach full history if needed.
+
+## States
+
+The static chart works without JavaScript. Interactive candles support pointer selection and an announced readout; suppress high-frequency readout announcements for streaming data.
+
+## Verify
+
+Check each candle's values against the table, chronological ordering, axis/time labels, keyboard access to interactive controls, update behavior, and mobile viewport.
+
+## Common mistake
+
+Coloring rising and falling candles without a table and explicit value labels makes the chart's information unavailable to many users.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/tutorials/images/complex/) (verified 2026-10-17)

package/skills/uiify/references/elements/card.md

@@ -0,0 +1,51 @@
+# card
+
+Binding: gap
+
+Group one feature heading and its explanation.
+
+## Use when
+
+A small set of related content needs a clear grouping, with a heading and supporting detail.
+
+## Avoid when
+
+Do not wrap every paragraph or list item in a card. Avoid card-within-card nesting and whole-surface click behavior when the card contains multiple independent controls.
+
+## Structure
+
+This is an app-level composition, not a UIify component. Group one topic under a heading, add a concise description, and use a link for one clear destination. If the card has one destination, make the heading link the primary control; keep other controls separate.
+
+## Responsive
+
+Keep cards in reading order when the grid stacks. Let content determine height and align repeated actions without truncating essential labels.
+
+## States
+
+Use links for navigation and buttons for in-place actions. Add selected/pressed state only when the card itself represents a selectable item.
+
+## Verify
+
+Check heading hierarchy, reading order, single versus multiple actions, keyboard reachability, focus visibility, and one-column reflow.
+
+## Common mistake
+
+Making an entire card clickable while also placing buttons or links inside it creates nested, ambiguous controls.
+
+## Custom implementation
+
+```html
+<article aria-labelledby="plan-title">
+  <h2 id="plan-title"><a href="/plans/pro">Pro plan</a></h2>
+  <p>For teams that need shared workspaces.</p>
+</article>
+```
+
+This is an app-level composition; UIify does not currently ship this component.
+
+Related laws: references/laws/proximity.md, references/laws/readability.md
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/visual-presentation.html) (verified 2026-10-16)

package/skills/uiify/references/elements/carousel.md

@@ -0,0 +1,38 @@
+# carousel
+
+Binding: carousel
+
+Present a labeled sequence of related slides with native scrolling and optional controls.
+
+## Use when
+
+A short sequence of related slides saves space and users benefit from viewing one or a subset at a time. Prefer direct scrolling when all items should remain discoverable together.
+
+## Avoid when
+
+Do not hide essential information in offscreen slides or auto-rotate content without a clear user need and an operable stop/restart control.
+
+## Structure
+
+Use `Carousel` with a stable id, descriptive aria-label, and items with unique ids and labels. The base entry is a native scroll-snap region with fragment links; navigation controls and synchronized state are in /client.
+
+## Responsive
+
+Use inline axis for horizontal slides and preserve native scrolling/scroll snap. Ensure neighboring content does not make the current slide ambiguous and controls remain reachable.
+
+## States
+
+Prefer manual operation. The client API supports autoplay with a rotation control and stops on keyboard focus, but it does not currently pause on pointer hover. Leave autoplay disabled unless the app adds hover pausing. The base entry works without JavaScript.
+
+## Verify
+
+Check accessible carousel label, slide labels, previous/next and pagination names, fragment navigation without JavaScript, keyboard control, focus behavior, and mobile scrolling. If autoplay is used, verify pause/restart and that rotation does not obscure slide reading.
+
+## Common mistake
+
+Dot-only controls with no meaningful accessible names do not tell users which slide they will select.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html) (verified 2026-10-17)

package/skills/uiify/references/elements/checkbox.md

@@ -0,0 +1,39 @@
+# checkbox
+
+Binding: checkbox
+
+Select one or more independent options.
+
+## Use when
+
+Let people independently select any number of options, including none.
+
+## Avoid when
+
+Use a radio group when exactly one option can be selected. Use a switch for a single immediate on/off setting.
+
+## Structure
+
+Use the documented Checkbox with a stable id and a visible, descriptive label. Group related choices in a fieldset with a legend; use the indeterminate state only for an aggregate that represents mixed child selections.
+
+## Responsive
+
+Let each label wrap without reducing the control's usable hit area. Stack choices when inline labels no longer fit.
+
+## States
+
+Make checked, unchecked, disabled, and any mixed aggregate state clear. Preserve selections when validation or another field fails.
+
+## Verify
+
+Click both the control and its label, use Space from the keyboard, and test independent selection, group naming, disabled and indeterminate states.
+
+## Common mistake
+
+Using checkboxes for mutually exclusive options or showing mixed state without an aggregate relationship.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/labels/) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/grouping/) (verified 2026-10-17)

package/skills/uiify/references/elements/code-block.md

@@ -0,0 +1,50 @@
+# code-block
+
+Binding: gap
+
+Present source text with preserved whitespace.
+
+## Use when
+
+People need to read or copy source text while preserving whitespace and line breaks.
+
+## Avoid when
+
+Do not put prose in preformatted code or make copying the only way to access the content. Avoid horizontal overflow that hides important lines without an intentional scroll container.
+
+## Structure
+
+This is an app-level composition, not a UIify component. Use pre > code for code and a figure/figcaption when a caption identifies the example. Add a clearly named copy button only when copy is implemented; report success in a status region.
+
+## Responsive
+
+Allow code to wrap when that preserves readability, or provide a clearly scrollable region with keyboard access. Keep captions and copy controls reachable at narrow widths.
+
+## States
+
+Represent copy idle/success/failure in text. Do not announce every code line; preserve code as selectable text.
+
+## Verify
+
+Check whitespace, language/description context, keyboard scrolling, copy action name and announcement, zoom, and line wrapping.
+
+## Common mistake
+
+An icon-only copy button with no accessible name gives no indication of its action.
+
+## Custom implementation
+
+```html
+<figure>
+  <figcaption>Install the package</figcaption>
+  <pre><code>npm install uiify</code></pre>
+</figure>
+```
+
+This is an app-level composition; UIify does not currently ship this component.
+
+## Sources
+
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre) (verified 2026-10-16)
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code) (verified 2026-10-16)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) (verified 2026-10-16)

package/skills/uiify/references/elements/collapsible.md

@@ -0,0 +1,38 @@
+# collapsible
+
+Binding: collapsible
+
+Reveal secondary content with a native details/summary disclosure.
+
+## Use when
+
+A section is secondary to the main flow and people benefit from choosing when to reveal it.
+
+## Avoid when
+
+Do not hide information people need to complete the primary task or expect users to open several sections to compare content. Use headings and visible content for essential information.
+
+## Structure
+
+Use `Collapsible` with a specific visible label and content. It uses native details/summary; give the root a stable id. Keep the disclosure label concise and informative.
+
+## Responsive
+
+Let revealed content reflow naturally and avoid fixed-height panels. Keep the summary hit area comfortably operable on touch.
+
+## States
+
+The native details element supports open/closed state without JavaScript. Enter/Space toggles the summary. 'defaultOpen' sets initial state; 'disabled' removes the summary from focus and marks it aria-disabled.
+
+## Verify
+
+Test keyboard and pointer toggle, open/closed announcement, initial open state, disabled state, multiple independent disclosures, and narrow content reflow.
+
+## Common mistake
+
+Do not use the disclosure label as a vague “More” when it can name the hidden content.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) (verified 2026-10-17)
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) (verified 2026-10-17)

package/skills/uiify/references/elements/color-picker.md

@@ -0,0 +1,39 @@
+# color-picker
+
+Binding: color-picker
+
+Let people choose a color value for a specific purpose.
+
+## Use when
+
+Let people set a color such as a theme accent or drawing color.
+
+## Avoid when
+
+Do not use color as the only way to choose or identify a required category. Use a finite labelled choice set when only a few named colors are allowed.
+
+## Structure
+
+Use the documented ColorPicker with its required visible label. Choose the documented colorSpace and alpha options to match the stored value; show the current color value as text as well as a swatch.
+
+## Responsive
+
+Keep the label, picker control, and current value visible within narrow layouts.
+
+## States
+
+Preserve the selected color and communicate any invalid or disabled state. The native picker UI may vary by browser and operating system.
+
+## Verify
+
+Test the accessible name, keyboard use, color value serialization, alpha and color-space requirements, and the browser’s picker behavior. Check that meaning is not conveyed by color alone.
+
+## Common mistake
+
+Showing a swatch without text that lets people inspect or identify its value.
+
+## Sources
+
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/color) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/tutorials/forms/labels/) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html) (verified 2026-10-17)

package/skills/uiify/references/elements/combobox.md

@@ -0,0 +1,37 @@
+# combobox
+
+Binding: combobox
+
+Search and choose from a long set of known options.
+
+## Use when
+
+Let the person filter and choose from a long list of known options. Use a native `select` or radio group for a short list; use a text input for unrestricted text.
+
+## Avoid when
+
+Do not use a combobox when people need to compare all options at once or when typing is not a useful way to find an option.
+
+## Structure
+
+`Combobox.Root` receives `items` with `label` and `value`. Give `Combobox.Input` a visible associated label or accessible name. Render filtered items with `Combobox.Content` and `Combobox.Item`; render `Combobox.Empty` only when the filtered list is empty. The multi-value mode uses `multiple` and supports tags.
+
+## Responsive
+
+Keep the input and selected value visible when the option popup opens. Let the popup scroll when the filtered list is long and keep the current option in view.
+
+## States
+
+Typing filters options. Arrow keys move the active option while DOM focus stays on the input; Enter selects the active option and Escape closes the popup. Skip disabled options; provide loading feedback in the page. In Tier 2, filtering and selection require JavaScript hydration; before hydration only server-rendered markup is present.
+
+## Verify
+
+Type a partial match, use ArrowDown and ArrowUp to move through results, press Enter to select, and Escape to close without selecting. Check no matches, disabled options, loading, selected value, narrow viewport, and the accessible input name.
+
+## Common mistake
+
+A combobox for four choices adds typing and keyboard behavior without helping people find an option.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) (verified 2026-10-17)

package/skills/uiify/references/elements/command-palette.md

@@ -0,0 +1,43 @@
+# command-palette
+
+Binding: gap
+
+Let users search for and invoke a small set of named commands.
+
+## Use when
+
+Provide a keyboard-accessible way to find and invoke named commands across an application.
+
+## Avoid when
+
+Do not call a static search form a command palette. Avoid menu/listbox semantics unless the complete keyboard and selection pattern is implemented.
+
+## Structure
+
+Give the search field a visible or programmatic label. A full palette must define how focus enters and leaves, how results are navigated and selected, and how the surface is dismissed; follow the applicable combobox and dialog pattern.
+
+## Responsive
+
+Keep the search field and results within the viewport, with a scrollable results region that does not trap page zoom.
+
+## States
+
+Provide clear no-results, loading, and execution feedback where applicable. Keep the query and focus behavior predictable when the palette closes.
+
+## Verify
+
+Test keyboard navigation, selection, Escape dismissal, focus restoration, screen-reader names, and narrow viewport behavior. A labeled search form alone does not pass this check.
+
+## Common mistake
+
+Adding arrow-key handlers to a list of buttons without implementing a coherent focus and selection model.
+
+## Custom implementation
+
+For a basic non-interactive list, use a labelled search form with ordinary links or buttons. Add command-palette behavior only with a complete, tested interaction model; UIify has no dedicated command-palette component.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/) (verified 2026-10-17)

package/skills/uiify/references/elements/context-menu.md

@@ -0,0 +1,38 @@
+# context-menu
+
+Binding: context-menu
+
+A specific object has a short set of actions that are useful at the point where the user invokes its context menu
+
+## Use when
+
+A specific object has a short set of actions that are useful at the point where the user invokes its context menu. Every action must also be available through a discoverable visible control or another accessible route.
+
+## Avoid when
+
+Do not make right-click the only way to reach an action, or use this for general navigation. On touch devices, users need a visible alternative.
+
+## Structure
+
+Wrap the object with `ContextMenu` Root, Trigger, Content, and concise action items. Use checkbox/radio items only for state choices and provide clear labels that make sense without pointer coordinates.
+
+## Responsive
+
+Context menus are supplementary on touch: expose the same actions through a visible button or menu. Check that pointer-anchored placement stays on screen.
+
+## States
+
+The trigger opens on the context-menu event and the menu focuses an item. Arrow keys move through items, Enter/Space selects, and Escape closes and returns focus.
+
+## Verify
+
+Test context-menu key/pointer opening, keyboard navigation and selection, Escape/focus return, outside dismissal, disabled items, and viewport-edge placement. Verify the same actions are reachable without a right-click.
+
+## Common mistake
+
+Do not hide the only route to an important action behind a context menu.
+
+## Sources
+
+- [www.w3.org](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) (verified 2026-10-17)
+- [www.w3.org](https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html) (verified 2026-10-17)