Repository: wagtail/wagtail
File: client/src/controllers/KeyboardController.ts (TypeScript)

Code before:
 * @example
 * ```html
 * <button type="button" data-controller="w-kbd" data-w-kbd-key="[">Trigger me with the <kbd>[</kbd> key.</button>
 * ```
 *
 * @example - use `mod` for `ctrl` on Windows and `cmd` on MacOS
 * ```html
 * <button type="button" data-controller="w-kbd" data-w-kbd-key="mod+s">Trigger me with <kbd>ctrl+p</kbd> on Windows or <kbd>cmd+p</kbd> on MacOS.</button>
 * ```
 *
 * @example - use 'global' scope to allow the shortcut to work even when an input is focused
 * ```html
 * <button type="button" data-controller="w-kbd" data-w-kbd-key="mod+s" data-w-kbd-scope-value="global">Trigger me globally.</button>
 * ```
 *
 * @example - use aria-keyshortcuts (when the key string is compatible with Mousetrap's syntax)
 * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-keyshortcuts
 * ```html
 * <button type="button" data-controller="w-kbd" aria-keyshortcuts="alt+p">Trigger me with alt+p.</button>
 * ```
 */
export class KeyboardController extends Controller<
  HTMLButtonElement | HTMLAnchorElement
> {
  /**
   * If custom keyboard shortcuts are disabled by user in settings then controller will not be loaded
   */
  static get shouldLoad() {
    return !!WAGTAIL_CONFIG.KEYBOARD_SHORTCUT_PREFERENCE;
  }

  static values = {
    key: { default: '', type: String },
    scope: { default: '', type: String },
  };

  /** Keyboard shortcut string. */
  declare keyValue: string;
  /** Scope of the keyboard shortcut, defaults to the normal MouseTrap (non-input) scope. */
  declare scopeValue: '' | 'global';

  initialize() {
    this.handleKey = this.handleKey.bind(this);
    if (!this.keyValue) {
      const ariaKeyShortcuts = this.element.getAttribute('aria-keyshortcuts');
      if (ariaKeyShortcuts) {
        this.keyValue = ariaKeyShortcuts;
      }
    }
  }


Review comment (suggestion):
```suggestion
   * If custom keyboard shortcuts are disabled by user in settings then controller will not be loaded.
```

Code after:
 *
 * @example
 * ```html
 * <button type="button" data-controller="w-kbd" data-w-kbd-key="[">Trigger me with the <kbd>[</kbd> key.</button>
 * ```
 *
 * @example - use `mod` for `ctrl` on Windows and `cmd` on MacOS
 * ```html
 * <button type="button" data-controller="w-kbd" data-w-kbd-key="mod+s">Trigger me with <kbd>ctrl+p</kbd> on Windows or <kbd>cmd+p</kbd> on MacOS.</button>
 * ```
 *
 * @example - use 'global' scope to allow the shortcut to work even when an input is focused
 * ```html
 * <button type="button" data-controller="w-kbd" data-w-kbd-key="mod+s" data-w-kbd-scope-value="global">Trigger me globally.</button>
 * ```
 *
 * @example - use aria-keyshortcuts (when the key string is compatible with Mousetrap's syntax)
 * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-keyshortcuts
 * ```html
 * <button type="button" data-controller="w-kbd" aria-keyshortcuts="alt+p">Trigger me with alt+p.</button>
 * ```
 */
export class KeyboardController extends Controller<
  HTMLButtonElement | HTMLAnchorElement
> {
  static values = {
    key: { default: '', type: String },
    scope: { default: '', type: String },
  };

  /** Keyboard shortcut string. */
  declare keyValue: string;
  /** Scope of the keyboard shortcut, defaults to the normal MouseTrap (non-input) scope. */
  declare scopeValue: '' | 'global';

  /**
   * If custom keyboard shortcuts are disabled by user in settings then controller will not be loaded
   */
  static get shouldLoad() {
    return !!WAGTAIL_CONFIG.KEYBOARD_SHORTCUTS_ENABLED;
  }

  initialize() {
    this.handleKey = this.handleKey.bind(this);
    if (!this.keyValue) {
      const ariaKeyShortcuts = this.element.getAttribute('aria-keyshortcuts');
      if (ariaKeyShortcuts) {
        this.keyValue = ariaKeyShortcuts;
      }
    }
  }