refactor(shortcut): Use declarative data attributes for keyboard shortcuts

Instead of having JavaScript code guess which elements exist on a page,
elements now declare their keyboard shortcuts via data-global-keyboard-shortcut
attribute. This makes it easier to add new shortcuts and follows Gitea's
existing patterns for data-global-init and data-global-click.

web_src/js/features/repo-shortcuts.test.ts

@@ -1,97 +1,34 @@
 // Copyright 2026 The Gitea Authors. All rights reserved.
 // SPDX-License-Identifier: MIT
 
-import {initRepoShortcuts} from './repo-shortcuts.ts';
+import {initRepoCodeSearchShortcut} from './repo-shortcuts.ts';
 
-describe('Repository Keyboard Shortcuts', () => {
-  let fileSearchInput: HTMLInputElement;
+describe('Repository Code Search Shortcut Hint', () => {
   let codeSearchInput: HTMLInputElement;
   let codeSearchHint: HTMLElement;
 
   beforeEach(() => {
-    // Set up DOM structure
+    // Set up DOM structure for code search
     document.body.innerHTML = `
-      <div class="repo-file-search-container">
-        <div class="repo-file-search-input-wrapper">
-          <input type="text" placeholder="Go to file">
-          <kbd class="repo-search-shortcut-hint">T</kbd>
-        </div>
-      </div>
       <div class="repo-home-sidebar-top">
         <div class="repo-code-search-input-wrapper">
-          <input name="q" class="code-search-input" placeholder="Search code">
+          <input name="q" class="code-search-input" placeholder="Search code" data-global-keyboard-shortcut="s" data-global-init="initRepoCodeSearchShortcut">
           <kbd class="repo-search-shortcut-hint">S</kbd>
         </div>
       </div>
     `;
 
-    fileSearchInput = document.querySelector('.repo-file-search-container input')!;
     codeSearchInput = document.querySelector('.code-search-input')!;
     codeSearchHint = document.querySelector('.repo-code-search-input-wrapper .repo-search-shortcut-hint')!;
 
-    initRepoShortcuts();
+    // Initialize the shortcut hint functionality directly
+    initRepoCodeSearchShortcut(codeSearchInput);
   });
 
   afterEach(() => {
     document.body.innerHTML = '';
   });
 
-  test('T key focuses file search input', () => {
-    const event = new KeyboardEvent('keydown', {key: 't', bubbles: true});
-    document.dispatchEvent(event);
-
-    expect(document.activeElement).toBe(fileSearchInput);
-  });
-
-  test('Shift+T (uppercase T) focuses file search input', () => {
-    const event = new KeyboardEvent('keydown', {key: 'T', bubbles: true});
-    document.dispatchEvent(event);
-
-    expect(document.activeElement).toBe(fileSearchInput);
-  });
-
-  test('S key focuses code search input', () => {
-    const event = new KeyboardEvent('keydown', {key: 's', bubbles: true});
-    document.dispatchEvent(event);
-
-    expect(document.activeElement).toBe(codeSearchInput);
-  });
-
-  test('Shortcuts do not trigger when typing in input', () => {
-    // Focus on an input field first
-    const otherInput = document.createElement('input');
-    document.body.append(otherInput);
-    otherInput.focus();
-
-    const event = new KeyboardEvent('keydown', {key: 't', bubbles: true});
-    Object.defineProperty(event, 'target', {value: otherInput});
-    document.dispatchEvent(event);
-
-    // File search should not be focused because we're already in an input
-    expect(document.activeElement).toBe(otherInput);
-  });
-
-  test('Shortcuts do not trigger with Ctrl modifier', () => {
-    const event = new KeyboardEvent('keydown', {key: 't', ctrlKey: true, bubbles: true});
-    document.dispatchEvent(event);
-
-    expect(document.activeElement).not.toBe(fileSearchInput);
-  });
-
-  test('Shortcuts do not trigger with Meta modifier', () => {
-    const event = new KeyboardEvent('keydown', {key: 's', metaKey: true, bubbles: true});
-    document.dispatchEvent(event);
-
-    expect(document.activeElement).not.toBe(codeSearchInput);
-  });
-
-  test('Shortcuts do not trigger with Alt modifier', () => {
-    const event = new KeyboardEvent('keydown', {key: 't', altKey: true, bubbles: true});
-    document.dispatchEvent(event);
-
-    expect(document.activeElement).not.toBe(fileSearchInput);
-  });
-
   test('Code search hint hides when input has value', () => {
     // Initially visible
     expect(codeSearchHint.style.display).toBe('');
@@ -118,16 +55,20 @@ describe('Repository Keyboard Shortcuts', () => {
     expect(codeSearchHint.style.display).toBe('');
   });
 
-  test('Escape key blurs code search input', () => {
-    // Focus the code search input first
+  test('Escape key clears and blurs code search input', () => {
+    // Set a value and focus the input
+    codeSearchInput.value = 'test';
+    codeSearchInput.dispatchEvent(new Event('input'));
     codeSearchInput.focus();
     expect(document.activeElement).toBe(codeSearchInput);
+    expect(codeSearchInput.value).toBe('test');
 
-    // Press Escape directly on the input (the input has its own keydown handler)
+    // Press Escape directly on the input
     const event = new KeyboardEvent('keydown', {key: 'Escape', bubbles: true});
     codeSearchInput.dispatchEvent(event);
 
-    // Should no longer be focused
+    // Value should be cleared and input should be blurred
+    expect(codeSearchInput.value).toBe('');
     expect(document.activeElement).not.toBe(codeSearchInput);
   });
 
@@ -149,4 +90,16 @@ describe('Repository Keyboard Shortcuts', () => {
     // Should be visible again
     expect(codeSearchHint.style.display).toBe('');
   });
+
+  test('Change event also updates hint visibility', () => {
+    // Initially visible
+    expect(codeSearchHint.style.display).toBe('');
+
+    // Set value via change event (e.g., browser autofill)
+    codeSearchInput.value = 'autofilled';
+    codeSearchInput.dispatchEvent(new Event('change'));
+
+    // Should be hidden
+    expect(codeSearchHint.style.display).toBe('none');
+  });
 });

web_src/js/features/repo-shortcuts.ts

@@ -1,76 +1,47 @@
 // Copyright 2026 The Gitea Authors. All rights reserved.
 // SPDX-License-Identifier: MIT
 
+import {registerGlobalInitFunc} from '../modules/observer.ts';
+
 /**
- * Initialize global keyboard shortcuts for repository pages.
- * - 'T' key: Focus the "Go to file" search input
- * - 'S' key: Focus the "Search code" input
- *
- * Shortcuts are disabled when the user is typing in an input field,
- * textarea, or contenteditable element.
+ * Initialize the code search input with shortcut hint visibility management.
+ * The shortcut hint is hidden when the input has a value or is focused.
+ * Pressing Escape clears the input and blurs it.
  */
-export function initRepoShortcuts(): void {
-  // Initialize keyboard shortcut listeners
-  document.addEventListener('keydown', (e: KeyboardEvent) => {
-    // Don't trigger shortcuts when typing in input fields
-    const target = e.target as HTMLElement;
-    if (target instanceof HTMLElement && target.matches('input, textarea, select, [contenteditable="true"]')) {
-      return;
-    }
+export function initRepoCodeSearchShortcut(el: HTMLInputElement): void {
+  const shortcutHint = el.parentElement?.querySelector<HTMLElement>('.repo-search-shortcut-hint');
+  if (!shortcutHint) return;
 
-    // Don't trigger shortcuts when modifier keys are pressed
-    if (e.ctrlKey || e.metaKey || e.altKey) {
-      return;
-    }
+  let isFocused = false;
 
-    if (e.key === 't' || e.key === 'T') {
-      const fileSearchInput = document.querySelector<HTMLInputElement>('.repo-file-search-container input');
-      if (fileSearchInput) {
-        e.preventDefault();
-        fileSearchInput.focus();
-      }
-    } else if (e.key === 's' || e.key === 'S') {
-      const codeSearchInput = document.querySelector<HTMLInputElement>('.repo-home-sidebar-top input[name="q"], .code-search-input');
-      if (codeSearchInput) {
-        e.preventDefault();
-        codeSearchInput.focus();
-      }
-    }
+  const updateHintVisibility = () => {
+    shortcutHint.style.display = (el.value || isFocused) ? 'none' : '';
+  };
+
+  // Check initial value (e.g., from browser autofill or back navigation)
+  updateHintVisibility();
+
+  el.addEventListener('input', updateHintVisibility);
+  el.addEventListener('change', updateHintVisibility);
+  el.addEventListener('focus', () => {
+    isFocused = true;
+    updateHintVisibility();
+  });
+  el.addEventListener('blur', () => {
+    isFocused = false;
+    updateHintVisibility();
   });
 
-  // Toggle shortcut hint visibility for code search input based on input value and focus state
-  const codeSearchInput = document.querySelector<HTMLInputElement>('.code-search-input');
-  if (codeSearchInput) {
-    const shortcutHint = codeSearchInput.parentElement?.querySelector<HTMLElement>('.repo-search-shortcut-hint');
-    if (shortcutHint) {
-      let isFocused = false;
-
-      const updateHintVisibility = () => {
-        shortcutHint.style.display = (codeSearchInput.value || isFocused) ? 'none' : '';
-      };
-
-      // Check initial value (e.g., from browser autofill or back navigation)
+  // Handle Escape key to clear and blur the code search input
+  el.addEventListener('keydown', (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      el.value = '';
       updateHintVisibility();
-
-      codeSearchInput.addEventListener('input', updateHintVisibility);
-      codeSearchInput.addEventListener('change', updateHintVisibility);
-      codeSearchInput.addEventListener('focus', () => {
-        isFocused = true;
-        updateHintVisibility();
-      });
-      codeSearchInput.addEventListener('blur', () => {
-        isFocused = false;
-        updateHintVisibility();
-      });
-
-      // Handle Escape key to clear and blur the code search input
-      codeSearchInput.addEventListener('keydown', (e: KeyboardEvent) => {
-        if (e.key === 'Escape') {
-          codeSearchInput.value = '';
-          updateHintVisibility();
-          codeSearchInput.blur();
-        }
-      });
+      el.blur();
     }
-  }
+  });
+}
+
+export function initRepoShortcuts(): void {
+  registerGlobalInitFunc('initRepoCodeSearchShortcut', initRepoCodeSearchShortcut);
 }