Skip to content

Commit 3833449

Browse files
aubreyquinnaubreyquinn
committed
updated read me
1 parent 4b6b0f6 commit 3833449

File tree

4 files changed

+6
-108
lines changed

4 files changed

+6
-108
lines changed

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,14 +116,17 @@ Any use of third-party trademarks or logos are subject to those third-party's po
116116
| [badge-needs-accessible-name](docs/rules/badge-needs-accessible-name.md) | | ✅ | | 🔧 |
117117
| [breadcrumb-needs-labelling](docs/rules/breadcrumb-needs-labelling.md) | All interactive elements must have an accessible name | ✅ | | |
118118
| [checkbox-needs-labelling](docs/rules/checkbox-needs-labelling.md) | Accessibility: Checkbox without label must have an accessible and visual label: aria-labelledby | ✅ | | |
119+
| [colorswatch-needs-labelling](docs/rules/colorswatch-needs-labelling.md) | Accessibility: ColorSwatch must have an accessible name via aria-label, Tooltip, aria-labelledby, etc.. | ✅ | | |
119120
| [combobox-needs-labelling](docs/rules/combobox-needs-labelling.md) | All interactive elements must have an accessible name | ✅ | | |
120121
| [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 | ✅ | | |
121122
| [counter-badge-needs-count](docs/rules/counter-badge-needs-count.md) | | ✅ | | 🔧 |
122123
| [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) | ✅ | | |
123124
| [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) | ✅ | | |
124125
| [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 | ✅ | | |
126+
| [emptyswatch-needs-labelling](docs/rules/emptyswatch-needs-labelling.md) | Accessibility: EmptySwatch must have an accessible name via aria-label, Tooltip, aria-labelledby, etc.. | ✅ | | |
125127
| [field-needs-labelling](docs/rules/field-needs-labelling.md) | Accessibility: Field must have label | ✅ | | |
126128
| [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 | ✅ | | |
129+
| [imageswatch-needs-labelling](docs/rules/imageswatch-needs-labelling.md) | Accessibility: ImageSwatch must have an accessible name via aria-label, Tooltip, aria-labelledby, etc.. | ✅ | | |
127130
| [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 | ✅ | | |
128131
| [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. | ✅ | | 🔧 |
129132
| [menu-item-needs-labelling](docs/rules/menu-item-needs-labelling.md) | Accessibility: MenuItem without label must have an accessible and visual label: aria-labelledby | ✅ | | |

‎docs/rules/colorswatch-needs-labelling.md‎

Lines changed: 1 addition & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,5 @@
1-
# Accessibility: ColorSwatch must have an accessible name (`@microsoft/fluentui-jsx-a11y/colorswatch-needs-labelling`)
1+
# Accessibility: ColorSwatch must have an accessible name via aria-label, Tooltip, aria-labelledby, etc. (`@microsoft/fluentui-jsx-a11y/colorswatch-needs-labelling`)
22

33
💼 This rule is enabled in the ✅ `recommended` config.
44

55
<!-- end auto-generated rule header -->
6-
7-
All interactive elements must have an accessible name.
8-
9-
`ColorSwatch` without a supported label lacks an accessible name for assistive technology users.
10-
11-
## Allowed labelling strategies
12-
13-
- ✅ `aria-label` **on `ColorSwatch`**
14-
- ✅ `aria-labelledby` **on `ColorSwatch`**
15-
- ✅ `htmlFor`/`id`
16-
- ✅ Wrapping native `<label>…</label>`
17-
- ✅ `Tooltip` parent with `relationship="label"`
18-
- ✅ `Field` parent label
19-
- ✅ Text content child
20-
- ❌ Container-only label (e.g., only the surrounding `SwatchPicker` is labelled)
21-
22-
## Ways to fix
23-
24-
- Add `aria-label` / `aria-labelledby`.
25-
- Use `<label htmlFor="…">` + `id="…"` on `ColorSwatch`.
26-
- Wrap with `<label>` or use a `Tooltip (relationship="label")`.
27-
- Provide a `Field label="…"` parent.
28-
- Provide meaningful text as the child of `ColorSwatch`.
29-
30-
## Rule Details
31-
32-
This rule ensures `ColorSwatch` is labelled using **any** supported strategy above.
33-
34-
### Examples of **incorrect** code
35-
36-
```jsx
37-
// No label
38-
<SwatchPicker>
39-
<ColorSwatch color="#FF1921" value="FF1921" />
40-
</SwatchPicker>
41-
```
42-
43-
```jsx
44-
// Container-only label: ColorSwatch itself is unnamed
45-
<SwatchPicker aria-label="Color picker">
46-
<ColorSwatch color="#FF1921" value="FF1921" />
47-
</SwatchPicker>
48-
```
49-
50-
### Examples of **correct** code
51-
52-
```jsx
53-
// aria-label
54-
<SwatchPicker>
55-
<ColorSwatch color="#FF1921" value="FF1921" aria-label="Red" />
56-
</SwatchPicker>
57-
```
58-
59-
```jsx
60-
// aria-labelledby
61-
<>
62-
<span id="red-swatch">Red</span>
63-
<SwatchPicker>
64-
<ColorSwatch color="#FF1921" value="FF1921" aria-labelledby="red-swatch" />
65-
</SwatchPicker>
66-
</>
67-
```
68-
69-
```jsx
70-
// htmlFor/id
71-
<>
72-
<label htmlFor="sw-red">Red</label>
73-
<SwatchPicker>
74-
<ColorSwatch id="sw-red" color="#FF1921" value="FF1921" />
75-
</SwatchPicker>
76-
</>
77-
```
78-
79-
```jsx
80-
// Wrapping native <label>
81-
<label>
82-
Red
83-
<ColorSwatch color="#FF1921" value="FF1921" />
84-
</label>
85-
```
86-
87-
```jsx
88-
// Tooltip (acts as a label)
89-
<SwatchPicker>
90-
<Tooltip relationship="label" content="Red">
91-
<ColorSwatch color="#FF1921" value="FF1921" />
92-
</Tooltip>
93-
</SwatchPicker>
94-
```
95-
96-
```jsx
97-
// Field parent
98-
<SwatchPicker>
99-
<Field label="Red">
100-
<ColorSwatch color="#FF1921" value="FF1921" />
101-
</Field>
102-
</SwatchPicker>
103-
```
104-
105-
```jsx
106-
// Text content child
107-
<SwatchPicker>
108-
<ColorSwatch color="#FF1921" value="FF1921">Red</ColorSwatch>
109-
</SwatchPicker>
110-
```

‎docs/rules/emptyswatch-needs-labelling.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Accessibility: EmptySwatch must have an accessible name (`@microsoft/fluentui-jsx-a11y/emptyswatch-needs-labelling`)
1+
# Accessibility: EmptySwatch must have an accessible name via aria-label, Tooltip, aria-labelledby, etc. (`@microsoft/fluentui-jsx-a11y/emptyswatch-needs-labelling`)
22

33
💼 This rule is enabled in the ✅ `recommended` config.
44

‎docs/rules/imageswatch-needs-labelling.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Accessibility: ImageSwatch must have an accessible name (`@microsoft/fluentui-jsx-a11y/imageswatch-needs-labelling`)
1+
# Accessibility: ImageSwatch must have an accessible name via aria-label, Tooltip, aria-labelledby, etc. (`@microsoft/fluentui-jsx-a11y/imageswatch-needs-labelling`)
22

33
💼 This rule is enabled in the ✅ `recommended` config.
44

0 commit comments

Comments
 (0)