Focus Indicator Style Enhancer

WHAT IT DOES

Focus Indicator Style Enhancer improves keyboard navigation visibility by applying customizable, high-contrast focus indicators to every focusable element on any webpage. When you tab through a page, the focused element is clearly highlighted with your chosen style—outline, glow, underline, or highlight—with configurable colors, widths, and optional animation. The script detects elements with missing or invisible focus indicators and adds them automatically. A floating toggle button lets you enable or disable enhanced indicators instantly. A mini preview shows your current focus style settings before applying them. Multiple color presets provide high-contrast options for accessibility compliance. Focus styles are persisted using GM_setValue, so your preferences are saved across sessions. The indicator works with dynamically added elements and supports keyboard shortcuts.

WHERE IT RUNS

This script runs on every website (matching all URLs), enhancing focus indicators across the entire web. It works on any page with interactive elements—forms, buttons, links, menus, and more—and adapts automatically to each page's structure.

HOW TO USE

After installing through the BotGentz extension, a floating toggle button (⌨️) appears in the corner of the page. Click it to enable the enhanced focus indicator. When you use the Tab key to navigate, the focused element will display your chosen focus style. Use the configuration panel to customize your experience: choose the focus style type (Outline, Glow, Underline, or Highlight), select a color scheme (High Contrast, Accessible Gold, Accessible Red, Accessible Green, Accessible Purple, or Custom), adjust the indicator width (1-8px), toggle animation on or off, enable or disable focus indicators, and enable or disable auto-apply on page load. The panel displays a live preview of your chosen style, shows the number of focusable elements on the page, and indicates whether the indicator is currently active. Use the "Toggle Focus Indicator" button to quickly enable or disable, "Apply to All Elements" to reapply the style to all focusable elements, or "Reset to Default" to restore all settings.

DOM-BASED FOCUS STYLE INJECTION WITH CSS CUSTOM PROPERTIES AND DYNAMIC ELEMENT DETECTION

This script implements a focus indicator enhancement engine using CSS injection and DOM mutation observation. The engine uses CSS custom properties (--bg-fi-color, --bg-fi-width) for dynamic styling. The style injection system generates CSS rules for the selected style type (outline, glow, underline, highlight) and applies them to all focusable elements via a class-based selector (.bg-fi-enhance:focus). The detection engine scans for focusable elements using a comprehensive selector list covering all interactive HTML elements and ARIA roles. The MutationObserver watches for DOM changes and reapplies styles to newly added focusable elements. The animation system uses CSS keyframes with pulse effects for both outline and glow styles. The persistence layer uses GM_setValue for all settings.

THE PANEL

The configuration panel is fully draggable and remembers its position per-site using GM_setValue. It snaps to screen edges when dragged near them, collapses to a compact bubble when minimized, and supports Escape key for quick collapse. All settings—including indicator visibility, style type, color scheme, width, animation, and auto-apply—are persisted across sessions.

PLEASE NOTE

This script requires the free BotGentz extension to run. The script runs on all websites and modifies focus styles on focusable elements. It does not capture, store, or transmit any personal information. All settings are stored locally using GM_setValue and never transmitted to external servers. The script enhances focus indicators for keyboard accessibility but does not modify the underlying functionality of focusable elements. Some websites may already have custom focus styles that may be overridden. This tool is provided for accessibility and informational purposes only.