Skip to content

Auto fix capabilities for multiple high value rules Accessibility Rules #167

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Auto fix capabilities for multiple high value rules Accessibility Rules #167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
24dd3de
Implement Auto-fix capabilities for multiple high-value rules
sidhsharma1992 Sep 22, 2025
c4bcf79
Update docs and rules.
sidhsharma1992 Sep 22, 2025
3f6cae7
Add tests.
sidhsharma1992 Sep 22, 2025
7808ba6
Merge branch 'main' into users/sidhshar/auto-fix-capabilities-for-mul…
aubreyquinn Sep 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ Any use of third-party trademarks or logos are subject to those third-party's po
| [avoid-using-aria-describedby-for-primary-labelling](docs/rules/avoid-using-aria-describedby-for-primary-labelling.md) | aria-describedby provides additional context and is not meant for primary labeling. | ✅ | | |
| [badge-needs-accessible-name](docs/rules/badge-needs-accessible-name.md) | | ✅ | | 🔧 |
| [breadcrumb-needs-labelling](docs/rules/breadcrumb-needs-labelling.md) | All interactive elements must have an accessible name | ✅ | | |
| [card-needs-accessible-name](docs/rules/card-needs-accessible-name.md) | Accessibility: Interactive Card must have an accessible name via aria-label, aria-labelledby, etc. | ✅ | | |
| [card-needs-accessible-name](docs/rules/card-needs-accessible-name.md) | Accessibility: Interactive Card must have an accessible name via aria-label, aria-labelledby, etc. | ✅ | | 🔧 |
| [checkbox-needs-labelling](docs/rules/checkbox-needs-labelling.md) | Accessibility: Checkbox without label must have an accessible and visual label: aria-labelledby | ✅ | | |
| [colorswatch-needs-labelling](docs/rules/colorswatch-needs-labelling.md) | Accessibility: ColorSwatch must have an accessible name via aria-label, Tooltip, aria-labelledby, etc.. | ✅ | | |
| [combobox-needs-labelling](docs/rules/combobox-needs-labelling.md) | All interactive elements must have an accessible name | ✅ | | |
Expand All @@ -191,24 +191,24 @@ Any use of third-party trademarks or logos are subject to those third-party's po
| [emptyswatch-needs-labelling](docs/rules/emptyswatch-needs-labelling.md) | Accessibility: EmptySwatch must have an accessible name via aria-label, Tooltip, aria-labelledby, etc.. | ✅ | | |
| [field-needs-labelling](docs/rules/field-needs-labelling.md) | Accessibility: Field must have label | ✅ | | |
| [image-button-missing-aria](docs/rules/image-button-missing-aria.md) | Accessibility: Image buttons must have accessible labelling: title, aria-label, aria-labelledby, aria-describedby | ✅ | | |
| [image-needs-alt](docs/rules/image-needs-alt.md) | Accessibility: Image must have alt attribute with a meaningful description of the image. If the image is decorative, use alt="". | ✅ | | |
| [image-needs-alt](docs/rules/image-needs-alt.md) | Accessibility: Image must have alt attribute with a meaningful description of the image. If the image is decorative, use alt="". | ✅ | | 🔧 |
| [imageswatch-needs-labelling](docs/rules/imageswatch-needs-labelling.md) | Accessibility: ImageSwatch must have an accessible name via aria-label, Tooltip, aria-labelledby, etc.. | ✅ | | |
| [infolabel-needs-labelling](docs/rules/infolabel-needs-labelling.md) | Accessibility: InfoLabel must have an accessible name via aria-label, text content, aria-labelledby, etc. | ✅ | | |
| [infolabel-needs-labelling](docs/rules/infolabel-needs-labelling.md) | Accessibility: InfoLabel must have an accessible name via aria-label, text content, aria-labelledby, etc. | ✅ | | 🔧 |
| [input-components-require-accessible-name](docs/rules/input-components-require-accessible-name.md) | Accessibility: Input fields must have accessible labelling: aria-label, aria-labelledby or an associated label | ✅ | | |
| [link-missing-labelling](docs/rules/link-missing-labelling.md) | Accessibility: Image links must have an accessible name. Add either text content, labelling to the image or labelling to the link itself. | ✅ | | 🔧 |
| [menu-button-needs-labelling](docs/rules/menu-button-needs-labelling.md) | Accessibility: MenuButton must have an accessible name via aria-label, text content, aria-labelledby, etc. | ✅ | | |
| [menu-button-needs-labelling](docs/rules/menu-button-needs-labelling.md) | Accessibility: MenuButton must have an accessible name via aria-label, text content, aria-labelledby, etc. | ✅ | | 🔧 |
| [menu-item-needs-labelling](docs/rules/menu-item-needs-labelling.md) | Accessibility: MenuItem without label must have an accessible and visual label: aria-labelledby | ✅ | | |
| [no-empty-buttons](docs/rules/no-empty-buttons.md) | Accessibility: Button, ToggleButton, SplitButton, MenuButton, CompoundButton must either text content or icon or child component | ✅ | | |
| [no-empty-components](docs/rules/no-empty-components.md) | FluentUI components should not be empty | ✅ | | |
| [prefer-aria-over-title-attribute](docs/rules/prefer-aria-over-title-attribute.md) | The title attribute is not consistently read by screen readers, and its behavior can vary depending on the screen reader and the user's settings. | | ✅ | 🔧 |
| [prefer-disabledfocusable-over-disabled](docs/rules/prefer-disabledfocusable-over-disabled.md) | Prefer 'disabledFocusable' over 'disabled' when component has loading state to maintain keyboard navigation accessibility | | ✅ | 🔧 |
| [progressbar-needs-labelling](docs/rules/progressbar-needs-labelling.md) | Accessibility: Progressbar must have aria-valuemin, aria-valuemax, aria-valuenow, aria-describedby and either aria-label or aria-labelledby attributes | ✅ | | |
| [progressbar-needs-labelling](docs/rules/progressbar-needs-labelling.md) | Accessibility: Progressbar must have aria-valuemin, aria-valuemax, aria-valuenow, aria-describedby and either aria-label or aria-labelledby attributes | ✅ | | 🔧 |
| [radio-button-missing-label](docs/rules/radio-button-missing-label.md) | Accessibility: Radio button without label must have an accessible and visual label: aria-labelledby | ✅ | | |
| [radiogroup-missing-label](docs/rules/radiogroup-missing-label.md) | Accessibility: RadioGroup without label must have an accessible and visual label: aria-labelledby | ✅ | | |
| [rating-needs-name](docs/rules/rating-needs-name.md) | Accessibility: Ratings must have accessible labelling: name, aria-label, aria-labelledby or itemLabel which generates aria-label | ✅ | | |
| [spin-button-needs-labelling](docs/rules/spin-button-needs-labelling.md) | Accessibility: SpinButtons must have an accessible label | ✅ | | |
| [spin-button-unrecommended-labelling](docs/rules/spin-button-unrecommended-labelling.md) | Accessibility: Unrecommended accessibility labelling - SpinButton | ✅ | | |
| [spinner-needs-labelling](docs/rules/spinner-needs-labelling.md) | Accessibility: Spinner must have either aria-label or label, aria-live and aria-busy attributes | ✅ | | |
| [spinner-needs-labelling](docs/rules/spinner-needs-labelling.md) | Accessibility: Spinner must have either aria-label or label, aria-live and aria-busy attributes | ✅ | | 🔧 |
| [switch-needs-labelling](docs/rules/switch-needs-labelling.md) | Accessibility: Switch must have an accessible label | ✅ | | |
| [table-needs-labelling](docs/rules/table-needs-labelling.md) | Accessibility: Table must have proper labelling and semantic structure for screen readers | ✅ | | |
| [tablist-and-tabs-need-labelling](docs/rules/tablist-and-tabs-need-labelling.md) | This rule aims to ensure that Tabs with icons but no text labels have an accessible name and that Tablist is properly labeled. | ✅ | | |
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/card-needs-accessible-name.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

