2.1.4 - Billentyűparancsok

<div class="shortcut-settings">
  <h3>Billentyűparancs beállítások</h3>
  <label class="toggle-label">
    <input type="checkbox" id="toggleShortcut" />
    <span>Billentyűparancsok engedélyezése</span>
  </label>
  
  <div id="shortcut-info" class="info-box">
    <p>Ha engedélyezve van:</p>
    <ul>
      <li><kbd>S</kbd> - Mentés</li>
      <li><kbd>N</kbd> - Új dokumentum</li>
      <li><kbd>/</kbd> - Keresés</li>
    </ul>
  </div>
</div>

<style>
.shortcut-settings {
  max-width: 400px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin: 20px;
  background-color: #f8f9fa;
}

.toggle-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.toggle-label:hover {
  background-color: #e9ecef;
}

.toggle-label input {
  margin-right: 10px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.info-box {
  margin-top: 15px;
  padding: 15px;
  background-color: #e7f3ff;
  border-radius: 4px;
  font-size: 14px;
}

.info-box.disabled {
  opacity: 0.5;
}

kbd {
  display: inline-block;
  padding: 2px 6px;
  font-family: monospace;
  font-size: 12px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const toggle = document.getElementById('toggleShortcut');
  const infoBox = document.getElementById('shortcut-info');
  
  // Állapot betöltése localStorage-ból
  let shortcutsEnabled = localStorage.getItem('shortcutsEnabled') === 'true';
  toggle.checked = shortcutsEnabled;
  updateInfoBox();

  toggle.addEventListener('change', () => {
    shortcutsEnabled = toggle.checked;
    localStorage.setItem('shortcutsEnabled', shortcutsEnabled);
    updateInfoBox();
    
    // Visszajelzés a felhasználónak
    const status = shortcutsEnabled ? 'engedélyezve' : 'letiltva';
    alert(`Billentyűparancsok ${status}`);
  });

  function updateInfoBox() {
    if (shortcutsEnabled) {
      infoBox.classList.remove('disabled');
    } else {
      infoBox.classList.add('disabled');
    }
  }

  // Billentyűparancs kezelő
  document.addEventListener('keydown', (e) => {
    // Csak akkor működik, ha engedélyezve van
    if (!shortcutsEnabled) return;
    
    // Ne aktiválódjon input mezőkben
    if (['INPUT', 'TEXTAREA', 'SELECT'].includes(e.target.tagName)) return;
    
    switch(e.key.toLowerCase()) {
      case 's':
        e.preventDefault();
        console.log('Mentés parancs aktiválva');
        showNotification('Dokumentum mentve');
        break;
      case 'n':
        e.preventDefault();
        console.log('Új dokumentum parancs aktiválva');
        showNotification('Új dokumentum létrehozva');
        break;
      case '/':
        e.preventDefault();
        console.log('Keresés parancs aktiválva');
        document.querySelector('#search-input')?.focus();
        showNotification('Keresés megnyitva');
        break;
    }
  });
  
  function showNotification(message) {
    const notification = document.createElement('div');
    notification.textContent = message;
    notification.style.cssText = `
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #28a745;
      color: white;
      padding: 15px 20px;
      border-radius: 4px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      z-index: 1000;
    `;
    document.body.appendChild(notification);
    
    setTimeout(() => {
      notification.remove();
    }, 3000);
  }
});
</script>

<div class="focus-shortcut-example">
  <h3>Dokumentum szerkesztő</h3>
  
  <div class="editor-toolbar">
    <button id="saveBtn" tabindex="0" class="toolbar-btn">
      <span class="icon">💾</span> Mentés (S)
    </button>
    <button id="boldBtn" tabindex="0" class="toolbar-btn">
      <span class="icon">B</span> Félkövér (B)
    </button>
    <button id="italicBtn" tabindex="0" class="toolbar-btn">
      <span class="icon">I</span> Dőlt (I)
    </button>
  </div>
  
  <textarea id="editor" class="editor-content" placeholder="Kezdj el gépelni..."></textarea>
  
  <div class="status-bar">
    <span id="status">Készen áll</span>
  </div>
