@octaviaflow/core 3.0.4 → 3.0.6
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/dist/components/Button/Button.d.ts.map +1 -1
- package/dist/components/Checkbox/Checkbox.d.ts.map +1 -1
- package/dist/components/Dialog/Dialog.d.ts.map +1 -1
- package/dist/components/DropdownMenu/DropdownMenu.d.ts +9 -1
- package/dist/components/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/components/Radio/Radio.d.ts.map +1 -1
- package/dist/components/Select/Select.d.ts.map +1 -1
- package/dist/components/SlideoutPanel/SlideoutPanel.d.ts.map +1 -1
- package/dist/components/Switch/Switch.d.ts.map +1 -1
- package/dist/components/Textarea/Textarea.d.ts.map +1 -1
- package/dist/index.cjs +132 -31
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +136 -35
- package/dist/index.js.map +1 -1
- package/dist/stories/state-matrix.d.ts +74 -0
- package/dist/stories/state-matrix.d.ts.map +1 -0
- package/dist/styles.css +1 -1
- package/dist/utils/a11y.d.ts +70 -0
- package/dist/utils/a11y.d.ts.map +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* a11y — shared helpers for resolving an accessible name from the union of
|
|
3
|
+
* props every form/interactive component accepts.
|
|
4
|
+
*
|
|
5
|
+
* Why this exists:
|
|
6
|
+
* react-aria's hooks (useCheckbox, useSwitch, useRadio, useTextField,
|
|
7
|
+
* useButton, etc.) emit a runtime warning to the browser console when
|
|
8
|
+
* none of the following is present on the underlying element:
|
|
9
|
+
* - aria-label
|
|
10
|
+
* - aria-labelledby
|
|
11
|
+
* - a visible <label> with htmlFor pointing to the element id
|
|
12
|
+
*
|
|
13
|
+
* Many of our components accept `label` as `string | ReactNode`. When
|
|
14
|
+
* `label` is a ReactNode (icon + text, custom JSX), react-aria can't see
|
|
15
|
+
* a text label and the warning fires. This helper centralizes the
|
|
16
|
+
* derivation: it returns a single { 'aria-label' or 'aria-labelledby' }
|
|
17
|
+
* shape that react-aria will accept, and — in development only — it
|
|
18
|
+
* surfaces a focused console.error pointing the developer at the prop
|
|
19
|
+
* they're missing instead of the generic react-aria warning.
|
|
20
|
+
*
|
|
21
|
+
* Usage:
|
|
22
|
+
* const ariaProps = resolveAccessibleName({
|
|
23
|
+
* label,
|
|
24
|
+
* ariaLabel: props['aria-label'],
|
|
25
|
+
* ariaLabelledby: props['aria-labelledby'],
|
|
26
|
+
* componentName: 'Checkbox',
|
|
27
|
+
* });
|
|
28
|
+
* // → { 'aria-label': string } | { 'aria-labelledby': string } | { 'aria-label': string }
|
|
29
|
+
*
|
|
30
|
+
* useCheckbox({ ...otherProps, ...ariaProps }, state, ref);
|
|
31
|
+
*/
|
|
32
|
+
import type { ReactNode } from "react";
|
|
33
|
+
export interface ResolveAccessibleNameInput {
|
|
34
|
+
/** The visible label, if any. Strings are auto-used as aria-label. */
|
|
35
|
+
label?: ReactNode;
|
|
36
|
+
/** Caller-provided aria-label override. Highest priority when present. */
|
|
37
|
+
ariaLabel?: string;
|
|
38
|
+
/** Caller-provided aria-labelledby. Wins over label-derived values. */
|
|
39
|
+
ariaLabelledby?: string;
|
|
40
|
+
/**
|
|
41
|
+
* Component name used in dev-mode error messages. Helps the developer
|
|
42
|
+
* locate which usage needs a label.
|
|
43
|
+
*/
|
|
44
|
+
componentName: string;
|
|
45
|
+
/**
|
|
46
|
+
* Optional secondary fallbacks the component knows about — e.g. a Radio
|
|
47
|
+
* can fall back to its `value` so radios in a group are at least
|
|
48
|
+
* distinguishable. The first non-empty string is used.
|
|
49
|
+
*/
|
|
50
|
+
fallbacks?: Array<string | undefined>;
|
|
51
|
+
}
|
|
52
|
+
export type ResolvedAccessibleName = {
|
|
53
|
+
"aria-label": string;
|
|
54
|
+
} | {
|
|
55
|
+
"aria-labelledby": string;
|
|
56
|
+
};
|
|
57
|
+
/**
|
|
58
|
+
* Resolve the accessible-name props that should be spread onto the
|
|
59
|
+
* underlying element. Guarantees at least one of aria-label / aria-labelledby
|
|
60
|
+
* is present so react-aria won't warn at runtime.
|
|
61
|
+
*
|
|
62
|
+
* Priority order:
|
|
63
|
+
* 1. aria-labelledby (caller-provided)
|
|
64
|
+
* 2. aria-label (caller-provided)
|
|
65
|
+
* 3. label (when string)
|
|
66
|
+
* 4. fallbacks (when string)
|
|
67
|
+
* 5. component-name placeholder + dev-mode console.error
|
|
68
|
+
*/
|
|
69
|
+
export declare function resolveAccessibleName(input: ResolveAccessibleNameInput): ResolvedAccessibleName;
|
|
70
|
+
//# sourceMappingURL=a11y.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"a11y.d.ts","sourceRoot":"","sources":["../../src/utils/a11y.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,0BAA0B;IACzC,sEAAsE;IACtE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;CACvC;AAED,MAAM,MAAM,sBAAsB,GAC9B;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,GACxB;IAAE,iBAAiB,EAAE,MAAM,CAAA;CAAE,CAAC;AAElC;;;;;;;;;;;GAWG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,0BAA0B,GAChC,sBAAsB,CA4BxB"}
|