@fusion.dev/helix-docs 0.143.0 → 0.144.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/content/accessibility.mdx +7 -0
- package/content/building-on-the-headless-tier.mdx +2 -1
- package/content/localization.mdx +12 -0
- package/content/metrics.mdx +223 -223
- package/content/overlays.mdx +29 -2
- package/dist/sources.generated.js +273 -226
- package/package.json +9 -9
|
@@ -66,6 +66,13 @@ words are yours to choose. An icon-only control has no other text to name it:
|
|
|
66
66
|
></helix-icon-button>
|
|
67
67
|
```
|
|
68
68
|
|
|
69
|
+
A button or a form control that renders with no name warns once in the console:
|
|
70
|
+
`<helix-icon-button> has no accessible name`, followed by the ways to give it
|
|
71
|
+
one. The check runs a moment after the control first renders, so a label your
|
|
72
|
+
framework writes beside the control in the same pass counts. The warning has the
|
|
73
|
+
kind `missing-name`, so `@fusion.dev/helix-diagnostics` counts it with the
|
|
74
|
+
other runtime events.
|
|
75
|
+
|
|
69
76
|
### `label` and `aria-label`
|
|
70
77
|
|
|
71
78
|
`label` renders visible text and names the control through that text.
|
|
@@ -53,12 +53,13 @@ open.
|
|
|
53
53
|
|
|
54
54
|
[//]: # (renders)
|
|
55
55
|
|
|
56
|
-
**
|
|
56
|
+
**28 of the 98 headless families interpolate another family's tag**, across 20 distinct children.
|
|
57
57
|
|
|
58
58
|
| Family | Renders |
|
|
59
59
|
|---|---|
|
|
60
60
|
| `area-chart`, `bar-chart`, `copy-button`, `donut-chart`, `heatmap`, `line-chart`, `scatter-chart` | `tooltip` |
|
|
61
61
|
| `chat` | `chat-message` |
|
|
62
|
+
| `checkbox-group` | `checkbox` |
|
|
62
63
|
| `code-block`, `object-inspector` | `copy-button` |
|
|
63
64
|
| `color-input` | `color-picker` |
|
|
64
65
|
| `color-picker` | `button`, `button-group`, `slider` |
|
package/content/localization.mdx
CHANGED
|
@@ -166,6 +166,18 @@ language. Every other control shows its English sentence.
|
|
|
166
166
|
></helix-number-input>
|
|
167
167
|
```
|
|
168
168
|
|
|
169
|
+
Color Picker and Color Input say a color's name to a screen reader, such as
|
|
170
|
+
"vibrant red". Set `color-words` to a JSON table of the words a name is made
|
|
171
|
+
of. The keys are the English words, and they match the strings that React
|
|
172
|
+
Aria's `@react-stately/color` translates, so you can reuse that table.
|
|
173
|
+
|
|
174
|
+
```html
|
|
175
|
+
<helix-color-picker
|
|
176
|
+
color-words='{"red": "rot", "vibrant": "kräftiges", "colorName": "{lightness} {chroma} {hue}"}'
|
|
177
|
+
lang="de"
|
|
178
|
+
></helix-color-picker>
|
|
179
|
+
```
|
|
180
|
+
|
|
169
181
|
**Pass these strings from your own translation system.** Helix ships English
|
|
170
182
|
defaults and no translation tools. If Helix had its own string catalog, you
|
|
171
183
|
would have to keep two catalogs in step.
|