Prefer 'disabledFocusable' over 'disabled' when component has loading state to maintain keyboard navigation accessibility

[sidhsharma1992]

Add accessibility rule: prefer-disabledfocusable-over-disabled for loading states

Summary

Implements a new ESLint rule that encourages the use of disabledFocusable over disabled when FluentUI components are in loading states to maintain keyboard navigation accessibility.

Problem Statement

When components are disabled during loading states using the disabled prop, they are completely removed from the keyboard tab order (tabindex="-1"). This creates accessibility barriers for keyboard and screen reader users who cannot discover or navigate to these temporarily unavailable components.

Solution

This rule detects when components have both disabled and loading state props (e.g., loading, isLoading, pending) and suggests using disabledFocusable instead. The disabledFocusable prop maintains the component in the tab order while conveying the disabled state via aria-disabled="true".

Rule Details

• Rule Name: prefer-disabledfocusable-over-disabled
• Type: Suggestion (warns in recommended config)
• Fixable: Yes (automatic fixes available)
• Target Components: Button, ToggleButton, CompoundButton, MenuButton, SplitButton, Checkbox, Radio, Switch, Input, Textarea, Combobox, Dropdown, SpinButton, Slider, DatePicker, TimePicker, Link, Tab

Key Features

✅ Smart Detection: Identifies multiple loading state patterns (loading, isLoading, pending, isPending, busy, isBusy)
✅ Conflict Avoidance: Doesn't trigger when both props are already present
✅ Automatic Fixes: Preserves original prop values and expressions
✅ Comprehensive Testing: Covers all applicable components and edge cases
✅ Clear Documentation: Detailed examples and accessibility guidance