updating rule docs

microsoft · Jul 19, 2024 · 2967eda · 2967eda
1 parent b910be3
commit 2967eda
Show file tree

Hide file tree

Showing 29 changed files with 86 additions and 27 deletions.
diff --git a/docs/rules/accordion-header-needs-labelling-v9.md b/docs/rules/accordion-header-needs-labelling-v9.md
@@ -1,5 +1,7 @@
 # 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`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 The ESLint rule is designed to enforce accessibility standards in React components, specifically ensuring an accordion header is accessible to screen reader users.

diff --git a/docs/rules/accordion-item-needs-header-and-panel-v9.md b/docs/rules/accordion-item-needs-header-and-panel-v9.md
@@ -1,5 +1,7 @@
 # An AccordionItem needs exactly one header and one panel (`@microsoft/fluentui-jsx-a11y/accordion-item-needs-header-and-panel-v9`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 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:
 ## Further Reading
 
 [ARIA Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/)
-
diff --git a/docs/rules/avatar-needs-name-v9.md b/docs/rules/avatar-needs-name-v9.md
@@ -1,5 +1,7 @@
 # Accessibility: Avatar must have an accessible labelling: name, aria-label, aria-labelledby (`@microsoft/fluentui-jsx-a11y/avatar-needs-name-v9`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 All interactive elements must have an accessible name.

diff --git a/docs/rules/breadcrumb-needs-labelling-v9.md b/docs/rules/breadcrumb-needs-labelling-v9.md
@@ -1,5 +1,7 @@
 # All interactive elements must have an accessible name (`@microsoft/fluentui-jsx-a11y/breadcrumb-needs-labelling-v9`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 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:
 ```jsx
 <Breadcrumb aria-label="Breadcrumb default example">
 ```
+
 ```jsx
 <div>
 <label id="my-label">Breadcrumb default example<label>
 <Breadcrumb aria-labelledby="my-label"><BreadCrumb>
 </div>
 ```
-
diff --git a/docs/rules/checkbox-needs-labelling-v9.md b/docs/rules/checkbox-needs-labelling-v9.md
@@ -1,5 +1,7 @@
 # Accessibility: Checkbox without label must have an accessible and visual label: aria-labelledby (`@microsoft/fluentui-jsx-a11y/checkbox-needs-labelling-v9`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 All interactive elements must have an accessible name.

diff --git a/docs/rules/combobox-needs-labelling-v9.md b/docs/rules/combobox-needs-labelling-v9.md
@@ -1,5 +1,7 @@
 # All interactive elements must have an accessible name (`@microsoft/fluentui-jsx-a11y/combobox-needs-labelling-v9`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 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.

diff --git a/docs/rules/compound-button-needs-labelling-v9.md b/docs/rules/compound-button-needs-labelling-v9.md
@@ -1,5 +1,7 @@
 # Accessibility: Compound buttons must have accessible labelling: title, aria-label, aria-labelledby, aria-describedby (`@microsoft/fluentui-jsx-a11y/compound-button-needs-labelling-v9`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 All interactive elements must have an accessible name.

diff --git a/docs/rules/dropdown-needs-labelling-v9.md b/docs/rules/dropdown-needs-labelling-v9.md
@@ -1,5 +1,7 @@
 # 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`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 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

diff --git a/docs/rules/icon-text-content-button-does-not-need-aria.md b/docs/rules/icon-text-content-button-does-not-need-aria.md
@@ -1,5 +1,7 @@
 # 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`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 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.

diff --git a/docs/rules/image-button-missing-aria-v9.md b/docs/rules/image-button-missing-aria-v9.md
@@ -1,5 +1,7 @@
 # Accessibility: Image buttons must have accessible labelling: title, aria-label, aria-labelledby, aria-describedby (`@microsoft/fluentui-jsx-a11y/image-button-missing-aria-v9`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 All interactive elements must have an accessible name.

diff --git a/docs/rules/image-button-missing-aria.md b/docs/rules/image-button-missing-aria.md
@@ -1,5 +1,7 @@
 # Accessibility: Image buttons must have accessible labelling: aria-label, aria-labelledby, aria-describedby (`@microsoft/fluentui-jsx-a11y/image-button-missing-aria`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 All interactive elements must have an accessible name.

diff --git a/docs/rules/image-button-prefer-aria-over-title-attribute.md b/docs/rules/image-button-prefer-aria-over-title-attribute.md
@@ -1,5 +1,7 @@
 # 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`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 Image buttons must have accessible labelling: aria-label