💼 This rule is enabled in the ✅ `recommended` config.

🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).

<!-- end auto-generated rule header -->

Interactive Card components must have an accessible name for screen readers.
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/image-needs-alt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

💼 This rule is enabled in the ✅ `recommended` config.

🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).

<!-- end auto-generated rule header -->

## Rule details
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/infolabel-needs-labelling.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

💼 This rule is enabled in the ✅ `recommended` config.

🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).

<!-- end auto-generated rule header -->

InfoLabel components must have accessible labelling for screen readers.
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/menu-button-needs-labelling.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

💼 This rule is enabled in the ✅ `recommended` config.

🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).

<!-- end auto-generated rule header -->

MenuButton components must have accessible labelling for screen readers.
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/progressbar-needs-labelling.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

💼 This rule is enabled in the ✅ `recommended` config.

🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).

<!-- end auto-generated rule header -->

ProgressBar must have `max` or `aria-valuemin`, `aria-valuemax` and `aria-valuenow` attributes. It also must have an accessible `Field` parent or appropriate labelling using `aria-describedby` and `aria-label`/`aria-labelledby` .
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/spinner-needs-labelling.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

💼 This rule is enabled in the ✅ `recommended` config.

🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).

<!-- end auto-generated rule header -->

Spinner must have either aria-label or label, aria-live and aria-busy attributes.
Expand Down
6 changes: 5 additions & 1 deletion lib/rules/buttons/menu-button-needs-labelling.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ export default ESLintUtils.RuleCreator.withoutDocs(
allowTooltipParent: true,
allowDescribedBy: false,
allowLabeledChild: true,
allowTextContentChild: true
allowTextContentChild: true,
autoFix: {
strategy: "aria-label-suggestion",
suggestedLabel: "Open menu"
}
})
);
6 changes: 5 additions & 1 deletion lib/rules/card-needs-accessible-name.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ export default ESLintUtils.RuleCreator.withoutDocs(
allowTooltipParent: true,
allowDescribedBy: false,
allowLabeledChild: true,
allowTextContentChild: true
allowTextContentChild: true,
autoFix: {
strategy: "aria-label-suggestion",
suggestedLabel: "Card"
}
})
);
7 changes: 6 additions & 1 deletion lib/rules/image-needs-alt.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,12 @@ const rule = ESLintUtils.RuleCreator.withoutDocs(
allowWrappingLabel: false,
allowTooltipParent: false,
allowDescribedBy: false,
allowLabeledChild: false
allowLabeledChild: false,
autoFix: {
strategy: "add-required-prop",
propName: "alt",
propValue: '""'
}
})
);

