Add aria-actions interactive demo

README.md

@@ -130,6 +130,7 @@ See:
 
 | Demo name | Description and docs | Source code & Readme | Live demo page |
 |---|---|---|---|
+| ARIA Actions demo | Interactive demo for the `aria-actions` ARIA attribute, which exposes a list of secondary actions on composite-widget items (tabs, options, rows) to assistive technology. | [/aria-actions/](https://github.com/MicrosoftEdge/Demos/tree/main/aria-actions) | [ARIA Actions demo](https://microsoftedge.github.io/Demos/aria-actions/) |
 | Built-in AI playgrounds | Demo pages showing how to use the built-in Prompt and Writing Assistance AI APIs in Microsoft Edge. | [/built-in-ai/](https://github.com/MicrosoftEdge/Demos/tree/main/built-in-ai) | [Built-in AI playgrounds](https://microsoftedge.github.io/Demos/built-in-ai/) demo |
 | CSS Gap Decorations demos | Draws line decorations within gaps in CSS Grid, Flexbox, and Multi-column layouts. | [/css-gap-decorations/](https://github.com/MicrosoftEdge/Demos/tree/main/css-gap-decorations) | [CSS Gap Decorations demos](https://microsoftedge.github.io/Demos/css-gap-decorations/) (Readme) |
 | CSS Masonry demos | Showcase the implementation of CSS Masonry layout. | [/css-masonry/](https://github.com/MicrosoftEdge/Demos/tree/main/css-masonry) | [CSS Masonry demos](https://microsoftedge.github.io/Demos/css-masonry/) (Readme) |

aria-actions/.gitignore

@@ -0,0 +1 @@
+.screenshots/

aria-actions/README.md

@@ -0,0 +1,33 @@
+# ARIA actions demo
+
+➡️ **[Open the demo](https://microsoftedge.github.io/Demos/aria-actions/)** ⬅️
+
+Interactive demo of [`aria-actions`](https://pr-preview.s3.amazonaws.com/w3c/aria/pull/1805.html), a new ARIA attribute that exposes secondary actions on an element to assistive technology. The value is an IDREFS list; each referenced element becomes an action that screen-reader users can invoke directly from the focused item.
+
+The demo covers two composite-widget patterns: tabs and a data grid. Naming and structure follow [ARIA PR 1805](https://github.com/w3c/aria/pull/1805) and the [APG Tabs with Action Buttons example](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-actions/).
+
+## What the action buttons do
+
+Clicking (or AT-invoking) an action toggles a visible state on its target item — Close strikes through the tab, Pin adds a 📌 prefix, View highlights the row, Archive dims the row and rewrites its Status cell. Clicking the same action again reverses the state. Each section has a polite live-region "Last action:" status row that announces what changed, and a **Reset section** button that restores the starting state so the demo is replayable.
+
+## Keyboard navigation
+
+The tablist and grid both use the experimental [`focusgroup`](https://open-ui.org/components/scoped-focusgroup.explainer/) attribute for declarative arrow-key navigation: `focusgroup="tablist nomemory"` on the tablist and `focusgroup="toolbar block nomemory nowrap"` on the grid's `<tbody>`. In-line action buttons (the tab Close/Pin and the in-row View/Archive) are scoped out of arrow nav with `focusgroup="none"` on their wrapper so they stay reachable by <kbd>Tab</kbd>. When the browser supports `focusgroup` natively, it handles arrow keys directly; otherwise the demo lazy-loads the [Microsoft focusgroup polyfill](https://github.com/microsoft/polyfills/tree/main/packages/focusgroup) from jsDelivr and lets the polyfill provide the same behaviour. If neither is available (offline, CDN blocked), the script keeps a roving-tabindex + arrow-key handler as a final fallback. A small status pill in the header reports which path is currently in use.
+
+## Learn more
+
+- [ARIA spec PR 1805 — rendered preview](https://pr-preview.s3.amazonaws.com/w3c/aria/pull/1805.html) (current normative text)
+- [Umbrella discussion: "Secondary actions on items in composite widget roles"](https://github.com/w3c/aria/issues/1440)
+- [APG: Tabs with Action Buttons example](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-actions/)
+- [Proposal explainer (Sarah Higley)](https://gist.github.com/smhigley/8dbe67f834cc472e3a14bf6b289e6f0c)
+
+## Requirements
+
+The demo exercises Blink's **AriaActions** runtime feature, which is experimental and off by default in every channel. To turn it on:
+
+| Method | Instructions |
+|--------|--------------|
+| `chrome://flags` | Open `chrome://flags/#enable-experimental-web-platform-features`, set it to **Enabled**, then relaunch. |
+| Command line | Launch with `--enable-blink-features=AriaActions`. |
+
+Microsoft Edge or any Chromium-based browser will work. Firefox and Safari have not shipped support.