@allxsmith/bestax-bulma 5.46.0 → 5.47.0

package/dist/types/components/TreeView.d.ts

@@ -86,6 +86,8 @@ export interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLUListElemen
  * Props for TreeView.Item, one row and, nested in it, its children. The other
  * attributes and the `ref` land on its `<li role="treeitem">`.
  *
+ * @extraProp {number} [aria-posinset] - The item's number among the items beside it. The tree declares it, and `aria-setsize`, from the items on the page once it mounts. When the page holds only part of a set, such as the first page of a long folder, pass both on every item of that set: yours win, and the tree's own stay on any item without them.
+ * @extraProp {number} [aria-setsize] - How many items sit beside it, itself included. Declared by the tree like `aria-posinset`, and `-1` says the count isn't known.
  * @extraProp {React.Ref<HTMLLIElement>} [ref] - Ref forwarded to the `<li>`.
  */
 export interface TreeViewItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'role' | 'value' | 'onSelect' | 'children'> {

package/dist/types/helpers/useTreeView.d.ts

@@ -20,6 +20,14 @@ export interface TreeViewItemInfo extends TreeViewItemRecord {
 }
 /** A box's state: checked, unchecked or mixed. */
 export type TreeViewCheckState = boolean | 'mixed';
+/**
+ * Where an item sits among the items beside it, for its `aria-posinset` and
+ * `aria-setsize`: its number, from 1, and how many there are.
+ */
+export interface TreeViewPosition {
+    posinset: number;
+    setsize: number;
+}
 /**
  * What an item shows of the selection: `selected` in a `single` tree,
  * `checked` in a `checkbox` tree, and neither with `none`.
@@ -59,6 +67,12 @@ export interface TreeViewEngine {
      * the server.
      */
     stateOf: (value: string, path: string[], disabled: boolean) => TreeViewItemState;
+    /**
+     * Where the item with this key sits among the items beside it, read off
+     * the page after each render and whenever items move. Nothing until the
+     * tree has mounted, as on the server.
+     */
+    positionOf: (key: string) => TreeViewPosition | undefined;
     /** Records an item from its layout effect. Returns the function that forgets it. */
     register: (value: string, record: TreeViewItemRecord) => () => void;
     /** For each item's `<li>` ref: records it, and notices focus leaving with it. */
@@ -76,9 +90,11 @@ export interface TreeViewEngine {
     onClick: (element: HTMLLIElement, item: TreeViewItemInfo, onToggle: boolean) => void;
 }
 /**
- * The open state, the selection, the keys, the tab stop and the registry of
- * a TreeView (#1096). Focus moves for real, with a roving tabindex, rather
- * than through `aria-activedescendant`.
+ * The open state, the selection, the keys, the tab stop, the positions and
+ * the registry of a TreeView (#1096). Focus moves for real, with a roving
+ * tabindex, rather than through `aria-activedescendant`. Each item's
+ * position among the items beside it is declared rather than left to the
+ * browser (#1171), read off the page once the tree has mounted.
  *
  * Every item registers its value, its parent and whether it's disabled from
  * a layout effect. In a checkbox tree a closed item's children still render

package/dist/types-cjs/components/TreeView.d.ts

@@ -86,6 +86,8 @@ export interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLUListElemen
  * Props for TreeView.Item, one row and, nested in it, its children. The other
  * attributes and the `ref` land on its `<li role="treeitem">`.
  *
+ * @extraProp {number} [aria-posinset] - The item's number among the items beside it. The tree declares it, and `aria-setsize`, from the items on the page once it mounts. When the page holds only part of a set, such as the first page of a long folder, pass both on every item of that set: yours win, and the tree's own stay on any item without them.
+ * @extraProp {number} [aria-setsize] - How many items sit beside it, itself included. Declared by the tree like `aria-posinset`, and `-1` says the count isn't known.
  * @extraProp {React.Ref<HTMLLIElement>} [ref] - Ref forwarded to the `<li>`.
  */
 export interface TreeViewItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'role' | 'value' | 'onSelect' | 'children'> {

package/dist/types-cjs/helpers/useTreeView.d.ts

@@ -20,6 +20,14 @@ export interface TreeViewItemInfo extends TreeViewItemRecord {
 }
 /** A box's state: checked, unchecked or mixed. */
 export type TreeViewCheckState = boolean | 'mixed';
+/**
+ * Where an item sits among the items beside it, for its `aria-posinset` and
+ * `aria-setsize`: its number, from 1, and how many there are.
+ */
+export interface TreeViewPosition {
+    posinset: number;
+    setsize: number;
+}
 /**
  * What an item shows of the selection: `selected` in a `single` tree,
  * `checked` in a `checkbox` tree, and neither with `none`.
@@ -59,6 +67,12 @@ export interface TreeViewEngine {
      * the server.
      */
     stateOf: (value: string, path: string[], disabled: boolean) => TreeViewItemState;
+    /**
+     * Where the item with this key sits among the items beside it, read off
+     * the page after each render and whenever items move. Nothing until the
+     * tree has mounted, as on the server.
+     */
+    positionOf: (key: string) => TreeViewPosition | undefined;
     /** Records an item from its layout effect. Returns the function that forgets it. */
     register: (value: string, record: TreeViewItemRecord) => () => void;
     /** For each item's `<li>` ref: records it, and notices focus leaving with it. */
@@ -76,9 +90,11 @@ export interface TreeViewEngine {
     onClick: (element: HTMLLIElement, item: TreeViewItemInfo, onToggle: boolean) => void;
 }
 /**
- * The open state, the selection, the keys, the tab stop and the registry of
- * a TreeView (#1096). Focus moves for real, with a roving tabindex, rather
- * than through `aria-activedescendant`.
+ * The open state, the selection, the keys, the tab stop, the positions and
+ * the registry of a TreeView (#1096). Focus moves for real, with a roving
+ * tabindex, rather than through `aria-activedescendant`. Each item's
+ * position among the items beside it is declared rather than left to the
+ * browser (#1171), read off the page once the tree has mounted.
  *
  * Every item registers its value, its parent and whether it's disabled from
  * a layout effect. In a checkbox tree a closed item's children still render

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allxsmith/bestax-bulma",
-  "version": "5.46.0",
+  "version": "5.47.0",
   "description": "A fully-typed React component library for the Bulma CSS framework. Build modern UIs quickly with reusable, accessible, and customizable Bulma-based React components.",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",
@@ -22,6 +22,7 @@
   "devDependencies": {
     "@faker-js/faker": "^10.6.0",
     "@fortawesome/fontawesome-free": "^7.3.1",
+    "@guidepup/virtual-screen-reader": "0.33.0",
     "@mdi/font": "^7.4.47",
     "@rollup/plugin-commonjs": "^29.0.3",
     "@rollup/plugin-node-resolve": "^16.0.1",