Expand Down
6 changes: 5 additions & 1 deletion lib/rules/infolabel-needs-labelling.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ export default ESLintUtils.RuleCreator.withoutDocs(
allowTooltipParent: true,
allowDescribedBy: false,
allowLabeledChild: true,
allowTextContentChild: true
allowTextContentChild: true,
autoFix: {
strategy: "aria-label-suggestion",
suggestedLabel: "Info"
}
})
);
35 changes: 34 additions & 1 deletion lib/rules/progressbar-needs-labelling.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const rule = ESLintUtils.RuleCreator.withoutDocs({
recommended: "strict",
url: "https://www.w3.org/TR/html-aria/" // URL to the documentation page for this rule
},
fixable: "code",
schema: []
},
// create (function) returns an object with methods that ESLint calls to “visit” nodes while traversing the abstract syntax tree
Expand Down Expand Up @@ -69,7 +70,39 @@ const rule = ESLintUtils.RuleCreator.withoutDocs({
// if it has no visual labelling, report error
context.report({
node,
messageId: `noUnlabelledProgressbar`
messageId: `noUnlabelledProgressbar`,
fix(fixer) {
const fixes = [];

// Add aria-label if neither aria-label nor aria-labelledby exist (and no Field parent)
if (
!hasFieldParentCheck &&
!hasNonEmptyProp(node.attributes, "aria-label") &&
!hasNonEmptyProp(node.attributes, "aria-labelledby")
) {
fixes.push(fixer.insertTextAfter(node.name, ' aria-label="Progress"'));
}

// Add aria-describedby if missing
if (!hasNonEmptyProp(node.attributes, "aria-describedby")) {
fixes.push(fixer.insertTextAfter(node.name, ' aria-describedby=""'));
}

// Add missing ARIA value attributes if max prop is not present
if (!hasMaxProp) {
if (!hasNonEmptyProp(node.attributes, "aria-valuemin")) {
fixes.push(fixer.insertTextAfter(node.name, ' aria-valuemin="0"'));
}
if (!hasNonEmptyProp(node.attributes, "aria-valuemax")) {
fixes.push(fixer.insertTextAfter(node.name, ' aria-valuemax="100"'));
}
if (!hasNonEmptyProp(node.attributes, "aria-valuenow")) {
fixes.push(fixer.insertTextAfter(node.name, ' aria-valuenow="0"'));
}
}

return fixes;
}
});
}
};
Expand Down
23 changes: 22 additions & 1 deletion lib/rules/spinner-needs-labelling.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const rule = ESLintUtils.RuleCreator.withoutDocs({
recommended: "strict",
url: "https://www.w3.org/TR/html-aria/" // URL to the documentation page for this rule
},
fixable: "code",
schema: []
},
// create (function) returns an object with methods that ESLint calls to “visit” nodes while traversing the abstract syntax tree
Expand All @@ -48,7 +49,27 @@ const rule = ESLintUtils.RuleCreator.withoutDocs({
// if it has no visual labelling, report error
context.report({
node,
messageId: `noUnlabelledSpinner`
messageId: `noUnlabelledSpinner`,
fix(fixer) {
const fixes = [];

// Add missing aria-label if neither label nor aria-label exist
if (!hasNonEmptyProp(node.attributes, "label") && !hasNonEmptyProp(node.attributes, "aria-label")) {
fixes.push(fixer.insertTextAfter(node.name, ' aria-label="Loading"'));
}

// Add missing aria-live
if (!hasNonEmptyProp(node.attributes, "aria-live")) {
fixes.push(fixer.insertTextAfter(node.name, ' aria-live="polite"'));
}

// Add missing aria-busy
if (!hasNonEmptyProp(node.attributes, "aria-busy")) {
fixes.push(fixer.insertTextAfter(node.name, ' aria-busy="true"'));
}

return fixes;
}
});
}
};
Expand Down
Loading
Loading