</div>

<style>
.focus-shortcut-example {
  max-width: 600px;
  margin: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.editor-toolbar {
  display: flex;
  gap: 10px;
  padding: 10px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #ddd;
}

.toolbar-btn {
  padding: 8px 16px;
  border: 1px solid #ccc;
  background-color: white;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
}

.toolbar-btn:hover {
  background-color: #e9ecef;
  border-color: #007bff;
}

.toolbar-btn:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
  background-color: #e7f3ff;
}

.toolbar-btn.active {
  background-color: #007bff;
  color: white;
  border-color: #0056b3;
}

.icon {
  font-size: 16px;
}

.editor-content {
  width: 100%;
  min-height: 200px;
  padding: 15px;
  border: none;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px;
  resize: vertical;
  box-sizing: border-box;
}

.editor-content:focus {
  outline: none;
  background-color: #fffbf0;
}

.status-bar {
  padding: 10px;
  background-color: #f8f9fa;
  border-top: 1px solid #ddd;
  font-size: 14px;
  color: #666;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const saveBtn = document.getElementById('saveBtn');
  const boldBtn = document.getElementById('boldBtn');
  const italicBtn = document.getElementById('italicBtn');
  const editor = document.getElementById('editor');
  const status = document.getElementById('status');
  
  let isBold = false;
  let isItalic = false;

  // Gomb események
  saveBtn.addEventListener('click', () => performSave());
  boldBtn.addEventListener('click', () => toggleBold());
  italicBtn.addEventListener('click', () => toggleItalic());

  // Billentyűparancs kezelő - csak fókuszban
  document.addEventListener('keydown', (e) => {
    // Mentés - csak ha a mentés gomb fókuszban van
    if (document.activeElement === saveBtn && e.key.toLowerCase() === 's') {
      e.preventDefault();
      performSave();
      return;
    }
    
    // Félkövér - csak ha a félkövér gomb fókuszban van
    if (document.activeElement === boldBtn && e.key.toLowerCase() === 'b') {
      e.preventDefault();
      toggleBold();
      return;
    }
    
    // Dőlt - csak ha a dőlt gomb fókuszban van
    if (document.activeElement === italicBtn && e.key.toLowerCase() === 'i') {
      e.preventDefault();
      toggleItalic();
      return;
    }
    
    // Szerkesztő területen belüli gyorsbillentyűk (Ctrl/Cmd kombináció)
    if (document.activeElement === editor) {
      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
        e.preventDefault();
        performSave();
      } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'b') {
        e.preventDefault();
        toggleBold();
      } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'i') {
        e.preventDefault();
        toggleItalic();
      }
    }
  });

  function performSave() {
    updateStatus('Dokumentum mentve!');
    saveBtn.classList.add('active');
    setTimeout(() => {
      saveBtn.classList.remove('active');
    }, 300);
    
    // Itt lenne a tényleges mentési logika
    console.log('Tartalom mentve:', editor.value);
  }

  function toggleBold() {
    isBold = !isBold;
    boldBtn.classList.toggle('active', isBold);
    updateStatus(isBold ? 'Félkövér bekapcsolva' : 'Félkövér kikapcsolva');
    
    // Alkalmazás a kijelölt szövegre
    if (document.activeElement === editor) {
      document.execCommand('bold');
    }
  }

  function toggleItalic() {
    isItalic = !isItalic;
    italicBtn.classList.toggle('active', isItalic);
    updateStatus(isItalic ? 'Dőlt bekapcsolva' : 'Dőlt kikapcsolva');
    
    // Alkalmazás a kijelölt szövegre
    if (document.activeElement === editor) {
      document.execCommand('italic');
    }
  }

  function updateStatus(message) {
    status.textContent = message;
    setTimeout(() => {
      status.textContent = 'Készen áll';
    }, 2000);
  }
});
</script>

