diff --git a/COVERAGE.md b/COVERAGE.md index d65a83b..872b914 100644 --- a/COVERAGE.md +++ b/COVERAGE.md @@ -64,10 +64,10 @@ We currently cover the following components: - [x] SpinButton - [x] Spinner - [x] SwatchPicker - - [] ColorSwatch - - [] ImageSwatch - - [] EmptySwatch - - [] SwatchPickerRow + - [x] ColorSwatch + - [x] ImageSwatch + - [x] EmptySwatch + - [N/A] SwatchPickerRow - [x] Switch - [] SearchBox - [] Table diff --git a/README.md b/README.md index 29e74b0..22c9d86 100644 --- a/README.md +++ b/README.md @@ -116,14 +116,17 @@ Any use of third-party trademarks or logos are subject to those third-party's po | [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 | βœ… | | | +| [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 | βœ… | | | | [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 | βœ… | | | | [counter-badge-needs-count](docs/rules/counter-badge-needs-count.md) | | βœ… | | πŸ”§ | | [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 | βœ… | | | +| [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 | βœ… | | | +| [imageswatch-needs-labelling](docs/rules/imageswatch-needs-labelling.md) | Accessibility: ImageSwatch must have an accessible name via aria-label, Tooltip, 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-item-needs-labelling](docs/rules/menu-item-needs-labelling.md) | Accessibility: MenuItem without label must have an accessible and visual label: aria-labelledby | βœ… | | | diff --git a/docs/rules/colorswatch-needs-labelling.md b/docs/rules/colorswatch-needs-labelling.md new file mode 100644 index 0000000..c528f1f --- /dev/null +++ b/docs/rules/colorswatch-needs-labelling.md @@ -0,0 +1,5 @@ +# Accessibility: ColorSwatch must have an accessible name via aria-label, Tooltip, aria-labelledby, etc. (`@microsoft/fluentui-jsx-a11y/colorswatch-needs-labelling`) + +πŸ’Ό This rule is enabled in the βœ… `recommended` config. + + diff --git a/docs/rules/emptyswatch-needs-labelling.md b/docs/rules/emptyswatch-needs-labelling.md new file mode 100644 index 0000000..2a94b87 --- /dev/null +++ b/docs/rules/emptyswatch-needs-labelling.md @@ -0,0 +1,109 @@ +# Accessibility: EmptySwatch must have an accessible name via aria-label, Tooltip, aria-labelledby, etc. (`@microsoft/fluentui-jsx-a11y/emptyswatch-needs-labelling`) + +πŸ’Ό This rule is enabled in the βœ… `recommended` config. + + + +All interactive elements must have an accessible name. + +`EmptySwatch` without a supported label lacks an accessible name for assistive technology users. + +## Allowed labelling strategies + +- βœ… `aria-label` **on `EmptySwatch`** +- βœ… `aria-labelledby` **on `EmptySwatch`** +- βœ… `htmlFor`/`id` (native `