@fusion.dev/helix-headless 0.154.0 → 0.156.0

package/dist/tree/root/tree-root.d.ts

@@ -35,6 +35,13 @@ declare const HelixHeadlessTree_base: (new (...args: any[]) => import("@fusion.d
  * or open, and the tree's one tab stop stays on the item last reached. In a
  * tree of check marks, Control+A (Command+A on an Apple keyboard) checks every
  * item or clears them all, and Shift with Up or Down Arrow moves and checks.
+ * Shift+Space checks every item from the one last checked to the focused one,
+ * and Control+Shift+Home or End checks every item from the focused one to the
+ * first or the last, then moves there, as the tree pattern's range keys do.
+ *
+ * A tree with no name of its own is announced as "Tree", which says nothing
+ * about what it holds, so a development build warns once with the kind
+ * `missing-name` where neither `label` nor an `aria-label` names it.
  *
  * Removing the item that has focus moves focus to the item after it among its
  * siblings, or the one before, or its parent, so focus stays in the tree.
@@ -50,7 +57,15 @@ declare const HelixHeadlessTree_base: (new (...args: any[]) => import("@fusion.d
  * `helix-before-reorder`, which you can refuse, and then `helix-reorder`, whose
  * `keys` hold the siblings in the new order. **You move the items**: the tree
  * moves no element of yours, and focus follows the moved item once you have.
- * Moving an item into another branch is not part of this.
+ *
+ * **Alt with the arrow along the line moves an item into another branch.**
+ * Alt with the arrow that opens a branch (Right on a left-to-right page) puts
+ * the focused item last inside the item before it, and opens that item; Alt
+ * with the other arrow puts it after its parent, a level out. The same
+ * `helix-before-reorder` and `helix-reorder` are sent, with `parent` naming
+ * the branch it moves into by its key, `''` for the top level, and `keys`
+ * holding that branch's items in their new order. The tree says the move with
+ * `moved-into-label`.
  *
  * @since 0.1.0
  * @status stable
@@ -92,6 +107,14 @@ export declare class HelixHeadlessTree extends HelixHeadlessTree_base {
      * wins over this.
      */
     label: string;
+    /**
+     * What screen readers hear when an item moves into another branch, in a
+     * `reorderable` tree. `{name}` is the item's words, `{parent}` the words of
+     * the branch it moved into, or the tree's `label` for the top level,
+     * `{position}` its place there, counting from 1, and `{count}` the number of
+     * items there.
+     */
+    movedIntoLabel: string;
     /**
      * What screen readers hear each time an item moves, in a `reorderable`
      * tree. `{name}` is the item's words, `{position}` its place among its
@@ -188,6 +211,8 @@ export declare class HelixHeadlessTree extends HelixHeadlessTree_base {
     private watcher;
     /** The item that last had focus, so its removal can hand focus on. */
     private focused;
+    /** The item last checked or unchecked, where a range Shift+Space checks starts. */
+    private anchor;
     private readonly handleFocusIn;
     /**
      * Puts focus back in the tree where the item that had it was removed and
@@ -253,6 +278,20 @@ export declare class HelixHeadlessTree extends HelixHeadlessTree_base {
      * Returns whether the press was one of those.
      */
     private handleMultiple;
+    /** Checks every item of a range, and keeps the ones already checked. */
+    private checkRange;
+    /**
+     * Moves the focused item into another branch, in a `reorderable` tree: last
+     * inside the item before it, `toward` the line's end, or after its parent,
+     * toward its start. Asks the page, which moves the item, and says where it
+     * went or that the move was refused. Returns whether the key moved anything.
+     */
+    private nest;
+    /**
+     * Gives focus back to a moved item once the page has moved it, where moving
+     * it sent focus to the body, as a move among siblings does.
+     */
+    private follow;
     private move;
     private focusOn;
     private readonly handleKeydown;

package/dist/tree/root/tree-root.js

@@ -4,12 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, closestInstance, commaList, customElement, deepActiveElement, HelixElement, inlineStep, keyClaimed, MixinCollection, MixinControllerActive, ReorderController, scrollItemIntoView, selectsAll, slottedWords, Typeahead, treeArrow, typesCharacter, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, auditName, closestInstance, commaList, customElement, deepActiveElement, formatWords, HelixElement, inlineStep, keyClaimed, MixinCollection, MixinControllerActive, ReorderController, requestReorder, scrollItemIntoView, selectsAll, slottedWords, Typeahead, treeArrow, typesCharacter, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { fromGrip } from '../grip.js';
 import { HelixHeadlessTreeItem } from '../item/tree-item.js';
-import { checkedState, pressRow } from '../selection.js';
+import { checkedState, checkRows, pressRow } from '../selection.js';
 const KEYS = new Set([
     'ArrowDown',
     'ArrowUp',
@@ -26,6 +26,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
         this.canceledLabel = 'Canceled';
         this.droppedLabel = 'Dropped';
         this.label = 'Tree';
+        this.movedIntoLabel = '{name} moved into {parent}, position {position} of {count}';
         this.movedLabel = '{name} moved to position {position} of {count}';
         this.aria = new AriaForwardController(this, {
             label: true,
@@ -66,6 +67,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
                 this.requestActive(this.multiple
                     ? pressRow(this.rowOf(origin), this.values, this.order).join(',')
                     : event.detail.value);
+                this.anchor = origin;
             }
             this.syncItems();
         };
@@ -87,8 +89,15 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
             }
             this.typeahead.reset();
             const along = inlineStep(this, event.key);
+            if (event.altKey && along !== 0 && this.reorderable) {
+                if (!current.disabled && this.nest(current, along)) {
+                    event.preventDefault();
+                }
+                return;
+            }
             if (this.multiple && event.key === ' ') {
                 current.select();
+                this.anchor = current;
                 event.preventDefault();
                 return;
             }
@@ -240,8 +249,18 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
         const heads = this.nesting === 'heading' || this.selectionMode === 'leaf';
         const multiple = this.multiple;
         const checked = new Set(this.values);
+        const places = new Map();
+        for (const item of this.items) {
+            if (!places.has(item)) {
+                const siblings = this.siblingsOf(item);
+                siblings.forEach((one, at) => {
+                    places.set(one, { position: at + 1, size: siblings.length });
+                });
+            }
+        }
         for (const item of this.items) {
             const key = this.keyOf(item);
+            const place = places.get(item);
             const selected = !multiple && item.value !== '' && item.value === this.active;
             const state = multiple ? checkedState(this.rowOf(item), checked) : false;
             const focusable = item === stop;
@@ -259,6 +278,8 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
                 item.checked = state;
                 item.focusable = focusable;
                 item.level = level;
+                item.position = place?.position;
+                item.setSize = place?.size;
                 item.heads = heads;
                 item.grip = this.reorderable;
                 item.move = this.reorder.moveOf(key);
@@ -308,9 +329,24 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
             this.syncItems();
             return true;
         }
+        const visible = this.visibleItems;
+        const at = visible.indexOf(current);
+        if (event.shiftKey && event.key === ' ') {
+            const from = this.anchor ? visible.indexOf(this.anchor) : -1;
+            const range = from < 0 ? [current] : visible.slice(Math.min(from, at), Math.max(from, at) + 1);
+            this.checkRange(range);
+            return true;
+        }
+        if (event.shiftKey &&
+            (event.ctrlKey || event.metaKey) &&
+            (event.key === 'Home' || event.key === 'End')) {
+            const range = event.key === 'Home' ? visible.slice(0, at + 1) : visible.slice(at);
+            this.checkRange(range);
+            this.focusOn(event.key === 'Home' ? range[0] : range.at(-1));
+            return true;
+        }
         if (event.shiftKey && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
-            const visible = this.visibleItems;
-            const next = visible[visible.indexOf(current) + (event.key === 'ArrowDown' ? 1 : -1)];
+            const next = visible[at + (event.key === 'ArrowDown' ? 1 : -1)];
             if (next) {
                 this.focusOn(next);
                 next.select();
@@ -319,6 +355,81 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
         }
         return false;
     }
+    checkRange(range) {
+        this.requestActive(checkRows(range.map((item) => this.rowOf(item)), this.values, this.order).join(','));
+        this.syncItems();
+    }
+    nest(current, toward) {
+        const siblings = this.siblingsOf(current);
+        const from = siblings.indexOf(current);
+        const key = this.keyOf(current);
+        let into;
+        let keys;
+        if (toward > 0) {
+            const before = siblings[from - 1];
+            if (!before || before.disabled) {
+                return false;
+            }
+            into = before;
+            const inside = [...before.children].filter((node) => node instanceof HelixHeadlessTreeItem);
+            keys = [...inside.map((one) => this.keyOf(one)), key];
+        }
+        else {
+            const parent = closestInstance(current.parentElement, HelixHeadlessTreeItem);
+            if (!(parent instanceof HelixHeadlessTreeItem) || !this.items.includes(parent)) {
+                return false;
+            }
+            const above = closestInstance(parent.parentElement, HelixHeadlessTreeItem);
+            into =
+                above instanceof HelixHeadlessTreeItem && this.items.includes(above) ? above : undefined;
+            keys = this.siblingsOf(parent).map((one) => this.keyOf(one));
+            keys.splice(keys.indexOf(this.keyOf(parent)) + 1, 0, key);
+        }
+        const to = keys.indexOf(key);
+        const stood = requestReorder(this, {
+            from,
+            key,
+            keys,
+            kind: 'item',
+            parent: into ? this.keyOf(into) : '',
+            to,
+            value: keys.join(','),
+        });
+        const name = slottedWords(current, ['']) || key;
+        this.announced = stood
+            ? formatWords(this, 'movedIntoLabel', {
+                count: keys.length,
+                name,
+                parent: into ? slottedWords(into, ['']) || this.keyOf(into) : this.label,
+                position: to + 1,
+            })
+            : this.canceledLabel;
+        this.requestUpdate();
+        if (stood) {
+            if (into && !into.open) {
+                into.requestOpen(true);
+            }
+            this.follow(key);
+        }
+        return true;
+    }
+    follow(key) {
+        const lost = () => {
+            const active = deepActiveElement();
+            return !active || active === document.body;
+        };
+        if (lost()) {
+            this.focusOn(this.itemFor(key));
+            return;
+        }
+        const watch = new MutationObserver(() => {
+            watch.disconnect();
+            if (lost()) {
+                this.focusOn(this.itemFor(key));
+            }
+        });
+        watch.observe(this, { childList: true, subtree: true });
+    }
     move(from, delta) {
         const visible = this.visibleItems;
         const index = visible.indexOf(from);
@@ -359,6 +470,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.syncItems();
+        auditName(this, () => null, 'Give it a `label` that says what it holds, such as "Files".', () => this.hasAttribute('label') || this.label !== 'Tree');
     }
     updated(changed) {
         super.updated(changed);
@@ -400,6 +512,10 @@ __decorate([
     words,
     property()
 ], HelixHeadlessTree.prototype, "label", void 0);
+__decorate([
+    words,
+    property({ attribute: 'moved-into-label' })
+], HelixHeadlessTree.prototype, "movedIntoLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'moved-label' })

package/dist/tree/selection.d.ts

@@ -14,6 +14,12 @@ export interface CheckableRow {
  * a branch by its leaves, `mixed` where some of them are.
  */
 export declare const checkedState: (row: CheckableRow, chosen: ReadonlySet<string>) => boolean | 'mixed';
+/**
+ * The checked values after checking every row in `rows`, in `order`: a range
+ * the reader extends with Shift and Space, or with Control, Shift and Home or
+ * End. Rows already checked stay checked, and disabled rows are passed over.
+ */
+export declare const checkRows: (rows: readonly CheckableRow[], chosen: readonly string[], order: readonly string[]) => string[];
 /**
  * The checked values after a press on `row`, in `order`.
  *

package/dist/tree/selection.js

@@ -8,6 +8,17 @@ export const checkedState = (row, chosen) => {
     }
     return count === values.length ? true : 'mixed';
 };
+export const checkRows = (rows, chosen, order) => {
+    const added = new Set(chosen);
+    for (const row of rows) {
+        if (!row.disabled) {
+            for (const value of valuesOf(row)) {
+                added.add(value);
+            }
+        }
+    }
+    return order.filter((value) => added.has(value));
+};
 export const pressRow = (row, chosen, order) => {
     return row.disabled ? [...chosen] : toggleEvery(chosen, valuesOf(row), order);
 };

package/dist/video/root/keys.d.ts

@@ -3,18 +3,22 @@
  *
  * Separable because the table is a convention rather than a fact about this
  * element: Space and `k` play, the arrows scrub and change the volume, `m`
- * mutes, `f` fills the screen, and `j` and `l` jump the distance the bar's own
- * buttons jump. What it needs is the media element and four actions, which is
+ * mutes, `f` fills the screen, `c` turns captions on and off, Home, End and
+ * the digits go to the start, the end and each tenth, and `j` and `l` jump the
+ * distance the bar's own buttons jump. What it needs is the media element and four actions, which is
  * the same handful the media session hands to a headset. Whether the keys are
  * bound at all, and what a taken press does to the event, stay with the element.
  */
 /** What a press asks the player for, which is all a key can do. */
 export interface KeyActions {
+    captions: () => void;
     fullscreen: () => void;
     seek: (seconds: number) => void;
     skipBy: (seconds: number) => void;
     toggle: () => void;
 }
+/** The keys `takeKey` answers, as `aria-keyshortcuts` names them. */
+export declare const PLAYER_KEYS = "Space K ArrowLeft ArrowRight Shift+ArrowLeft Shift+ArrowRight J L ArrowUp ArrowDown M F C Home End 0 1 2 3 4 5 6 7 8 9";
 /**
  * Answers one press, and says whether it was one of these.
  *

package/dist/video/root/keys.js

@@ -1,8 +1,9 @@
 import { SKIP_SECONDS } from '@fusion.dev/helix-core';
 const PRESSED_BY_SPACE = new Set(['a', 'button', 'select', 'summary', 'textarea']);
 const PRESSED_ROLES = /^(button|checkbox|link|menuitem\w*|option|radio|switch|tab)$/;
+export const PLAYER_KEYS = 'Space K ArrowLeft ArrowRight Shift+ArrowLeft Shift+ArrowRight J L ArrowUp ArrowDown M F C Home End 0 1 2 3 4 5 6 7 8 9';
 export const takeKey = (event, video, actions) => {
-    if (event.defaultPrevented) {
+    if (event.defaultPrevented || event.ctrlKey || event.metaKey || event.altKey) {
         return false;
     }
     const origin = (event.composedPath?.()[0] ?? event.target);
@@ -54,7 +55,23 @@ export const takeKey = (event, video, actions) => {
             actions.fullscreen();
             break;
         }
+        case 'c': {
+            actions.captions();
+            break;
+        }
+        case 'Home': {
+            actions.seek(0);
+            break;
+        }
+        case 'End': {
+            actions.seek(video.duration);
+            break;
+        }
         default: {
+            if (/^[0-9]$/.test(event.key) && Number.isFinite(video.duration)) {
+                actions.seek((video.duration * Number(event.key)) / 10);
+                break;
+            }
             return false;
         }
     }

package/dist/video/root/video-root.d.ts

@@ -29,8 +29,16 @@ import '../../menu/index.js';
  * | Up, Down | Raises or lowers the volume by a tenth. |
  * | `m` | Mutes or unmutes. |
  * | `f` | Enters or leaves fullscreen. |
+ * | `c` | Turns captions on or off. |
+ * | Home, End | Goes to the start or the end. |
+ * | `0` to `9` | Goes to that tenth of the video: `5` is the middle. |
  * | Tab | Moves through the controls on the bar. |
  *
+ * A key with Control, Command, or Alt held is left to the browser. The
+ * player lists its keys in `aria-keyshortcuts`, and a live region says what a
+ * key changed that is not on the focused control: playing or paused, muted,
+ * the volume, captions on or off, and where the video is after a seek.
+ *
  * On the scrubber and the volume slider, the arrow keys, Page Up, Page Down,
  * Home, and End move the slider, as on any range input.
  *
@@ -125,7 +133,7 @@ import '../../menu/index.js';
  * @csspart forward - The button that skips forward ten seconds.
  * @csspart fullscreen - The button that enters and leaves fullscreen.
  * @csspart header - The region at the top left that holds the `header` slot.
- * @csspart live - A live region that repeats the loading text, so screen readers announce it when it changes. Visually hidden in the styled tier.
+ * @csspart live - A live region that says the loading text, and what a key changed, such as the volume. Visually hidden in the styled tier.
  * @csspart loading - The text shown while the video waits for more data. Draw the spinner
  * with `::part(loading)::before` in your stylesheet. This tier ships no CSS and renders
  * no extra box for it.
@@ -187,6 +195,10 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * looking at.
      */
     autoplay: boolean;
+    /**
+     * What the live region says when `c` turns captions off.
+     */
+    captionsHiddenLabel: string;
     /**
      * The name of the captions control when the video has one track. The control
      * turns that track on and off.
@@ -201,6 +213,10 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * tracks.
      */
     captionsOffLabel: string;
+    /**
+     * What the live region says when `c` turns captions on.
+     */
+    captionsShownLabel: string;
     /**
      * Whether the browser draws its native controls. When set, this element draws
      * no controls of its own.
@@ -326,6 +342,10 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * What the button that opens `overflow-controls` is called.
      */
     moreLabel: string;
+    /**
+     * What the live region says when a key mutes the video.
+     */
+    mutedLabel: string;
     /**
      * The name of the mute control. The control shows as pressed while the video
      * is muted.
@@ -353,6 +373,10 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * bar: two of the same control is worse than either placement.
      */
     overflowControls: string;
+    /**
+     * What the live region says when a key pauses the video.
+     */
+    pausedLabel: string;
     /**
      * The name of the play control while pressing it would pause the video.
      */
@@ -372,6 +396,10 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * this is what a screen reader calls it on arriving.
      */
     playerLabel: string;
+    /**
+     * What the live region says when a key plays the video.
+     */
+    playingLabel: string;
     /**
      * The name of the play control while pressing it would start the video.
      */
@@ -453,6 +481,15 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * `{duration}` filled in.
      */
     timeLabel: string;
+    /**
+     * What the live region says when a key unmutes the video.
+     */
+    unmutedLabel: string;
+    /**
+     * What the live region says when a key changes the volume. `{percent}` is the
+     * volume from 0 to 100, written in the locale.
+     */
+    volumeChangedLabel: string;
     /**
      * What the volume slider is called.
      */
@@ -773,6 +810,28 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * key means and this says that nothing else gets it.
      */
     private readonly handleKeydown;
+    /**
+     * What a reader hears after a key, which changed something they may not be
+     * looking at: the focus is on the player or a control, and the bar may be
+     * hidden.
+     *
+     * **Said from the video's state after the press**, except for playing,
+     * which starts on a promise: whether the video was paused before the press
+     * says which way it went. Nothing for fullscreen, which a reader sees and a
+     * screen reader reports as the window changing, nor for `c` where there are
+     * no captions to turn on.
+     */
+    private sayKey;
+    /**
+     * What the live region says after a key, until the video waits for data,
+     * which it says over this.
+     */
+    private said;
+    /**
+     * Puts words in the live region. The same words twice differ by a space no
+     * reader hears, since a region whose text does not change is not read again.
+     */
+    private say;
     /** The caption tracks among the copies, named as the menu names them. */
     private captions;
     /**

package/dist/video/root/video-root.js

@@ -13,7 +13,7 @@ import '../../menu/index.js';
 import { HelixHeadlessMenu } from '../../menu/root/menu-root.js';
 import { relayMedia } from '../media-events.js';
 import { barControls, menuControls, ownFile } from './extra-controls.js';
-import { takeKey } from './keys.js';
+import { PLAYER_KEYS, takeKey } from './keys.js';
 const clock = (seconds) => {
     if (!Number.isFinite(seconds) || seconds < 0) {
         return '0:00';
@@ -31,8 +31,10 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
     constructor() {
         super(...arguments);
         this.autoplay = false;
+        this.captionsHiddenLabel = 'Captions off';
         this.captionsLabel = 'Captions';
         this.captionsOffLabel = 'Off';
+        this.captionsShownLabel = 'Captions on';
         this.controls = false;
         this.crossOrigin = null;
         this.defaultMuted = false;
@@ -49,13 +51,16 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.loop = false;
         this.mediaTitle = '';
         this.moreLabel = 'More controls';
+        this.mutedLabel = 'Muted';
         this.muteLabel = 'Mute';
         this.nextLabel = 'Next';
         this.overflowControls = '';
+        this.pausedLabel = 'Paused';
         this.pauseLabel = 'Pause';
         this.percentLabel = '{percent} percent';
         this.pipLabel = 'Picture in picture';
         this.playerLabel = 'Video';
+        this.playingLabel = 'Playing';
         this.playLabel = 'Play';
         this.playsInline = true;
         this.poster = '';
@@ -69,6 +74,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.src = '';
         this.subtitlesLabel = 'Subtitles';
         this.timeLabel = '{position} of {duration}';
+        this.unmutedLabel = 'Unmuted';
+        this.volumeChangedLabel = 'Volume {percent} percent';
         this.volumeLabel = 'Volume';
         this.buffering = false;
         this.failed = false;
@@ -199,7 +206,9 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             if (event.composedPath().some((node) => node instanceof HelixHeadlessMenu)) {
                 return;
             }
+            const paused = video.paused;
             const taken = takeKey(event, video, {
+                captions: () => this.toggleCaptions(),
                 fullscreen: () => void this.fullscreen.toggle(),
                 seek: (seconds) => this.seek(seconds),
                 skipBy: (seconds) => this.skipBy(seconds),
@@ -207,8 +216,10 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             });
             if (taken) {
                 event.preventDefault();
+                this.sayKey(event.key, paused, video);
             }
         };
+        this.said = '';
         this.captions = [];
     }
     static { this.words = 'helix-video'; }
@@ -414,6 +425,31 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             });
         }
     }
+    sayKey(key, paused, video) {
+        if (key === ' ' || key === 'k') {
+            this.say(paused ? this.playingLabel : this.pausedLabel);
+        }
+        else if (key === 'm') {
+            this.say(video.muted ? this.mutedLabel : this.unmutedLabel);
+        }
+        else if (key === 'ArrowUp' || key === 'ArrowDown') {
+            this.say(formatWords(this, 'volumeChangedLabel', { percent: Math.round(video.volume * 100) }));
+        }
+        else if (key === 'c') {
+            if (this.captions.length > 0) {
+                this.say(this.captioned ? this.captionsShownLabel : this.captionsHiddenLabel);
+            }
+        }
+        else if (key !== 'f') {
+            this.say(formatWords(this, 'timeLabel', {
+                duration: clock(video.duration),
+                position: clock(video.currentTime),
+            }));
+        }
+    }
+    say(words) {
+        this.said = words !== '' && words === this.said ? `${words}\u00a0` : words;
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         if (!this.mediaRead && this.childrenKnown) {
@@ -820,6 +856,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         tabindex=${this.controls ? nothing : '0'}
         role=${this.controls ? nothing : 'group'}
         aria-label=${this.controls ? nothing : this.label || this.playerLabel}
+        aria-keyshortcuts=${this.controls ? nothing : PLAYER_KEYS}
         @keydown=${this.handleKeydown}
         @pointermove=${this.idler.stir}
         @pointerleave=${this.idler.leave}
@@ -883,7 +920,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             ? html `<div part="loading">${this.loadingLabel}</div>`
             : nothing}
       ${''}
-      <span part="live" role="status">${this.buffering && !this.failed ? this.loadingLabel : ''}</span>
+      <span part="live" role="status">${this.buffering && !this.failed ? this.loadingLabel : this.said}</span>
       ${this.failed
             ? html `<div
               part="failure"
@@ -900,6 +937,10 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessVideo.prototype, "autoplay", void 0);
+__decorate([
+    words,
+    property({ attribute: 'captions-hidden-label' })
+], HelixHeadlessVideo.prototype, "captionsHiddenLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'captions-label' })
@@ -908,6 +949,10 @@ __decorate([
     words,
     property({ attribute: 'captions-off-label' })
 ], HelixHeadlessVideo.prototype, "captionsOffLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'captions-shown-label' })
+], HelixHeadlessVideo.prototype, "captionsShownLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessVideo.prototype, "controls", void 0);
@@ -962,6 +1007,10 @@ __decorate([
     words,
     property({ attribute: 'more-label' })
 ], HelixHeadlessVideo.prototype, "moreLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'muted-label' })
+], HelixHeadlessVideo.prototype, "mutedLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'mute-label' })
@@ -973,6 +1022,10 @@ __decorate([
 __decorate([
     property({ attribute: 'overflow-controls' })
 ], HelixHeadlessVideo.prototype, "overflowControls", void 0);
+__decorate([
+    words,
+    property({ attribute: 'paused-label' })
+], HelixHeadlessVideo.prototype, "pausedLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'pause-label' })
@@ -989,6 +1042,10 @@ __decorate([
     words,
     property({ attribute: 'player-label' })
 ], HelixHeadlessVideo.prototype, "playerLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'playing-label' })
+], HelixHeadlessVideo.prototype, "playingLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'play-label' })
@@ -1039,6 +1096,14 @@ __decorate([
     words,
     property({ attribute: 'time-label' })
 ], HelixHeadlessVideo.prototype, "timeLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'unmuted-label' })
+], HelixHeadlessVideo.prototype, "unmutedLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'volume-changed-label' })
+], HelixHeadlessVideo.prototype, "volumeChangedLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'volume-label' })
@@ -1100,6 +1165,9 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessVideo.prototype, "media", void 0);
+__decorate([
+    state()
+], HelixHeadlessVideo.prototype, "said", void 0);
 HelixHeadlessVideo = __decorate([
     customElement('helix-headless-video')
 ], HelixHeadlessVideo);