<div class="shortcut-remapping">
  <h3>Gyorsbillentyű testreszabás</h3>
  
  <div class="shortcut-list">
    <div class="shortcut-item">
      <span class="action-name">Mentés</span>
      <div class="key-input-wrapper">
        <input type="text" 
               id="save-shortcut" 
               class="key-input" 
               value="S" 
               readonly
               aria-label="Mentés gyorsbillentyű">
        <button class="change-btn" data-action="save">Módosítás</button>
      </div>
    </div>
    
    <div class="shortcut-item">
      <span class="action-name">Másolás</span>
      <div class="key-input-wrapper">
        <input type="text" 
               id="copy-shortcut" 
               class="key-input" 
               value="C" 
               readonly
               aria-label="Másolás gyorsbillentyű">
        <button class="change-btn" data-action="copy">Módosítás</button>
      </div>
    </div>
    
    <div class="shortcut-item">
      <span class="action-name">Beillesztés</span>
      <div class="key-input-wrapper">
        <input type="text" 
               id="paste-shortcut" 
               class="key-input" 
               value="V" 
               readonly
               aria-label="Beillesztés gyorsbillentyű">
        <button class="change-btn" data-action="paste">Módosítás</button>
      </div>
    </div>
  </div>
  
  <div class="instructions">
    <p><strong>Használat:</strong> Kattints a "Módosítás" gombra, majd nyomd meg az új billentyűt.</p>
    <p><small>Megjegyzés: A gyorsbillentyűk Ctrl (Windows) vagy Cmd (Mac) billentyűvel kombinálva működnek.</small></p>
  </div>
  
  <button id="reset-shortcuts" class="reset-btn">Alapértelmezett beállítások visszaállítása</button>
</div>

<style>
.shortcut-remapping {
  max-width: 500px;
  margin: 20px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f8f9fa;
}

.shortcut-list {
  margin: 20px 0;
}

.shortcut-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  margin-bottom: 10px;
  background-color: white;
  border: 1px solid #e9ecef;
  border-radius: 4px;
}

.action-name {
  font-weight: 500;
  min-width: 100px;
}

.key-input-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.key-input {
  width: 60px;
  padding: 6px;
  text-align: center;
  font-family: monospace;
  font-size: 16px;
  font-weight: bold;
  border: 2px solid #ced4da;
  border-radius: 4px;
  background-color: #f8f9fa;
}

.key-input:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
  border-color: #007bff;
  background-color: #fff;
}

