2.1.4 Character Key Shortcuts

<!-- Good Example: Configurable Shortcuts -->
<div class="shortcut-manager">
  <h2>Keyboard Shortcuts</h2>
  <div class="shortcuts-settings">
    <label>
      <input type="checkbox" checked onchange="toggleShortcuts()">
      Enable keyboard shortcuts
    </label>
    
    <div class="shortcut-list">
      <div class="shortcut-item">
        <span class="shortcut-key">P</span>
        <span class="shortcut-desc">Play/Pause</span>
        <button onclick="customizeShortcut('play')">Customize</button>
        <button onclick="disableShortcut('play')">Disable</button>
      </div>
      
      <div class="shortcut-item">
        <span class="shortcut-key">M</span>
        <span class="shortcut-desc">Mute/Unmute</span>
        <button onclick="customizeShortcut('mute')">Customize</button>
        <button onclick="disableShortcut('mute')">Disable</button>
      </div>
    </div>
  </div>
</div>

<!-- Good Example: Alternative Access -->
<div class="media-player">
  <div class="controls">
    <button onclick="playPause()" title="Play/Pause (P)">
      <span class="icon">⏯</span>
      <span class="shortcut-hint">P</span>
    </button>
    
    <button onclick="toggleMute()" title="Mute/Unmute (M)">
      <span class="icon">🔊</span>
      <span class="shortcut-hint">M</span>
    </button>
  </div>
  
  <!-- Keyboard shortcut help -->
  <div class="shortcuts-help" aria-live="polite">
    <h3>Available Shortcuts:</h3>
    <ul>
      <li><kbd>P</kbd> - Play/Pause</li>
      <li><kbd>M</kbd> - Mute/Unmute</li>
      <li><kbd>?</kbd> - Show help</li>
    </ul>
  </div>
</div>

<!-- Bad Example: Unconfigurable Shortcuts -->
<div class="bad-shortcuts">
  <div class="media-player">
    <!-- No way to disable or customize these shortcuts -->
    <button onclick="playPause()">Play</button>
    <button onclick="toggleMute()">Mute</button>
  </div>
  
  <!-- Hidden shortcuts with no documentation -->
  <script>
    document.addEventListener('keydown', function(e) {
      // BAD: No way to disable or customize
      switch(e.key) {
        case 'p': playPause(); break;
        case 'm': toggleMute(); break;
        case 's': search(); break;
        // Many more undocumented shortcuts...
      }
    });
  </script>
</div>

<script>
// Good implementation with configuration
class ShortcutManager {
  constructor() {
    this.shortcuts = new Map();
    this.enabled = true;
    this.loadUserPreferences();
  }
  
  register(key, action, options = {}) {
    this.shortcuts.set(key, {
      action: action,
      description: options.description || '',
      customizable: options.customizable !== false,
      enabled: options.enabled !== false
    });
  }
  
  handleKeyDown(event) {
    if (!this.enabled) return;
    
    // Only handle single character keys without modifiers
    if (event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) return;
    if (event.key.length !== 1) return;
    
    // Don't interfere with form input
    if (event.target.matches('input, textarea, [contenteditable]')) return;
    
    const shortcut = this.shortcuts.get(event.key.toLowerCase());
    if (shortcut && shortcut.enabled) {
      event.preventDefault();
      shortcut.action();
    }
  }
  
  customize(oldKey, newKey) {
    const shortcut = this.shortcuts.get(oldKey);
    if (shortcut && shortcut.customizable) {
      this.shortcuts.delete(oldKey);
      this.shortcuts.set(newKey, shortcut);
      this.saveUserPreferences();
    }
  }
  
  disable(key) {
    const shortcut = this.shortcuts.get(key);
    if (shortcut) {
      shortcut.enabled = false;
      this.saveUserPreferences();
    }
  }
  
  toggle(enabled) {
    this.enabled = enabled;
    this.saveUserPreferences();
  }
}
</script>