From ed6625eb7e5237dd89bca2be84a6c773b00ae7ff Mon Sep 17 00:00:00 2001 From: Ajay Agarwal Date: Wed, 18 Sep 2024 16:11:47 +0530 Subject: [PATCH] updated docs --- README.md | 8 ++++---- docs/rules/accordion-header-needs-labelling.md | 4 ++++ docs/rules/accordion-item-needs-header-and-panel.md | 4 ++++ docs/rules/avatar-needs-name.md | 4 ++++ .../avoid-using-aria-describedby-for-primary-labelling.md | 2 ++ docs/rules/badge-needs-accessible-name.md | 4 ++++ docs/rules/breadcrumb-needs-labelling.md | 4 ++++ docs/rules/checkbox-needs-labelling.md | 4 ++++ docs/rules/combobox-needs-labelling.md | 4 ++++ docs/rules/compound-button-needs-labelling.md | 4 ++++ docs/rules/dialogbody-needs-title-content-and-actions.md | 2 ++ docs/rules/dialogsurface-needs-aria.md | 2 ++ docs/rules/dropdown-needs-labelling.md | 4 ++++ docs/rules/image-button-missing-aria.md | 4 ++++ docs/rules/image-link-missing-aria.md | 6 ++++++ docs/rules/input-missing-label.md | 4 ++++ docs/rules/menu-item-needs-labelling.md | 4 ++++ docs/rules/no-empty-buttons.md | 4 ++++ docs/rules/no-empty-components.md | 4 ++++ docs/rules/prefer-aria-over-title-attribute.md | 6 ++++++ docs/rules/radio-button-missing-label.md | 4 ++++ docs/rules/radiogroup-missing-label.md | 4 ++++ docs/rules/spin-button-needs-labelling.md | 4 ++++ docs/rules/spin-button-unrecommended-labelling.md | 4 ++++ docs/rules/spinner-needs-labelling.md | 2 ++ docs/rules/switch-needs-labelling.md | 4 ++++ docs/rules/text-area-missing-label.md | 4 ++++ docs/rules/toolbar-missing-aria.md | 4 ++++ docs/rules/tooltip-not-recommended.md | 4 ++++ 29 files changed, 112 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 58662e2..14eea7e 100644 --- a/README.md +++ b/README.md @@ -151,14 +151,14 @@ Any use of third-party trademarks or logos are subject to those third-party's po | [accordion-header-needs-labelling](docs/rules/accordion-header-needs-labelling.md) | The accordion header is a button and it needs an accessibile name e.g. text content, aria-label, aria-labelledby. | ✅ | | | | [accordion-item-needs-header-and-panel](docs/rules/accordion-item-needs-header-and-panel.md) | An AccordionItem needs exactly one header and one panel | ✅ | | | | [avatar-needs-name](docs/rules/avatar-needs-name.md) | Accessibility: Avatar must have an accessible labelling: name, aria-label, aria-labelledby | ✅ | | | -| [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. | | ✅ | | +| [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 | ✅ | | | | [checkbox-needs-labelling](docs/rules/checkbox-needs-labelling.md) | Accessibility: Checkbox without label must have an accessible and visual label: aria-labelledby | ✅ | | | | [combobox-needs-labelling](docs/rules/combobox-needs-labelling.md) | All interactive elements must have an accessible name | ✅ | | | | [compound-button-needs-labelling](docs/rules/compound-button-needs-labelling.md) | Accessibility: Compound buttons must have accessible labelling: title, aria-label, aria-labelledby, aria-describedby | ✅ | | | -| [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) | ✅ | | | -| [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) | ✅ | | | +| [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) | | | | +| [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) | | | | | [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 | ✅ | | | | [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-link-missing-aria](docs/rules/image-link-missing-aria.md) | Accessibility: Image links must have an accessible name | ✅ | | 🔧 | @@ -171,7 +171,7 @@ Any use of third-party trademarks or logos are subject to those third-party's po | [radiogroup-missing-label](docs/rules/radiogroup-missing-label.md) | Accessibility: RadioGroup without label must have an accessible and visual label: aria-labelledby | ✅ | | | | [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 | ✅ | | | | [text-area-missing-label](docs/rules/text-area-missing-label.md) | Accessibility: Textarea must have an accessible name | ✅ | | | | [toolbar-missing-aria](docs/rules/toolbar-missing-aria.md) | Accessibility: Toolbars need accessible labelling: aria-label or aria-labelledby | ✅ | | | diff --git a/docs/rules/accordion-header-needs-labelling.md b/docs/rules/accordion-header-needs-labelling.md index 7761636..5552730 100644 --- a/docs/rules/accordion-header-needs-labelling.md +++ b/docs/rules/accordion-header-needs-labelling.md @@ -4,6 +4,10 @@ +💼 This rule is enabled in the ✅ `recommended` config. + + + The ESLint rule is designed to enforce accessibility standards in React components, specifically ensuring an accordion header is accessible to screen reader users. ## Rule Details diff --git a/docs/rules/accordion-item-needs-header-and-panel.md b/docs/rules/accordion-item-needs-header-and-panel.md index 2eedd79..ba37296 100644 --- a/docs/rules/accordion-item-needs-header-and-panel.md +++ b/docs/rules/accordion-item-needs-header-and-panel.md @@ -4,6 +4,10 @@ +💼 This rule is enabled in the ✅ `recommended` config. + + + 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. ## Rule Details diff --git a/docs/rules/avatar-needs-name.md b/docs/rules/avatar-needs-name.md index fd7ee18..ab67bc5 100644 --- a/docs/rules/avatar-needs-name.md +++ b/docs/rules/avatar-needs-name.md @@ -4,6 +4,10 @@ +💼 This rule is enabled in the ✅ `recommended` config. + + + All interactive elements must have an accessible name. Avatar lacks an accessible name without a name or accessible labelling. diff --git a/docs/rules/avoid-using-aria-describedby-for-primary-labelling.md b/docs/rules/avoid-using-aria-describedby-for-primary-labelling.md index ce00093..bdf6846 100644 --- a/docs/rules/avoid-using-aria-describedby-for-primary-labelling.md +++ b/docs/rules/avoid-using-aria-describedby-for-primary-labelling.md @@ -1,5 +1,7 @@ # Aria-describedby provides additional context and is not meant for primary labeling (`@microsoft/fluentui-jsx-a11y/avoid-using-aria-describedby-for-primary-labelling`) + + ⚠️ This rule _warns_ in the ✅ `recommended` config. diff --git a/docs/rules/badge-needs-accessible-name.md b/docs/rules/badge-needs-accessible-name.md index c0622eb..4d0f076 100644 --- a/docs/rules/badge-needs-accessible-name.md +++ b/docs/rules/badge-needs-accessible-name.md @@ -4,6 +4,10 @@ +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). + + + 💼 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). diff --git a/docs/rules/breadcrumb-needs-labelling.md b/docs/rules/breadcrumb-needs-labelling.md index eecd367..993bf5f 100644 --- a/docs/rules/breadcrumb-needs-labelling.md +++ b/docs/rules/breadcrumb-needs-labelling.md @@ -4,6 +4,10 @@ +💼 This rule is enabled in the ✅ `recommended` config. + + + 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/checkbox-needs-labelling.md b/docs/rules/checkbox-needs-labelling.md index 4bd7477..c543a5f 100644 --- a/docs/rules/checkbox-needs-labelling.md +++ b/docs/rules/checkbox-needs-labelling.md @@ -4,6 +4,10 @@ +💼 This rule is enabled in the ✅ `recommended` config. + + + All interactive elements must have an accessible name. Checkboxes without a label or accessible labelling lack an accessible name. diff --git a/docs/rules/combobox-needs-labelling.md b/docs/rules/combobox-needs-labelling.md index cb08e3a..20113d5 100644 --- a/docs/rules/combobox-needs-labelling.md +++ b/docs/rules/combobox-needs-labelling.md @@ -4,6 +4,10 @@ +💼 This rule is enabled in the ✅ `recommended` config. + + + 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.md b/docs/rules/compound-button-needs-labelling.md index aeacbdf..2920d02 100644 --- a/docs/rules/compound-button-needs-labelling.md +++ b/docs/rules/compound-button-needs-labelling.md @@ -4,6 +4,10 @@ +💼 This rule is enabled in the ✅ `recommended` config. + + + All interactive elements must have an accessible name. Please add title, aria-label, aria-labelledby, aria-describedBy, secondaryContent etc. diff --git a/docs/rules/dialogbody-needs-title-content-and-actions.md b/docs/rules/dialogbody-needs-title-content-and-actions.md index 786063d..1087e44 100644 --- a/docs/rules/dialogbody-needs-title-content-and-actions.md +++ b/docs/rules/dialogbody-needs-title-content-and-actions.md @@ -1,5 +1,7 @@ # A DialogBody should have a header(DialogTitle), content(DialogContent), and footer(DialogActions) (`@microsoft/fluentui-jsx-a11y/dialogbody-needs-title-content-and-actions`) + + 💼 This rule is enabled in the ✅ `recommended` config. diff --git a/docs/rules/dialogsurface-needs-aria.md b/docs/rules/dialogsurface-needs-aria.md index 48ed1e1..72c2a2c 100644 --- a/docs/rules/dialogsurface-needs-aria.md +++ b/docs/rules/dialogsurface-needs-aria.md @@ -1,5 +1,7 @@ # DialogueSurface need accessible labelling: aria-describedby on DialogueSurface and aria-label or aria-labelledby(if DialogueTitle is missing) (`@microsoft/fluentui-jsx-a11y/dialogsurface-needs-aria`) + + 💼 This rule is enabled in the ✅ `recommended` config. diff --git a/docs/rules/dropdown-needs-labelling.md b/docs/rules/dropdown-needs-labelling.md index 03a9855..58d9291 100644 --- a/docs/rules/dropdown-needs-labelling.md +++ b/docs/rules/dropdown-needs-labelling.md @@ -4,6 +4,10 @@ +💼 This rule is enabled in the ✅ `recommended` config. + + + 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 Dropdown having label linked via htmlFor in Label is recommended diff --git a/docs/rules/image-button-missing-aria.md b/docs/rules/image-button-missing-aria.md index f0cb6d8..a9b1594 100644 --- a/docs/rules/image-button-missing-aria.md +++ b/docs/rules/image-button-missing-aria.md @@ -4,6 +4,10 @@ +💼 This rule is enabled in the ✅ `recommended` config. + + + All interactive elements must have an accessible name. Image buttons without additional text content lack an accessible name. diff --git a/docs/rules/image-link-missing-aria.md b/docs/rules/image-link-missing-aria.md index 2c1197a..96a2427 100644 --- a/docs/rules/image-link-missing-aria.md +++ b/docs/rules/image-link-missing-aria.md @@ -12,6 +12,12 @@ +💼 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). + + + 🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). diff --git a/docs/rules/input-missing-label.md b/docs/rules/input-missing-label.md index e1921a3..91ca195 100644 --- a/docs/rules/input-missing-label.md +++ b/docs/rules/input-missing-label.md @@ -4,6 +4,10 @@ +💼 This rule is enabled in the ✅ `recommended` config. + + + All interactive elements must have an accessible name. ## Rule Details diff --git a/docs/rules/menu-item-needs-labelling.md b/docs/rules/menu-item-needs-labelling.md index 5683314..c3a621d 100644 --- a/docs/rules/menu-item-needs-labelling.md +++ b/docs/rules/menu-item-needs-labelling.md @@ -4,6 +4,10 @@ +💼 This rule is enabled in the ✅ `recommended` config. + + + Accessibility: MenuItem must have a visual label and it needs to be linked via aria-labelledby diff --git a/docs/rules/no-empty-buttons.md b/docs/rules/no-empty-buttons.md index 08c9443..e513d3b 100644 --- a/docs/rules/no-empty-buttons.md +++ b/docs/rules/no-empty-buttons.md @@ -4,6 +4,10 @@ +💼 This rule is enabled in the ✅ `recommended` config. + + + Buttons must either have text, content or accessible labelling diff --git a/docs/rules/no-empty-components.md b/docs/rules/no-empty-components.md index a004b4a..257d1bf 100644 --- a/docs/rules/no-empty-components.md +++ b/docs/rules/no-empty-components.md @@ -4,6 +4,10 @@ +💼 This rule is enabled in the ✅ `recommended` config. + + + 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/prefer-aria-over-title-attribute.md b/docs/rules/prefer-aria-over-title-attribute.md index 507cd69..4478efd 100644 --- a/docs/rules/prefer-aria-over-title-attribute.md +++ b/docs/rules/prefer-aria-over-title-attribute.md @@ -12,6 +12,12 @@ +⚠️ 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). + + + 🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). diff --git a/docs/rules/radio-button-missing-label.md b/docs/rules/radio-button-missing-label.md index a6a4913..8a1b547 100644 --- a/docs/rules/radio-button-missing-label.md +++ b/docs/rules/radio-button-missing-label.md @@ -4,6 +4,10 @@ +💼 This rule is enabled in the ✅ `recommended` config. + + + All interactive elements must have an accessible name. Radio button without a label or accessible labeling lack an accessible name. diff --git a/docs/rules/radiogroup-missing-label.md b/docs/rules/radiogroup-missing-label.md index 933583c..520b04f 100644 --- a/docs/rules/radiogroup-missing-label.md +++ b/docs/rules/radiogroup-missing-label.md @@ -4,6 +4,10 @@ +💼 This rule is enabled in the ✅ `recommended` config. + + + All interactive elements must have an accessible name. RadioGroup without a label or accessible labeling lack an accessible name. diff --git a/docs/rules/spin-button-needs-labelling.md b/docs/rules/spin-button-needs-labelling.md index 7375c10..264cd9d 100644 --- a/docs/rules/spin-button-needs-labelling.md +++ b/docs/rules/spin-button-needs-labelling.md @@ -4,6 +4,10 @@ +💼 This rule is enabled in the ✅ `recommended` config. + + + All interactive elements must have an accessible name. Spin Button components need a visual label. diff --git a/docs/rules/spin-button-unrecommended-labelling.md b/docs/rules/spin-button-unrecommended-labelling.md index 02af7fe..8a92b14 100644 --- a/docs/rules/spin-button-unrecommended-labelling.md +++ b/docs/rules/spin-button-unrecommended-labelling.md @@ -4,6 +4,10 @@ +💼 This rule is enabled in the ✅ `recommended` config. + + + All interactive elements must have an accessible name. Spin Button components need a visual label. diff --git a/docs/rules/spinner-needs-labelling.md b/docs/rules/spinner-needs-labelling.md index 08ae0ea..64d1304 100644 --- a/docs/rules/spinner-needs-labelling.md +++ b/docs/rules/spinner-needs-labelling.md @@ -1,5 +1,7 @@ # Accessibility: Spinner must have either aria-label or label, aria-live and aria-busy attributes (`@microsoft/fluentui-jsx-a11y/spinner-needs-labelling`) + + 💼 This rule is enabled in the ✅ `recommended` config. diff --git a/docs/rules/switch-needs-labelling.md b/docs/rules/switch-needs-labelling.md index 80d1630..d06fe71 100644 --- a/docs/rules/switch-needs-labelling.md +++ b/docs/rules/switch-needs-labelling.md @@ -4,6 +4,10 @@ +💼 This rule is enabled in the ✅ `recommended` config. + + + All interactive elements must have an accessible name. Switch components need a visual label. diff --git a/docs/rules/text-area-missing-label.md b/docs/rules/text-area-missing-label.md index 38d149a..1798593 100644 --- a/docs/rules/text-area-missing-label.md +++ b/docs/rules/text-area-missing-label.md @@ -4,6 +4,10 @@ +💼 This rule is enabled in the ✅ `recommended` config. + + + ## Rule Details This rule aims to prevent that a text area is placed without a label. diff --git a/docs/rules/toolbar-missing-aria.md b/docs/rules/toolbar-missing-aria.md index 08683d1..508ed3b 100644 --- a/docs/rules/toolbar-missing-aria.md +++ b/docs/rules/toolbar-missing-aria.md @@ -4,6 +4,10 @@ +💼 This rule is enabled in the ✅ `recommended` config. + + + The toolbar role needs an accessible name, especially if there are multiple toolbars on a screen. diff --git a/docs/rules/tooltip-not-recommended.md b/docs/rules/tooltip-not-recommended.md index 066cf52..ee43625 100644 --- a/docs/rules/tooltip-not-recommended.md +++ b/docs/rules/tooltip-not-recommended.md @@ -4,6 +4,10 @@ +💼 This rule is enabled in the ✅ `recommended` config. + + + All interactive elements must have an accessible name. Tooltip not recommended for these components: MenuItem, SpinButton, etc.