.key-input.recording {
  background-color: #fff3cd;
  border-color: #ffc107;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

.change-btn {
  padding: 6px 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.change-btn:hover {
  background-color: #0056b3;
}

.change-btn:focus {
  outline: 2px solid #80bdff;
  outline-offset: 2px;
}

.change-btn:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.instructions {
  margin: 20px 0;
  padding: 15px;
  background-color: #e7f3ff;
  border-radius: 4px;
  font-size: 14px;
}

.reset-btn {
  width: 100%;
  padding: 10px;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.reset-btn:hover {
  background-color: #c82333;
}

.reset-btn:focus {
  outline: 2px solid #f5c6cb;
  outline-offset: 2px;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Alapértelmezett gyorsbillentyűk
  const defaultShortcuts = {
    save: 'S',
    copy: 'C',
    paste: 'V'
  };
  
  // Aktuális gyorsbillentyűk (localStorage-ból betöltve)
  let shortcuts = loadShortcuts();
  
  // UI elemek
  const changeButtons = document.querySelectorAll('.change-btn');
  const resetButton = document.getElementById('reset-shortcuts');
  
  let recordingAction = null;

  // Gyorsbillentyűk betöltése
  function loadShortcuts() {
    const saved = localStorage.getItem('customShortcuts');
    if (saved) {
      return JSON.parse(saved);
    }
    return { ...defaultShortcuts };
  }

  // Gyorsbillentyűk mentése
  function saveShortcuts() {
    localStorage.setItem('customShortcuts', JSON.stringify(shortcuts));
  }

  // UI frissítése
  function updateUI() {
    Object.keys(shortcuts).forEach(action => {
      const input = document.getElementById(`${action}-shortcut`);
      if (input) {
        input.value = shortcuts[action].toUpperCase();
      }
    });
  }

  // Módosítás gomb kezelő
  changeButtons.forEach(btn => {
    btn.addEventListener('click', function() {
      const action = this.getAttribute('data-action');
      startRecording(action);
    });
  });

  // Felvétel indítása
  function startRecording(action) {
    if (recordingAction) {
      stopRecording();
    }
    
    recordingAction = action;
    const input = document.getElementById(`${action}-shortcut`);
    const button = document.querySelector(`[data-action="${action}"]`);
    
    input.classList.add('recording');
    input.value = '...';
    button.textContent = 'Mégse';
    button.disabled = false;
    
    // Billentyű figyelő
    document.addEventListener('keydown', recordKey);
    
    // Mégse gomb
    button.onclick = () => stopRecording();
  }

  // Felvétel leállítása
  function stopRecording() {
    if (!recordingAction) return;
    
    const input = document.getElementById(`${recordingAction}-shortcut`);
    const button = document.querySelector(`[data-action="${recordingAction}"]`);
    
    input.classList.remove('recording');
    input.value = shortcuts[recordingAction].toUpperCase();
    button.textContent = 'Módosítás';
    button.onclick = () => startRecording(recordingAction);
    
    document.removeEventListener('keydown', recordKey);
    recordingAction = null;
  }

  // Billentyű rögzítése
  function recordKey(e) {
    e.preventDefault();
    
    // Csak betűk, számok és néhány speciális karakter engedélyezett
    const validKeys = /^[a-zA-Z0-9\-=\[\];',./\\`]$/;
    
    if (validKeys.test(e.key)) {
      // Ellenőrzés, hogy nincs-e már használatban
      const existingAction = Object.keys(shortcuts).find(
        action => shortcuts[action].toLowerCase() === e.key.toLowerCase() && action !== recordingAction
      );
      
      if (existingAction) {
        alert(`A(z) "${e.key.toUpperCase()}" billentyű már használatban van: ${existingAction}`);
        return;
      }
      
      // Új billentyű mentése
      shortcuts[recordingAction] = e.key.toUpperCase();
      saveShortcuts();
      stopRecording();
      updateUI();
      
      showNotification(`Gyorsbillentyű módosítva: ${e.key.toUpperCase()}`);
    } else if (e.key === 'Escape') {
      stopRecording();
    } else {
      alert('Érvénytelen billentyű. Használj betűket, számokat vagy alapvető írásjeleket.');
    }
  }

  // Alapértelmezett visszaállítása
  resetButton.addEventListener('click', function() {
    if (confirm('Biztosan visszaállítod az alapértelmezett gyorsbillentyűket?')) {
      shortcuts = { ...defaultShortcuts };
      saveShortcuts();
      updateUI();
      showNotification('Gyorsbillentyűk visszaállítva');
    }
  });

  // Értesítés megjelenítése
  function showNotification(message) {
    const notification = document.createElement('div');
    notification.textContent = message;
    notification.style.cssText = `
      position: fixed;
      top: 20px;
      right: 20px;
      background-color: #28a745;
      color: white;
      padding: 15px 20px;
      border-radius: 4px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      z-index: 1000;
    `;
    document.body.appendChild(notification);
    
    setTimeout(() => {
      notification.remove();
    }, 3000);
  }

  // Globális gyorsbillentyű kezelő (példa)
  document.addEventListener('keydown', (e) => {
    // Csak Ctrl/Cmd kombináció esetén
    if (!e.ctrlKey && !e.metaKey) return;
    
    // Input mezőkben ne működjön
    if (['INPUT', 'TEXTAREA', 'SELECT'].includes(e.target.tagName)) return;
    
    const key = e.key.toUpperCase();
    
    Object.keys(shortcuts).forEach(action => {
      if (shortcuts[action] === key) {
        e.preventDefault();
        console.log(`${action} művelet végrehajtva`);
        showNotification(`${action} aktiválva`);
      }
    });
  });

  // Kezdeti UI frissítés
  updateUI();
});
</script>

<script>
// ROSSZ: Globális gyorsbillentyű kontroll nélkül
document.addEventListener('keydown', (e) => {
  // Egyetlen karakter, módosító nélkül
  if (e.key === 'a') {
    e.preventDefault();
    alert('A gyorsbillentyű aktiválva');
    // Probléma: Megzavarja a normál gépelést
  }
  
  if (e.key === 's') {
    e.preventDefault();
    document.querySelector('form').submit();
    // Probléma: Nem lehet kikapcsolni vagy módosítani
  }
  
  if (e.key === '/') {
    e.preventDefault();
    document.querySelector('#search').focus();
    // Probléma: Ütközhet más alkalmazásokkal
  }
});

// ROSSZ: Még input mezőkben is aktiválódik
document.addEventListener('keypress', (e) => {
  if (e.key === 'd') {
    deleteCurrentItem(); // Veszélyes!
  }
});
</script>

<script>
// ROSSZ: Keménykódolt gyorsbillentyűk
const SHORTCUTS = {
  'j': 'nextItem',
  'k': 'previousItem',
  'l': 'likeItem',
  'r': 'replyItem',
  'x': 'deleteItem'
};

document.addEventListener('keydown', (e) => {
  if (SHORTCUTS[e.key]) {
    e.preventDefault();
    executeAction(SHORTCUTS[e.key]);
    // Probléma: Felhasználó nem tudja megváltoztatni
    // Probléma: Nem lehet kikapcsolni
    // Probléma: Ütközhet képernyőolvasókkal
  }
});

function executeAction(action) {
  // Művelet végrehajtása
  console.log(`Végrehajtva: ${action}`);
}
</script>

<div class="app-container">
  <input type="text" id="username" placeholder="Felhasználónév">
  <textarea id="message" placeholder="Írj üzenetet..."></textarea>
  <button id="send">Küldés</button>
</div>

<script>
// ROSSZ: Mindenhol aktiválódik, még szövegmezőkben is
document.addEventListener('keydown', (e) => {
  // Enter - küldés (probléma: többsoros szövegmezőben is)
  if (e.key === 'Enter') {
    e.preventDefault();
    document.getElementById('send').click();
  }
  
  // Escape - törlés (probléma: más dialógusokat is bezárhat)
  if (e.key === 'Escape') {
    e.preventDefault();
    clearAllFields();
  }
  
  // Betűk - gyorsműveletek (probléma: gépelés közben is)
  if (e.key === 'n') {
    e.preventDefault();
    createNewItem();
  }
});

function clearAllFields() {
  document.getElementById('username').value = '';
  document.getElementById('message').value = '';
}

function createNewItem() {
  console.log('Új elem létrehozva');
}
</script>

<script>
// ROSSZ: Gyakori képernyőolvasó parancsokkal ütköző billentyűk
document.addEventListener('keydown', (e) => {
  // H - képernyőolvasókban címsorokra ugrik
  if (e.key === 'h') {
    e.preventDefault();
    showHelp(); // Ütközik!
  }
  
  // K - NVDA-ban link lista
  if (e.key === 'k') {
    e.preventDefault();
    showKeyboardShortcuts(); // Ütközik!
  }
  
  // F - képernyőolvasókban űrlap mezőkre ugrik
  if (e.key === 'f') {
    e.preventDefault();
    focusSearchField(); // Ütközik!
  }
});
</script>

<!-- ROSSZ: Nincs információ a gyorsbillentyűkről -->
<div class="app">
  <h1>Alkalmazás</h1>
  <!-- Sehol sincs említve, hogy vannak gyorsbillentyűk -->
</div>

<script>
// ROSSZ: Rejtett gyorsbillentyűk
document.addEventListener('keydown', (e) => {
  // Felhasználó nem tudja, hogy ezek léteznek
  switch(e.key) {
    case '?':
      // Nincs jelezve, hogy létezik súgó
      showHiddenHelp();
      break;
    case 'g':
      // Nincs jelezve, hogy van gyors navigáció
      if (e.shiftKey) {
        goToTop();
      }
      break;
    case '.':
      // Nincs jelezve, hogy van beállítás menü
      openSettings();
      break;
  }
});

// Nincs UI elem, ami jelezné ezeket a funkciókat
</script>