You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
|[datagrid-needs-labelling](docs/rules/datagrid-needs-labelling.md)| Accessibility: DataGrid must have proper labelling and follow ARIA grid patterns for complex data tables | ✅ |||
187
188
|[dialogbody-needs-title-content-and-actions](docs/rules/dialogbody-needs-title-content-and-actions.md)| A DialogBody should have a header(DialogTitle), content(DialogContent), and footer(DialogActions) | ✅ |||
188
189
|[dialogsurface-needs-aria](docs/rules/dialogsurface-needs-aria.md)| DialogueSurface need accessible labelling: aria-describedby on DialogueSurface and aria-label or aria-labelledby(if DialogueTitle is missing) | ✅ |||
189
190
|[dropdown-needs-labelling](docs/rules/dropdown-needs-labelling.md)| Accessibility: Dropdown menu must have an id and it needs to be linked via htmlFor of a Label | ✅ |||
@@ -209,11 +210,13 @@ Any use of third-party trademarks or logos are subject to those third-party's po
|[spinner-needs-labelling](docs/rules/spinner-needs-labelling.md)| Accessibility: Spinner must have either aria-label or label, aria-live and aria-busy attributes | ✅ || 🔧 |
211
212
|[switch-needs-labelling](docs/rules/switch-needs-labelling.md)| Accessibility: Switch must have an accessible label | ✅ |||
213
+
|[table-needs-labelling](docs/rules/table-needs-labelling.md)| Accessibility: Table must have proper labelling and semantic structure for screen readers | ✅ |||
212
214
|[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. | ✅ |||
213
215
|[tag-dismissible-needs-labelling](docs/rules/tag-dismissible-needs-labelling.md)| This rule aims to ensure that dismissible Tag components have proper accessibility labelling: either aria-label on dismissIcon or aria-label on Tag with role on dismissIcon | ✅ |||
214
216
|[tag-needs-name](docs/rules/tag-needs-name.md)| Accessibility: Tag must have an accessible name | ✅ |||
215
217
|[toolbar-missing-aria](docs/rules/toolbar-missing-aria.md)| Accessibility: Toolbars need accessible labelling: aria-label or aria-labelledby | ✅ |||
216
218
|[tooltip-not-recommended](docs/rules/tooltip-not-recommended.md)| Accessibility: Prefer text content or aria over a tooltip for these components MenuItem, SpinButton | ✅ |||
219
+
|[tree-needs-labelling](docs/rules/tree-needs-labelling.md)| Accessibility: Tree must have proper labelling and follow ARIA tree pattern for hierarchical navigation | ✅ |||
217
220
|[visual-label-better-than-aria-suggestion](docs/rules/visual-label-better-than-aria-suggestion.md)| Visual label is better than an aria-label because sighted users can't read the aria-label text. || ✅ ||
# Accessibility: DataGrid must have proper labelling and follow ARIA grid patterns for complex data tables (`@microsoft/fluentui-jsx-a11y/datagrid-needs-labelling`)
2
+
3
+
💼 This rule is enabled in the ✅ `recommended` config.
4
+
5
+
<!-- end auto-generated rule header -->
6
+
7
+
DataGrid components must have accessible labelling for screen readers to understand the data structure and purpose.
8
+
9
+
## Rule Details
10
+
11
+
This rule enforces that DataGrid components have proper accessible names and follow ARIA grid patterns for complex data tables. DataGrids present tabular data that requires clear identification for assistive technology users.
12
+
13
+
DataGrids must have an accessible name provided through one of these methods:
14
+
-`aria-label` attribute with descriptive text
15
+
-`aria-labelledby` attribute referencing existing label elements
16
+
- Wrapping in a `Field` component that provides labeling context
// Best practice: Include row/column counts for large datasets
56
+
<DataGrid
57
+
aria-label="Financial data with 500 rows and 12 columns"
58
+
aria-rowcount={500}
59
+
aria-colcount={12}
60
+
columns={columns}
61
+
items={financialData}
62
+
/>
63
+
```
64
+
65
+
## Best Practices
66
+
67
+
1.**Descriptive Labels**: Use clear, descriptive labels that explain the data's purpose
68
+
2.**Data Context**: Include information about the data type (e.g., "Employee directory", "Sales report")
69
+
3.**Size Hints**: For large datasets, consider mentioning approximate size in the label
70
+
4.**Multiple Labels**: Use `aria-labelledby` to reference multiple elements for richer context
71
+
72
+
## When Not To Use
73
+
74
+
This rule should always be used for DataGrid components as they present complex tabular data that requires clear identification for screen reader users.
75
+
76
+
## Related Rules
77
+
78
+
-`table-needs-labelling` - Similar requirements for Table components
79
+
-`field-needs-labelling` - Field wrapper component labeling
# Accessibility: Table must have proper labelling and semantic structure for screen readers (`@microsoft/fluentui-jsx-a11y/table-needs-labelling`)
2
+
3
+
💼 This rule is enabled in the ✅ `recommended` config.
4
+
5
+
<!-- end auto-generated rule header -->
6
+
7
+
Table components must have accessible labelling for screen readers to understand the table's purpose and content structure.
8
+
9
+
## Rule Details
10
+
11
+
This rule enforces that Table components have proper accessible names following semantic HTML and ARIA best practices. Tables present structured data that requires clear identification for assistive technology users.
12
+
13
+
Tables must have an accessible name provided through one of these methods:
14
+
-`aria-label` attribute with descriptive text
15
+
-`aria-labelledby` attribute referencing existing label elements
16
+
-`<caption>` element providing semantic table description
17
+
- Wrapping in a `Field` component that provides labeling context
18
+
19
+
### Noncompliant
20
+
21
+
```jsx
22
+
// Missing any form of accessible labeling
23
+
<Table>
24
+
<TableHeader />
25
+
<TableBody />
26
+
</Table>
27
+
28
+
// Empty labels don't provide accessibility
29
+
<Table aria-label="">
30
+
<TableHeader />
31
+
<TableBody />
32
+
</Table>
33
+
34
+
// Invalid reference
35
+
<Table aria-labelledby="missing-id">
36
+
<TableHeader />
37
+
<TableBody />
38
+
</Table>
39
+
```
40
+
41
+
### Compliant
42
+
43
+
```jsx
44
+
// Using aria-label
45
+
<Table aria-label="Product inventory">
46
+
<TableHeader>
47
+
<TableRow>
48
+
<TableHeaderCell>Product</TableHeaderCell>
49
+
<TableHeaderCell>Stock</TableHeaderCell>
50
+
</TableRow>
51
+
</TableHeader>
52
+
<TableBody>
53
+
<TableRow>
54
+
<TableCell>Widget A</TableCell>
55
+
<TableCell>150</TableCell>
56
+
</TableRow>
57
+
</TableBody>
58
+
</Table>
59
+
60
+
// Using semantic caption element (preferred)
61
+
<Table>
62
+
<caption>Sales PerformanceQ32024</caption>
63
+
<TableHeader />
64
+
<TableBody />
65
+
</Table>
66
+
67
+
// Using aria-labelledby
68
+
<h2 id="table-title">Employee Directory</h2>
69
+
<Table aria-labelledby="table-title">
70
+
<TableHeader />
71
+
<TableBody />
72
+
</Table>
73
+
74
+
// Wrapped in Field component
75
+
<Field label="Financial Summary">
76
+
<Table>
77
+
<TableHeader />
78
+
<TableBody />
79
+
</Table>
80
+
</Field>
81
+
```
82
+
83
+
## Best Practices
84
+
85
+
1.**Prefer `<caption>`**: Use caption elements for semantic table labeling when possible
86
+
2.**Descriptive Labels**: Clearly describe the table's content and purpose
87
+
3.**Context Information**: Include relevant time periods, data scope, or categories
88
+
4.**Consistent Structure**: Ensure tables have proper TableHeader and TableBody elements
89
+
90
+
## When Not To Use
91
+
92
+
This rule should always be used for Table components as they present structured data that requires clear identification for screen reader users.
93
+
94
+
## Related Rules
95
+
96
+
-`datagrid-needs-labelling` - Similar requirements for DataGrid components
97
+
-`field-needs-labelling` - Field wrapper component labeling
# Accessibility: Tree must have proper labelling and follow ARIA tree pattern for hierarchical navigation (`@microsoft/fluentui-jsx-a11y/tree-needs-labelling`)
2
+
3
+
💼 This rule is enabled in the ✅ `recommended` config.
4
+
5
+
<!-- end auto-generated rule header -->
6
+
7
+
Tree components must have accessible labelling for screen readers to understand the hierarchical structure and navigation purpose.
8
+
9
+
## Rule Details
10
+
11
+
This rule enforces that Tree components have proper accessible names following ARIA tree pattern guidelines. Trees present hierarchical data that requires clear identification for assistive technology users to understand the navigation context.
12
+
13
+
Trees must have an accessible name provided through one of these methods:
14
+
-`aria-label` attribute with descriptive text
15
+
-`aria-labelledby` attribute referencing existing label elements
16
+
- Wrapping in a `Field` component that provides labeling context
17
+
18
+
### Noncompliant
19
+
20
+
```jsx
21
+
// Missing any form of accessible labeling
22
+
<Tree>
23
+
<TreeItem>Folder 1</TreeItem>
24
+
<TreeItem>Folder 2</TreeItem>
25
+
</Tree>
26
+
27
+
// Empty or whitespace-only labels
28
+
<Tree aria-label="">
29
+
<TreeItem>Item 1</TreeItem>
30
+
</Tree>
31
+
32
+
// Invalid aria-labelledby reference
33
+
<Tree aria-labelledby="non-existent-id">
34
+
<TreeItem>Item 1</TreeItem>
35
+
</Tree>
36
+
```
37
+
38
+
### Compliant
39
+
40
+
```jsx
41
+
// Using aria-label
42
+
<Tree aria-label="File explorer">
43
+
<TreeItem>
44
+
<TreeItemLayout>Documents</TreeItemLayout>
45
+
<Tree>
46
+
<TreeItem>Resume.pdf</TreeItem>
47
+
<TreeItem>Cover Letter.docx</TreeItem>
48
+
</Tree>
49
+
</TreeItem>
50
+
<TreeItem>Images</TreeItem>
51
+
</Tree>
52
+
53
+
// Using aria-labelledby
54
+
<h3 id="nav-tree">Site Navigation</h3>
55
+
<Tree aria-labelledby="nav-tree">
56
+
<TreeItem>Home</TreeItem>
57
+
<TreeItem>Products</TreeItem>
58
+
<TreeItem>Contact</TreeItem>
59
+
</Tree>
60
+
61
+
// Wrapped in Field component
62
+
<Field label="Organization Chart">
63
+
<Tree>
64
+
<TreeItem>CEO</TreeItem>
65
+
<TreeItem>VP Engineering</TreeItem>
66
+
</Tree>
67
+
</Field>
68
+
69
+
// Complex labeling with instructions
70
+
<h3 id="tree-title">Project Files</h3>
71
+
<p id="tree-instructions">Use arrow keys to navigate, Enter to open</p>
1.**Context Description**: Clearly describe what the tree represents (file system, navigation, org chart)
82
+
2.**Navigation Hints**: Consider including keyboard navigation instructions in labels
83
+
3.**Scope Information**: Indicate the breadth or type of items in the tree
84
+
4.**Hierarchical Context**: Help users understand the tree's organizational purpose
85
+
86
+
## When Not To Use
87
+
88
+
This rule should always be used for Tree components as they present complex hierarchical navigation that requires clear identification for screen reader users.
89
+
90
+
## Related Rules
91
+
92
+
-`field-needs-labelling` - Field wrapper component labeling
0 commit comments