diff --git a/docs/rules/image-link-missing-aria-v9.md b/docs/rules/image-link-missing-aria-v9.md
@@ -1,5 +1,11 @@
 # Accessibility: Image links must have an accessible name (`@microsoft/fluentui-jsx-a11y/image-link-missing-aria-v9`)
 
+💼 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 -->
+
 🔧 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 -->

diff --git a/docs/rules/input-missing-label-v9.md b/docs/rules/input-missing-label-v9.md
@@ -1,5 +1,7 @@
 # Accessibility: Input fields must have accessible labelling: aria-label, aria-labelledby or an associated label (`@microsoft/fluentui-jsx-a11y/input-missing-label-v9`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 All interactive elements must have an accessible name.

diff --git a/docs/rules/menu-item-needs-labelling-v9.md b/docs/rules/menu-item-needs-labelling-v9.md
@@ -1,5 +1,7 @@
 # Accessibility: MenuItem without label must have an accessible and visual label: aria-labelledby (`@microsoft/fluentui-jsx-a11y/menu-item-needs-labelling-v9`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 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:
 
 ```jsx
 <>
-<label id="my-label">Settings</label>
-<MenuItem aria-labelledby="my-label" icon={<SettingsIcon />} onClick={handleClick}>
-</MenuItem>
-<MenuItem>Settings</MenuItem>
+    <label id="my-label">Settings</label>
+    <MenuItem aria-labelledby="my-label" icon={<SettingsIcon />} onClick={handleClick}></MenuItem>
+    <MenuItem>Settings</MenuItem>
 </>
 ```
diff --git a/docs/rules/no-empty-buttons-v9.md b/docs/rules/no-empty-buttons-v9.md
@@ -1,5 +1,7 @@
 # Accessibility: Button, ToggleButton, SplitButton, MenuButton, CompoundButton must either text content or icon or child component (`@microsoft/fluentui-jsx-a11y/no-empty-buttons-v9`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 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.
 Examples of **incorrect** code for this rule:
 
 ```jsx
-<Button></Button> 
+<Button></Button>
 ```
 
 ```jsx
-<Button /> 
+<Button />
 ```
 
 ```jsx
@@ -28,19 +30,20 @@ Examples of **incorrect** code for this rule:
 <Button aria-label="Toggle Example"></Button>
 ```
 
-
-
 Examples of **correct** code for this rule:
 
 ```jsx
 <Button>Example</Button>
 ```
+
 ```jsx
 <Button title="Toggle Example">Example</Button>
-``` 
+```
+
 ```jsx
 <Button icon={<CloseIcon />} aria-label="Close" />
 ```
+
 ```jsx
 <Button icon={<CloseIcon />}>Button</Button>
 ```
diff --git a/docs/rules/no-empty-buttons.md b/docs/rules/no-empty-buttons.md
@@ -1,5 +1,7 @@
 # Accessibility: buttons must either text content or accessible labelling (`@microsoft/fluentui-jsx-a11y/no-empty-buttons`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 Buttons must either have text, content or accessible labelling

diff --git a/docs/rules/no-empty-components-v9.md b/docs/rules/no-empty-components-v9.md
@@ -1,5 +1,7 @@
 # FluentUI components should not be empty (`@microsoft/fluentui-jsx-a11y/no-empty-components-v9`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 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:
 ```
 
 ```jsx
-<Breadcrumb><BreadcrumbItem><BreadcrumbButton>Item 1</BreadcrumbButton></BreadcrumbItem></Breadcrumb>
+<Breadcrumb>
+    <BreadcrumbItem>
+        <BreadcrumbButton>Item 1</BreadcrumbButton>
+    </BreadcrumbItem>
+</Breadcrumb>
 ```
diff --git a/docs/rules/object-literal-button-no-missing-aria.md b/docs/rules/object-literal-button-no-missing-aria.md
@@ -1,5 +1,7 @@
 # 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`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 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.

