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

Code before:
 * ```
 */
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';

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

  customKeyboardShortcutsEnabled(): boolean {
    const customShortcutElement = document.getElementById(
      'w-keyboard-shortcut-preference',
    );
    if (!customShortcutElement) {
      return true;
    }

    try {
      const config = JSON.parse(customShortcutElement.textContent || 'true');
      return config.custom_keyboard_shortcuts;
    } catch (error) {
      return true;
    }
  }

  handleKey(event: Event) {
    if (event.preventDefault) event.preventDefault();
    this.element.click();
  }

  /**
   * When a key is set or changed, bind the handler to the keyboard shortcut.
   * This will override the shortcut, if already set.
   */
  keyValueChanged(key: string, previousKey: string) {

Review comment (suggestion):
Maybe we could consider using the Wagtail config approach instead?
See `client/src/config/wagtailConfig.ts` & `wagtail/admin/templates/wagtailadmin/admin_base.html` (`wagtail-config`) &  `wagtail/admin/templatetags/wagtailadmin_tags.py` (`wagtail_config` template tag)
.

And then just not register the controller at all or override it with an 'empty' controller, or at least import the config into the controller and use that way.

Code after:
 * ```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;
      }
    }
  }

  handleKey(event: Event) {
    if (event.preventDefault) event.preventDefault();
    this.element.click();
  }

  /**
   * When a key is set or changed, bind the handler to the keyboard shortcut.
   * This will override the shortcut, if already set.
   */
  keyValueChanged(key: string, previousKey: string) {
    if (previousKey && previousKey !== key) {
      Mousetrap.unbind(previousKey);
    }

    if (this.scopeValue === 'global') {
      Mousetrap.bindGlobal(key, this.handleKey);
    } else {