Keyboard Navigation Focus Ring Enhancer

WHAT IT DOES This script enhances keyboard navigation focus indicators by applying a highly visible, customizable focus ring to all focusable elements on the page—links, buttons, inputs, selects, textareas, and custom elements with tabindex. The focus ring remains visible even when you click (not just on keyboard navigation), with configurable color, size, style, glow effect, and animation (pulse, rotate, or breathe). A tab order numbering feature shows the sequential position of each focusable element, helping you understand the page's focus flow. Great for accessibility, low vision users, and anyone who wants clear focus indicators. WHERE IT RUNS The script works on any page with interactive elements—websites, web applications, forms, and any page with focusable controls. It scans for all focusable elements and applies the enhanced focus ring. The script works on any website regardless of framework. HOW TO USE After installation, the script automatically enhances focus indicators. A badge shows the count of focusable elements. Click the badge to open the panel. Customize: enable or disable the enhancement, show or hide the count badge, force focus visibility (even on click), show tab order numbers, enable glow effect, enable animation, choose ring color and size (1-10px), select ring style (solid, dashed, dotted), set glow color and size, choose animation type (pulse, rotate, breathe), set tab order number color, and choose badge position. Click "Refresh Focus Rings" to re-apply after dynamic content changes. Settings are saved and persist across sessions. TECHNICAL MECHANISM The script uses a multi-stage focus ring enhancement pipeline. First, it scans the DOM for focusable elements using a comprehensive selector list (a[href], button, input, select, textarea, [tabindex], details summary, iframe, area[href], [contenteditable]). Second, for each element, it creates a `` positioned absolutely over the element with a border matching the configured ring color, size, and style. Third, it adds glow effects using CSS `box-shadow` with the configured glow color and size. Fourth, it applies CSS animations (pulse, rotate, breathe) using keyframes. Fifth, it adds tab order numbers as positioned labels when enabled. Sixth, it attaches focus/blur events to show/hide the ring, and scroll/resize events to update the ring's position. Seventh, it overrides default focus outlines by setting `outline: none` on enhanced elements. The script uses a MutationObserver for dynamically added elements and a focusin listener for position updates. THE PANEL The settings panel is fully draggable and can be positioned anywhere on your screen. It automatically snaps to the nearest edge when released, keeping your workspace organized. The panel can be collapsed to a small bubble showing only a gear icon, and restored with a single click. Its position is remembered across page reloads using GM_setValue. The panel also responds to the Escape key, which instantly hides it until you click the bubble again. All settings are saved immediately when changed and persist across browser sessions. PLEASE NOTE This script requires the free BotGentz extension to run. The focus ring overrides default browser focus indicators and may affect the visual appearance of interactive elements. The script does not access, store, or transmit any personal data or browsing history. All processing happens locally in your browser and never leaves your device.