eidos-ui 3.3.0 → 3.4.0

package/dist/{chunk-HYDNZXPU.js → chunk-H2RS6Z6Q.js}

@@ -1561,10 +1561,12 @@ function VirtualListInner({
       className: ["eidos-virtual-list", className].filter(Boolean).join(" "),
       style: containerStyle,
       onScroll: loading ? void 0 : handleScroll,
-      role: "list",
       "aria-busy": loading,
+      tabIndex: 0,
       children: [
-        loading && /* @__PURE__ */ jsx("div", { className: "eidos-virtual-list-loading", "aria-label": "Loading content", children: Array.from({ length: loadingRowCount }, (_, idx) => /* @__PURE__ */ jsxs(
+        loading && // No `aria-label`: it is prohibited on an element with no role, and
+        // the container's `aria-busy` is what actually conveys "loading".
+        /* @__PURE__ */ jsx("div", { className: "eidos-virtual-list-loading", children: Array.from({ length: loadingRowCount }, (_, idx) => /* @__PURE__ */ jsxs(
           "div",
           {
             className: "eidos-virtual-list-skeleton-row",
@@ -1587,28 +1589,42 @@ function VirtualListInner({
           idx
         )) }),
         !loading && data.length === 0 && /* @__PURE__ */ jsx("div", { className: "eidos-virtual-list-empty", role: "status", children: emptyContent }),
-        !loading && data.length > 0 && /* @__PURE__ */ jsx("div", { className: "eidos-virtual-list-inner", style: { height: virtualizer.getTotalSize() }, children: virtualizer.getVirtualItems().map((virtualItem) => {
-          const item = data[virtualItem.index];
-          const key = getRowKey ? getRowKey(item, virtualItem.index) : virtualItem.index;
-          return /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "eidos-virtual-list-row",
-              style: {
-                // `top: 0` anchors the absolutely-positioned row to the top
-                // of the inner spacer; `transform` then translates it into
-                // position. This is the recommended pattern for
-                // @tanstack/react-virtual and keeps compositing efficient.
-                top: 0,
-                height: virtualItem.size,
-                transform: `translateY(${virtualItem.start}px)`
-              },
-              role: "listitem",
-              children: renderRow(item, virtualItem.index)
-            },
-            key
-          );
-        }) })
+        !loading && data.length > 0 && // `role="list"` sits here rather than on the scroll container.
+        //
+        // A list may only contain listitems, and the scroll container also
+        // holds the loading skeletons and the empty state - neither of which
+        // is a list item. Scoping the role to the element that holds only
+        // rows makes the structure honest and keeps the states out of it.
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "eidos-virtual-list-inner",
+            style: { height: virtualizer.getTotalSize() },
+            role: "list",
+            children: virtualizer.getVirtualItems().map((virtualItem) => {
+              const item = data[virtualItem.index];
+              const key = getRowKey ? getRowKey(item, virtualItem.index) : virtualItem.index;
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "eidos-virtual-list-row",
+                  style: {
+                    // `top: 0` anchors the absolutely-positioned row to the top
+                    // of the inner spacer; `transform` then translates it into
+                    // position. This is the recommended pattern for
+                    // @tanstack/react-virtual and keeps compositing efficient.
+                    top: 0,
+                    height: virtualItem.size,
+                    transform: `translateY(${virtualItem.start}px)`
+                  },
+                  role: "listitem",
+                  children: renderRow(item, virtualItem.index)
+                },
+                key
+              );
+            })
+          }
+        )
       ]
     }
   );
@@ -1620,4 +1636,4 @@ var VirtualList = Object.assign(VirtualListInner, {
 export {
   VirtualList
 };
-//# sourceMappingURL=chunk-HYDNZXPU.js.map
+//# sourceMappingURL=chunk-H2RS6Z6Q.js.map