Skip to content
FrameworkStyle

AriaKeyShortcutsController

Reactive controller that exposes registered hotkey shortcut metadata

Import

import { AriaKeyShortcutsController } from "@videojs/html";

Usage

Create the controller on a reactive element inside a player container. It follows the container’s hotkey registrations and requests a host update when they change.

class CustomPlayButton extends UIElement {
  readonly #shortcut = new AriaKeyShortcutsController(this, "togglePaused");

  get ariaKeyShortcuts() {
    return this.#shortcut.aria;
  }

  get shortcutLabel() {
    return this.#shortcut.shortcut;
  }
}

Use aria for the element’s aria-keyshortcuts value and shortcut for display text. Both are undefined until the matching action has a registered shortcut.

API Reference

Parameters

ParameterTypeDefaultDetails
host*object
action*string
options*unknown

Return Value

PropertyTypeDetails
valuestring | undefined
ariastring | undefined
shortcutstring | undefined
details{ aria?: string; shortcut?: string }
hostConnected(() => void)
hostDisconnected(() => void)