VS Code Extension to automatically fix and increment tabIndex and startTabIndex in HTML files.Designed for forms and dynamic components, it respects -1 values, handles paired fields, and adds configurable jumps for dynamic sections. Fully customizable via settings for team-specific needs.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
A VS Code extension to automatically fix and increment tabIndex or your custom attributes in HTML files. Designed for forms and dynamic components, it respects -1 values, handles paired fields, and offers configurable jumps for dynamic sections. Fully customizable via settings to meet team-specific needs.
Features
Automatic Fixing: Increments tabIndex values sequentially while preserving -1 values.
Custom Attributes: Supports custom index attributes via a dedicated command.
Preview Mode: Shows a diff preview before applying changes.
Team Customization: Adjustable settings for tailored workflows.
Installation
Install TabIndexFixer through the VS Code Marketplace.
Usage
Open a file in VS Code.
Open the Command Palette with Ctrl+Shift+P (or Cmd+Shift+P on macOS).
Select one of the following commands:
Fix TabIndex 🔢: Automatically fixes and increments tabIndex values with a preview.
Force Fix TabIndex 🔢: Applies fixes without prompting for preview (use with caution).
Fix Custom Index Attribute 🔢: Allows you to specify a custom attribute name (e.g., data-index) and fix its values.
Add TabIndex Disable to Specific Tags 🚫: Adds tabindex="-1" to specific HTML tags (like input) to disable tab navigation for those elements. Perfect for custom dropdowns and components that should be skipped during tab navigation.
Add TabIndex to Missing Tags 🔢: Adds tabIndex attributes to specific HTML tags that don't have them yet. Perfect for ensuring all interactive elements (like input, button, select, textarea, a, area) have proper tab navigation order.
Review the diff preview (if applicable) and choose to Apply Changes or Cancel.
Example Workflow
Basic TabIndex Fixing
Open an HTML file with <input tabIndex="1"> and <input tabIndex="2">.
Run Fix TabIndex to see a preview with incremented values (e.g., tabIndex="1", tabIndex="2", etc.).
Apply changes to update the original file.
Disabling Tab Navigation for Specific Tags
Open an HTML file with custom dropdown components like <input> or <button>.
Run Add TabIndex Disable to Specific Tags and specify the tag names.
The extension will add tabindex="-1" after existing tabIndex attributes to disable tab navigation for those elements.
Perfect for custom components that should be skipped during keyboard navigation.
Adding TabIndex to Missing Tags
Open an HTML file with interactive elements that don't have tabIndex attributes.
Run Add TabIndex to Missing Tags and specify the tag names (default: input,button,select,textarea,a,area).
Enter a start index for the tab order (default: 1).
The extension will add sequential tabIndex values to elements that don't have them yet.
Perfect for ensuring proper keyboard navigation order in forms and interactive elements.
