fix: force focusing <a> elements in firefox

src/common/keyboard.js

@@ -56,3 +56,19 @@ function bindKeys() {
     caseSensitive: true,
   });
 }
+
+/**
+ * Note: This is only used in Firefox to work around the issue that <a> cannot be focused.
+ * Ref: https://stackoverflow.com/a/11713537/4238335
+ */
+export function handleTabNavigation(dir) {
+  const els = Array.from(document.querySelectorAll('[tabindex="0"],a[href],button,input,select,textarea'))
+  .filter(el => {
+    if (el.tabIndex < 0) return false;
+    const rect = el.getBoundingClientRect();
+    return rect.width > 0 && rect.height > 0;
+  });
+  let index = els.indexOf(document.activeElement);
+  index = (index + dir + els.length) % els.length;
+  els[index].focus();
+}

src/options/views/tab-installed.vue

@@ -158,7 +158,8 @@ import LocaleGroup from '#/common/ui/locale-group';
 import { forEachKey } from '#/common/object';
 import { setRoute, lastRoute } from '#/common/router';
 import storage from '#/common/storage';
-import { keyboardService } from '#/common/keyboard';
+import { keyboardService, handleTabNavigation } from '#/common/keyboard';
+import ua from '#/common/ua';
 import { loadData } from '#/options';
 import ScriptItem from './script-item';
 import Edit from './edit';
@@ -564,6 +565,14 @@ export default {
     }
     this.adjustScriptWidth();
     this.disposeList = [
+      ...ua.isFirefox ? [
+        keyboardService.register('tab', () => {
+          handleTabNavigation(1);
+        }),
+        keyboardService.register('s-tab', () => {
+          handleTabNavigation(-1);
+        }),
+      ] : [],
       ...registerHotkey(() => {
         this.$refs.search?.focus();
       }, [