diff --git a/CLAUDE.md b/CLAUDE.md index 2b241f6f..b144f388 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -64,6 +64,7 @@ These mirror `CONTRIBUTING.md`. Enforce them in your own writing and when review 4. **British English.** "colour", "behaviour", "internationalisation", "licence" (noun). 5. **Section structure.** `## What it is`, `## Why it matters`, `## How to implement`, `## Common mistakes`, `## Verification`. Last two are optional if they would not add value. 6. **Length.** 250–500 words of body content. Be useful, not padded. +7. **Inline cross-links must carry the right category.** A spec page's URL is `/spec///`, and the category is the directory the `.md` lives in — _not_ always the category of the page you're linking from. When you hand-write an inline link to another spec page, confirm its directory (`ls src/content/spec/*/.md`) before writing the path; do not assume the target shares the current page's category. (`relatedSlugs` is safe — the route resolver looks up each slug's real category — but raw Markdown links are not checked at authoring time, only by the **Internal links** CI job, which 404s on a wrong-category path.) ## Architecture quick reference diff --git a/public/og-default.png b/public/og-default.png index 828d40f6..50c19636 100644 Binary files a/public/og-default.png and b/public/og-default.png differ diff --git a/public/og/checklist.png b/public/og/checklist.png index 1aad95b7..50bbe680 100644 Binary files a/public/og/checklist.png and b/public/og/checklist.png differ diff --git a/public/og/spec.png b/public/og/spec.png index ec9f72ea..ab04741c 100644 Binary files a/public/og/spec.png and b/public/og/spec.png differ diff --git a/public/og/spec/foundations.png b/public/og/spec/foundations.png index 88f6533e..16a3c5da 100644 Binary files a/public/og/spec/foundations.png and b/public/og/spec/foundations.png differ diff --git a/public/og/spec/foundations/invoker-commands.png b/public/og/spec/foundations/invoker-commands.png new file mode 100644 index 00000000..66954f00 Binary files /dev/null and b/public/og/spec/foundations/invoker-commands.png differ diff --git a/src/content/changelog/2026-06-30-invoker-commands.md b/src/content/changelog/2026-06-30-invoker-commands.md new file mode 100644 index 00000000..ab1110b0 --- /dev/null +++ b/src/content/changelog/2026-06-30-invoker-commands.md @@ -0,0 +1,8 @@ +--- +title: New page on invoker commands +date: "2026-06-30" +type: added +relatedSlugs: [invoker-commands] +--- + +Added a page on [invoker commands](/spec/foundations/invoker-commands/) — the `command` and `commandfor` button attributes that declaratively open a popover, control a ``, or fire a custom `CommandEvent`, with the browser handling keyboard activation and accessibility. Documented as `recommended`: it reached Baseline across major browsers at the end of 2025 (Safari 26.2 completing the set), so it is a sound progressive enhancement with a scripted fallback for older versions. diff --git a/src/content/spec/accessibility/native-interactive-elements.md b/src/content/spec/accessibility/native-interactive-elements.md index 3d53b316..4539e95f 100644 --- a/src/content/spec/accessibility/native-interactive-elements.md +++ b/src/content/spec/accessibility/native-interactive-elements.md @@ -6,7 +6,7 @@ summary: "Prefer native HTML interactive elements — + + +``` + +The built-in commands cover the common overlay patterns: `show-popover`, `hide-popover`, `toggle-popover` for [popovers](/spec/foundations/popover-api/), and `show-modal`, `close`, `request-close` for ``. Any value prefixed with two dashes (for example `command="--rotate"`) is a **custom command**: the browser fires a `CommandEvent` on the target carrying that name, and your script decides what to do — invoker wiring without a built-in action. + +## Why it matters + +- **Less JavaScript for common patterns.** Opening a popover or closing a dialog no longer needs a click handler. The relationship lives in markup the browser understands. +- **Accessibility comes for free.** The control is a real ` + + +
+

Delete this item?

+ + +
+ +``` + +Treat it as progressive enhancement where you still support older browsers: a button with a JavaScript fallback degrades to a normal control. + +## Common mistakes + +- **Putting `command`/`commandfor` on a non-button.** They only work on `