@foldkit/ui 0.121.0 → 0.122.0

package/dist/dialog/index.d.ts

@@ -70,7 +70,12 @@ export type OutMessage = typeof OutMessage.Type;
 /** Configuration for creating a dialog model with `init`. The `id` must be
  *  non-empty and unique within the document: it keys the dialog element, its
  *  ARIA references, and the framework's per-dialog resource cleanup, so a
- *  duplicate or empty id breaks cleanup accounting. */
+ *  duplicate or empty id breaks cleanup accounting.
+ *
+ *  The dialog derives framework-managed ids from this `id`: `-dialog-title`,
+ *  `-dialog-description`, and `-panel` (the animation panel). Spread
+ *  `RenderInfo`'s `title` / `description` onto your heading and description
+ *  elements rather than constructing those ids yourself. */
 export type InitConfig = Readonly<{
     id: string;
     isOpen?: boolean;
@@ -116,9 +121,23 @@ export declare const update: (model: Model, message: Message) => UpdateReturn;
 export declare const open: (model: Model) => UpdateReturn;
 /** Programmatically closes the dialog. */
 export declare const close: (model: Model) => UpdateReturn;
-/** Returns the ID used for `aria-labelledby` on the dialog. Apply this to your title element. */
+/** Returns the framework-managed id the dialog's `aria-labelledby` points at,
+ *  the `-dialog-title` suffix on `model.id`.
+ *
+ *  The primary path is spreading `RenderInfo`'s `title` onto your heading
+ *  (`h.h2([...title], [...])`), which carries this id for you. Reach for this
+ *  helper only when you need the id as a value outside `toView`: a Command that
+ *  calls `getElementById`, a cross-element `aria-describedby`, or a test. Do not
+ *  hand-roll the id string. */
 export declare const titleId: (model: Model) => string;
-/** Returns the ID used for `aria-describedby` on the dialog. Apply this to your description element. */
+/** Returns the framework-managed id the dialog's `aria-describedby` points at,
+ *  the `-dialog-description` suffix on `model.id`.
+ *
+ *  The primary path is spreading `RenderInfo`'s `description` onto your
+ *  description element (`h.p([...description], [...])`), which carries this id
+ *  for you. Reach for this helper only when you need the id as a value outside
+ *  `toView`: a Command that calls `getElementById`, a cross-element
+ *  `aria-describedby`, or a test. Do not hand-roll the id string. */
 export declare const descriptionId: (model: Model) => string;
 /** Render-time payload published to the consumer's `toView`.
  *
@@ -136,6 +155,13 @@ export declare const descriptionId: (model: Model) => string;
  *    is in progress).
  *  - `panel`: attributes for the panel element. Includes the panel id
  *    (`${model.id}-panel`) and the Animation data attributes.
+ *  - `title`: attributes for the accessible-name heading. Carries the
+ *    framework-managed id the dialog's `aria-labelledby` points at. Spread
+ *    onto your heading element (`h.h2([...title], [...])`) so labelling
+ *    wires up without hand-rolling the id.
+ *  - `description`: attributes for the description element. Carries the
+ *    framework-managed id the dialog's `aria-describedby` points at. Spread
+ *    onto your description element (`h.p([...description], [...])`).
  *  - `closeButton`: attributes for an in-panel close control such as a Cancel
  *    or dismiss button. Carries the `OnClick` handler that closes the
  *    dialog (suppressed while a leave animation is in progress). Spread
@@ -147,6 +173,8 @@ export type RenderInfo = Readonly<{
     dialog: ReadonlyArray<ChildAttribute>;
     backdrop: ReadonlyArray<ChildAttribute>;
     panel: ReadonlyArray<ChildAttribute>;
+    title: ReadonlyArray<ChildAttribute>;
+    description: ReadonlyArray<ChildAttribute>;
     closeButton: ReadonlyArray<ChildAttribute>;
     isVisible: boolean;
 }>;

package/dist/dialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/dialog/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/dialog/index.ts"],"names":[],"mappings":"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"}

package/dist/dialog/index.js

@@ -186,10 +186,24 @@ export const open = (model) => update(model, RequestedOpen());
 /** Programmatically closes the dialog. */
 export const close = (model) => update(model, RequestedClose());
 // VIEW
-/** Returns the ID used for `aria-labelledby` on the dialog. Apply this to your title element. */
-export const titleId = (model) => `${model.id}-title`;
-/** Returns the ID used for `aria-describedby` on the dialog. Apply this to your description element. */
-export const descriptionId = (model) => `${model.id}-description`;
+/** Returns the framework-managed id the dialog's `aria-labelledby` points at,
+ *  the `-dialog-title` suffix on `model.id`.
+ *
+ *  The primary path is spreading `RenderInfo`'s `title` onto your heading
+ *  (`h.h2([...title], [...])`), which carries this id for you. Reach for this
+ *  helper only when you need the id as a value outside `toView`: a Command that
+ *  calls `getElementById`, a cross-element `aria-describedby`, or a test. Do not
+ *  hand-roll the id string. */
+export const titleId = (model) => `${model.id}-dialog-title`;
+/** Returns the framework-managed id the dialog's `aria-describedby` points at,
+ *  the `-dialog-description` suffix on `model.id`.
+ *
+ *  The primary path is spreading `RenderInfo`'s `description` onto your
+ *  description element (`h.p([...description], [...])`), which carries this id
+ *  for you. Reach for this helper only when you need the id as a value outside
+ *  `toView`: a Command that calls `getElementById`, a cross-element
+ *  `aria-describedby`, or a test. Do not hand-roll the id string. */
+export const descriptionId = (model) => `${model.id}-dialog-description`;
 /** Renders a headless dialog component backed by the native `<dialog>`
  *  element. `ShowDialog` opens it through `Dom.showDialog`, which uses `show()`
  *  (not native `showModal()`) with a high z-index, a focus trap, a
@@ -217,8 +231,8 @@ export const view = defineView((model, viewInputs) => {
     ]), M.orElse(() => []));
     const dialogAttributes = [
         h.Id(id),
-        h.AriaLabelledBy(`${id}-title`),
-        h.AriaDescribedBy(`${id}-description`),
+        h.AriaLabelledBy(titleId(model)),
+        h.AriaDescribedBy(descriptionId(model)),
         h.OnCancel(RequestedClose()),
         h.Open(isVisible),
         h.Style({
@@ -243,11 +257,15 @@ export const view = defineView((model, viewInputs) => {
         ...(isLeaving ? [] : [h.OnClick(RequestedClose())]),
     ];
     const panelAttributes = [h.Id(`${id}-panel`), ...animationAttributes];
+    const titleAttributes = [h.Id(titleId(model))];
+    const descriptionAttributes = [h.Id(descriptionId(model))];
     const closeButtonAttributes = isLeaving ? [] : [h.OnClick(RequestedClose())];
     return toView({
         dialog: childAttributes(dialogAttributes),
         backdrop: childAttributes(backdropAttributes),
         panel: childAttributes(panelAttributes),
+        title: childAttributes(titleAttributes),
+        description: childAttributes(descriptionAttributes),
         closeButton: childAttributes(closeButtonAttributes),
         isVisible,
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foldkit/ui",
-  "version": "0.121.0",
+  "version": "0.122.0",
   "description": "Headless, accessible UI components for Foldkit",
   "type": "module",
   "main": "./dist/index.js",
@@ -127,7 +127,7 @@
     "typedoc": "^0.28.19",
     "typescript": "^6.0.3",
     "vitest": "^4.1.9",
-    "foldkit": "0.121.0"
+    "foldkit": "0.122.0"
   },
   "keywords": [
     "foldkit",