diff --git a/docs/rules/prefer-aria-over-title-attribute-v9.md b/docs/rules/prefer-aria-over-title-attribute-v9.md
@@ -1,5 +1,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`)
 
+⚠️ This rule _warns_ 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 -->
+
 🔧 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 -->

diff --git a/docs/rules/radio-button-missing-label-v9.md b/docs/rules/radio-button-missing-label-v9.md
@@ -1,5 +1,7 @@
 # Accessibility: Radio button without label must have an accessible and visual label: aria-labelledby (`@microsoft/fluentui-jsx-a11y/radio-button-missing-label-v9`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 All interactive elements must have an accessible name.

diff --git a/docs/rules/radiogroup-missing-label-v9.md b/docs/rules/radiogroup-missing-label-v9.md
@@ -1,5 +1,7 @@
 # Accessibility: RadioGroup without label must have an accessible and visual label: aria-labelledby (`@microsoft/fluentui-jsx-a11y/radiogroup-missing-label-v9`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 All interactive elements must have an accessible name.

diff --git a/docs/rules/spin-button-needs-labelling-v9.md b/docs/rules/spin-button-needs-labelling-v9.md
@@ -1,5 +1,7 @@
 # Accessibility: SpinButtons must have an accessible label (`@microsoft/fluentui-jsx-a11y/spin-button-needs-labelling-v9`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 All interactive elements must have an accessible name.

diff --git a/docs/rules/spin-button-unrecommended-labelling-v9.md b/docs/rules/spin-button-unrecommended-labelling-v9.md
@@ -1,5 +1,7 @@
 # Accessibility: Unrecommended accessibility labelling - SpinButton (`@microsoft/fluentui-jsx-a11y/spin-button-unrecommended-labelling-v9`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 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
 
 <https://www.w3.org/TR/html-aria/>
 
-
 ## Rule Details
 
 This rule aims to...
@@ -22,13 +23,8 @@ Examples of **unrecommended** code for this rule:
 ```
 
 ```jsx
-
 <Tooltip content="Spin Button label" relationship="label">
-    <SpinButton
-        defaultValue={10}
-        min={0}
-        max={20}
-    />
+    <SpinButton defaultValue={10} min={0} max={20} />
 </Tooltip>
 ```
 
@@ -38,11 +34,7 @@ Examples of **correct** code for this rule:
 <Label>
     Default SpinButton
     <SomethingNesting>
-        <SpinButton
-            defaultValue={10}
-            min={0}
-            max={20}
-        />
+        <SpinButton defaultValue={10} min={0} max={20} />
     </SomethingNesting>
 </Label>
 ```

diff --git a/docs/rules/switch-needs-labelling-v9.md b/docs/rules/switch-needs-labelling-v9.md
@@ -1,5 +1,7 @@
 # Accessibility: Switch must have an accessible label (`@microsoft/fluentui-jsx-a11y/switch-needs-labelling-v9`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 All interactive elements must have an accessible name.

diff --git a/docs/rules/text-area-missing-label-v9.md b/docs/rules/text-area-missing-label-v9.md
@@ -1,5 +1,7 @@
 # Accessibility: Textarea must have an accessible name (`@microsoft/fluentui-jsx-a11y/text-area-missing-label-v9`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 ## Rule Details

diff --git a/docs/rules/text-content-button-does-not-need-aria.md b/docs/rules/text-content-button-does-not-need-aria.md
@@ -1,5 +1,7 @@
 # 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`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 Object literal image buttons must have accessible labelling: aria-label

diff --git a/docs/rules/toolbar-missing-aria-v9.md b/docs/rules/toolbar-missing-aria-v9.md
@@ -1,5 +1,7 @@
 # Accessibility: Toolbars need accessible labelling: aria-label or aria-labelledby (`@microsoft/fluentui-jsx-a11y/toolbar-missing-aria-v9`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 <!-- end auto-generated rule header -->
@@ -32,4 +34,3 @@ Examples of **correct** code for this rule:
     <ToolbarToggleButton appearance="subtle" aria-label="Bold" icon={<TextBold24Regular />} name="textOptions" value="bold" />
 </Toolbar>
 ```
-
diff --git a/docs/rules/tooltip-not-recommended-v9.md b/docs/rules/tooltip-not-recommended-v9.md
@@ -1,5 +1,7 @@
 # Accessibility: Prefer text content or aria over a tooltip for these components MenuItem, SpinButton (`@microsoft/fluentui-jsx-a11y/tooltip-not-recommended-v9`)
 
+💼 This rule is enabled in the ✅ `recommended` config.
+
 <!-- end auto-generated rule header -->
 
 All interactive elements must have an accessible name.
@@ -18,13 +20,13 @@ Examples of **incorrect** code for this rule:
 
 ```jsx
 <Tooltip content="menu item" relationship="label">
-<MenuItem/>
+    <MenuItem />
 </Tooltip>
 ```
 
 ```jsx
 <Tooltip content="menu item" relationship="label">
-<SpinButton/>
+    <SpinButton />
 </Tooltip>
 ```
 
@@ -36,6 +38,7 @@ Examples of **correct** code for this rule:
 <MenuItem aria-labelledby="my-label"/>
 </div>
 ```
+
 ```jsx
 <div>
 <label id="my-label">More option<label>