Skip to content

Commit 2967eda

Browse files
aubreyquinnaubreyquinn
committed
updating rule docs
1 parent b910be3 commit 2967eda

29 files changed

+86
-27
lines changed

‎docs/rules/accordion-header-needs-labelling-v9.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# The accordion header is a button and it needs an accessibile name e.g. text content, aria-label, aria-labelledby (`@microsoft/fluentui-jsx-a11y/accordion-header-needs-labelling-v9`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
The ESLint rule is designed to enforce accessibility standards in React components, specifically ensuring an accordion header is accessible to screen reader users.

‎docs/rules/accordion-item-needs-header-and-panel-v9.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# An AccordionItem needs exactly one header and one panel (`@microsoft/fluentui-jsx-a11y/accordion-item-needs-header-and-panel-v9`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
The ESLint rule is designed to enforce accessibility standards in React components, specifically ensuring an accordion component has one button (as a header) which controls one panel region.
@@ -58,4 +60,3 @@ Examples of **correct** code for this rule:
5860
## Further Reading
5961

6062
[ARIA Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/)
61-

‎docs/rules/avatar-needs-name-v9.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Accessibility: Avatar must have an accessible labelling: name, aria-label, aria-labelledby (`@microsoft/fluentui-jsx-a11y/avatar-needs-name-v9`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
All interactive elements must have an accessible name.

‎docs/rules/breadcrumb-needs-labelling-v9.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# All interactive elements must have an accessible name (`@microsoft/fluentui-jsx-a11y/breadcrumb-needs-labelling-v9`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
Provide labels to identify all form controls, including text fields, checkboxes, radio buttons, and drop-down menus. In most cases, this is done by using the label element.
@@ -31,10 +33,10 @@ Examples of **correct** code for this rule:
3133
```jsx
3234
<Breadcrumb aria-label="Breadcrumb default example">
3335
```
36+
3437
```jsx
3538
<div>
3639
<label id="my-label">Breadcrumb default example<label>
3740
<Breadcrumb aria-labelledby="my-label"><BreadCrumb>
3841
</div>
3942
```
40-

‎docs/rules/checkbox-needs-labelling-v9.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Accessibility: Checkbox without label must have an accessible and visual label: aria-labelledby (`@microsoft/fluentui-jsx-a11y/checkbox-needs-labelling-v9`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
All interactive elements must have an accessible name.

‎docs/rules/combobox-needs-labelling-v9.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# All interactive elements must have an accessible name (`@microsoft/fluentui-jsx-a11y/combobox-needs-labelling-v9`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
Provide labels to identify all form controls, including text fields, checkboxes, radio buttons, and drop-down menus. In most cases, this is done by using the label element.

‎docs/rules/compound-button-needs-labelling-v9.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Accessibility: Compound buttons must have accessible labelling: title, aria-label, aria-labelledby, aria-describedby (`@microsoft/fluentui-jsx-a11y/compound-button-needs-labelling-v9`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
All interactive elements must have an accessible name.

‎docs/rules/dropdown-needs-labelling-v9.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Accessibility: Dropdown menu must have an id and it needs to be linked via htmlFor of a Label (`@microsoft/fluentui-jsx-a11y/dropdown-needs-labelling-v9`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
Accessibility: Dropdown menu must have a visual label and it needs to be linked via htmlFor aria-labelledby of Label Or Dropdown mush have aria-label

‎docs/rules/icon-text-content-button-does-not-need-aria.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Accessibility: an image button with text content does not need aria labelling. The button already has an accessible name and the aria-label or aria-labelledby will override the text content for screen reader users (`@microsoft/fluentui-jsx-a11y/icon-text-content-button-does-not-need-aria`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
Accessibility: an image button with content prop does not need aria labelling. The button already has an accessible name and the aria-label or aria-labelledby will override the text content for screen reader users.

‎docs/rules/image-button-missing-aria-v9.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Accessibility: Image buttons must have accessible labelling: title, aria-label, aria-labelledby, aria-describedby (`@microsoft/fluentui-jsx-a11y/image-button-missing-aria-v9`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
All interactive elements must have an accessible name.

‎docs/rules/image-button-missing-aria.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Accessibility: Image buttons must have accessible labelling: aria-label, aria-labelledby, aria-describedby (`@microsoft/fluentui-jsx-a11y/image-button-missing-aria`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
All interactive elements must have an accessible name.

‎docs/rules/image-button-prefer-aria-over-title-attribute.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Accessibility: prefer wai-aria over title or placeholder attributes. Title/placeholder can be used in addition to wai-aria. aria-label, aria-labelledby, aria-describedby (`@microsoft/fluentui-jsx-a11y/image-button-prefer-aria-over-title-attribute`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
Image buttons must have accessible labelling: aria-label

‎docs/rules/image-link-missing-aria-v9.md

+6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# Accessibility: Image links must have an accessible name (`@microsoft/fluentui-jsx-a11y/image-link-missing-aria-v9`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
5+
🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
6+
7+
<!-- end auto-generated rule header -->
8+
39
🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
410

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

‎docs/rules/input-missing-label-v9.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Accessibility: Input fields must have accessible labelling: aria-label, aria-labelledby or an associated label (`@microsoft/fluentui-jsx-a11y/input-missing-label-v9`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
All interactive elements must have an accessible name.

‎docs/rules/menu-item-needs-labelling-v9.md

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Accessibility: MenuItem without label must have an accessible and visual label: aria-labelledby (`@microsoft/fluentui-jsx-a11y/menu-item-needs-labelling-v9`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
Accessibility: MenuItem must have a visual label and it needs to be linked via aria-labelledby
@@ -32,9 +34,8 @@ Examples of **correct** code for this rule:
3234

3335
```jsx
3436
<>
35-
<label id="my-label">Settings</label>
36-
<MenuItem aria-labelledby="my-label" icon={<SettingsIcon />} onClick={handleClick}>
37-
</MenuItem>
38-
<MenuItem>Settings</MenuItem>
37+
<label id="my-label">Settings</label>
38+
<MenuItem aria-labelledby="my-label" icon={<SettingsIcon />} onClick={handleClick}></MenuItem>
39+
<MenuItem>Settings</MenuItem>
3940
</>
4041
```

‎docs/rules/no-empty-buttons-v9.md

+8-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Accessibility: Button, ToggleButton, SplitButton, MenuButton, CompoundButton must either text content or icon or child component (`@microsoft/fluentui-jsx-a11y/no-empty-buttons-v9`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
Buttons must either have text, content or accessible labelling
@@ -13,11 +15,11 @@ This rule aims to make a button to have something to generate an aria-label.
1315
Examples of **incorrect** code for this rule:
1416

1517
```jsx
16-
<Button></Button>
18+
<Button></Button>
1719
```
1820

1921
```jsx
20-
<Button />
22+
<Button />
2123
```
2224

2325
```jsx
@@ -28,19 +30,20 @@ Examples of **incorrect** code for this rule:
2830
<Button aria-label="Toggle Example"></Button>
2931
```
3032

31-
32-
3333
Examples of **correct** code for this rule:
3434

3535
```jsx
3636
<Button>Example</Button>
3737
```
38+
3839
```jsx
3940
<Button title="Toggle Example">Example</Button>
40-
```
41+
```
42+
4143
```jsx
4244
<Button icon={<CloseIcon />} aria-label="Close" />
4345
```
46+
4447
```jsx
4548
<Button icon={<CloseIcon />}>Button</Button>
4649
```

‎docs/rules/no-empty-buttons.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Accessibility: buttons must either text content or accessible labelling (`@microsoft/fluentui-jsx-a11y/no-empty-buttons`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
Buttons must either have text, content or accessible labelling

‎docs/rules/no-empty-components-v9.md

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# FluentUI components should not be empty (`@microsoft/fluentui-jsx-a11y/no-empty-components-v9`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
Provide labels to identify all form controls, including text fields, checkboxes, radio buttons, and drop-down menus. In most cases, this is done by using the label element.
@@ -39,5 +41,9 @@ Examples of **correct** code for this rule:
3941
```
4042
4143
```jsx
42-
<Breadcrumb><BreadcrumbItem><BreadcrumbButton>Item 1</BreadcrumbButton></BreadcrumbItem></Breadcrumb>
44+
<Breadcrumb>
45+
<BreadcrumbItem>
46+
<BreadcrumbButton>Item 1</BreadcrumbButton>
47+
</BreadcrumbItem>
48+
</Breadcrumb>
4349
```

‎docs/rules/object-literal-button-no-missing-aria.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Accessibility: Object literal image buttons must have accessible labelling: aria-label, aria-labelledby, aria-describedby (`@microsoft/fluentui-jsx-a11y/object-literal-button-no-missing-aria`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
A button with text content does not need aria labelling. The button already has an accessible name and the aria-label will override the text content for screen reader users.

‎docs/rules/prefer-aria-over-title-attribute-v9.md

+6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# 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 (`@microsoft/fluentui-jsx-a11y/prefer-aria-over-title-attribute-v9`)
22

3+
⚠️ This rule _warns_ in the ✅ `recommended` config.
4+
5+
🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
6+
7+
<!-- end auto-generated rule header -->
8+
39
🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
410

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

‎docs/rules/radio-button-missing-label-v9.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Accessibility: Radio button without label must have an accessible and visual label: aria-labelledby (`@microsoft/fluentui-jsx-a11y/radio-button-missing-label-v9`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
All interactive elements must have an accessible name.

‎docs/rules/radiogroup-missing-label-v9.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Accessibility: RadioGroup without label must have an accessible and visual label: aria-labelledby (`@microsoft/fluentui-jsx-a11y/radiogroup-missing-label-v9`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
All interactive elements must have an accessible name.

‎docs/rules/spin-button-needs-labelling-v9.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Accessibility: SpinButtons must have an accessible label (`@microsoft/fluentui-jsx-a11y/spin-button-needs-labelling-v9`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
All interactive elements must have an accessible name.

‎docs/rules/spin-button-unrecommended-labelling-v9.md

+4-12
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Accessibility: Unrecommended accessibility labelling - SpinButton (`@microsoft/fluentui-jsx-a11y/spin-button-unrecommended-labelling-v9`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
All interactive elements must have an accessible name.
@@ -10,7 +12,6 @@ Using aria-label or wrapping the SpinButton in a Tooltip component is not recomm
1012

1113
<https://www.w3.org/TR/html-aria/>
1214

13-
1415
## Rule Details
1516

1617
This rule aims to...
@@ -22,13 +23,8 @@ Examples of **unrecommended** code for this rule:
2223
```
2324

2425
```jsx
25-
2626
<Tooltip content="Spin Button label" relationship="label">
27-
<SpinButton
28-
defaultValue={10}
29-
min={0}
30-
max={20}
31-
/>
27+
<SpinButton defaultValue={10} min={0} max={20} />
3228
</Tooltip>
3329
```
3430

@@ -38,11 +34,7 @@ Examples of **correct** code for this rule:
3834
<Label>
3935
Default SpinButton
4036
<SomethingNesting>
41-
<SpinButton
42-
defaultValue={10}
43-
min={0}
44-
max={20}
45-
/>
37+
<SpinButton defaultValue={10} min={0} max={20} />
4638
</SomethingNesting>
4739
</Label>
4840
```

‎docs/rules/switch-needs-labelling-v9.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Accessibility: Switch must have an accessible label (`@microsoft/fluentui-jsx-a11y/switch-needs-labelling-v9`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
All interactive elements must have an accessible name.

‎docs/rules/text-area-missing-label-v9.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Accessibility: Textarea must have an accessible name (`@microsoft/fluentui-jsx-a11y/text-area-missing-label-v9`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
## Rule Details

‎docs/rules/text-content-button-does-not-need-aria.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Accessibility: a button with text content does not need aria labelling. The button already has an accessible name and the aria-label will override the text content for screen reader users (`@microsoft/fluentui-jsx-a11y/text-content-button-does-not-need-aria`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
Object literal image buttons must have accessible labelling: aria-label

‎docs/rules/toolbar-missing-aria-v9.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Accessibility: Toolbars need accessible labelling: aria-label or aria-labelledby (`@microsoft/fluentui-jsx-a11y/toolbar-missing-aria-v9`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
<!-- end auto-generated rule header -->
@@ -32,4 +34,3 @@ Examples of **correct** code for this rule:
3234
<ToolbarToggleButton appearance="subtle" aria-label="Bold" icon={<TextBold24Regular />} name="textOptions" value="bold" />
3335
</Toolbar>
3436
```
35-

‎docs/rules/tooltip-not-recommended-v9.md

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Accessibility: Prefer text content or aria over a tooltip for these components MenuItem, SpinButton (`@microsoft/fluentui-jsx-a11y/tooltip-not-recommended-v9`)
22

3+
💼 This rule is enabled in the ✅ `recommended` config.
4+
35
<!-- end auto-generated rule header -->
46

57
All interactive elements must have an accessible name.
@@ -18,13 +20,13 @@ Examples of **incorrect** code for this rule:
1820

1921
```jsx
2022
<Tooltip content="menu item" relationship="label">
21-
<MenuItem/>
23+
<MenuItem />
2224
</Tooltip>
2325
```
2426

2527
```jsx
2628
<Tooltip content="menu item" relationship="label">
27-
<SpinButton/>
29+
<SpinButton />
2830
</Tooltip>
2931
```
3032

@@ -36,6 +38,7 @@ Examples of **correct** code for this rule:
3638
<MenuItem aria-labelledby="my-label"/>
3739
</div>
3840
```
41+
3942
```jsx
4043
<div>
4144
<label id="my-label">More option<label>

0 commit comments

Comments
 (0)