@revenexx/studio-shared 0.3.1 → 0.3.2

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "studio-shared",
   "configKey": "studioShared",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/runtime/components/DataTable/DataTable.d.vue.ts

@@ -11,8 +11,11 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         data: T[];
         columns: DataTableColumn<T>[];
         rowKey: RowKey<T>;
+        /** `label` is the field's accessible name; it defaults to the placeholder
+         *  where the surface wrote one (see `searchLabel`). */
         search?: boolean | {
             placeholder?: string;
+            label?: string;
         };
         columnsMenu?: boolean;
         /** Mount the surface's own filter panel in the toolbar's Filter popover

package/dist/runtime/components/DataTable/DataTable.vue

@@ -224,6 +224,11 @@ function toggleSort(column) {
   }
   sort.value = { column: null, direction: null };
 }
+function ariaSortFor(col) {
+  if (!col.sortable) return void 0;
+  if (sort.value.column !== col.key) return "none";
+  return sort.value.direction === "desc" ? "descending" : "ascending";
+}
 function rowKeyFor(row) {
   if (typeof props.rowKey === "function") return props.rowKey(row);
   return row[props.rowKey];
@@ -235,6 +240,10 @@ const gridTemplate = computed(() => {
 const placeholder = computed(
   () => typeof props.search === "object" ? props.search.placeholder ?? t("shared.datatable.toolbar.search.placeholder.default") : t("shared.datatable.toolbar.search.placeholder.default")
 );
+const searchLabel = computed(() => {
+  const configured = typeof props.search === "object" ? props.search.label ?? props.search.placeholder : void 0;
+  return configured ?? t("shared.datatable.toolbar.search.aria.label");
+});
 const slots = useSlots();
 const showToolbar = computed(
   () => props.search || props.columnsMenu || props.filter || !!props.filterTabs || !!props.savedViews || !!props.viewModes?.length || !!props.rail || !!slots.actions || !!slots.scope || !!slots["toolbar-left"] || !!slots["toolbar-right"]
@@ -338,6 +347,7 @@ function defaultCell(col, row) {
           v-if="search"
           v-model="query"
           :placeholder="placeholder"
+          :label="searchLabel"
           class="w-[21rem] min-w-40 max-w-full shrink"
         >
           <template #icon>
@@ -445,21 +455,45 @@ function defaultCell(col, row) {
     <!-- The header and the rows share one box so their columns cannot drift.
          `display: contents` when scrolling is off makes this element vanish
          from layout entirely, so every table that has not asked for it renders
-         exactly as it did. -->
+         exactly as it did.
+
+         IT IS ALSO THE TABLE. The box that holds the header and the rows and
+         nothing else is the only element in this component that can carry the
+         role: the root has the toolbar and the footer in it, and a `table` may
+         own rows and rowgroups only. Which is why everything below is a `row`
+         or is hidden — an empty state or a skeleton left as a bare `div` here
+         would be a child the role does not allow, and the whole table's
+         semantics are then whatever the browser decides to salvage.
+
+         `table` and not `grid`. `grid` is the interactive one: it promises
+         arrow keys move a focus between cells, and nothing here implements
+         that. A static table read with a screen reader's own table commands is
+         what these lists actually are, and both roles announce the column
+         heading with the cell, which is the thing that was missing. -->
     <div
+      :role="showTable ? 'table' : void 0"
+      :aria-busy="showTable && loading ? 'true' : void 0"
       :class="scrollBody ? 'min-h-0 overflow-y-auto' : 'contents'"
       :style="scrollStyle"
     >
     <!-- Header row -------------------------------------------------- -->
     <div
       v-if="showTable"
+      role="row"
       class="grid items-center gap-2 border-t rounded-t-lg border-gray-200 bg-gray-100 px-4 py-2.5 text-sm font-medium uppercase tracking-normal text-muted-foreground"
       :class="scrollBody ? 'sticky top-0 z-10' : ''"
       :style="gridTemplate"
     >
+      <!-- `columnheader` is what names every cell underneath it, so this is
+           the half of the fix that does the work. `aria-sort` goes with it:
+           a heading that carries a sort button and says nothing about the
+           current direction is a control whose state is visible only to
+           people who can see the arrow. -->
       <div
         v-for="col in visibleColumns"
         :key="col.key"
+        role="columnheader"
+        :aria-sort="ariaSortFor(col)"
         :class="col.alignRight ? 'text-right' : ''"
       >
         <!-- `#header-<key>` lets a page take over a header cell (e.g. a
@@ -487,16 +521,22 @@ function defaultCell(col, row) {
 
     <!-- Body --------------------------------------------------------- -->
     <template v-for="entry in showTable ? renderRows : []" :key="entry.key">
-      <!-- Group header (groupBy mode) -->
+      <!-- Group header (groupBy mode) — a row of one cell that spans the lot.
+           The flex moves one element in, onto the cell: a `row` may hold
+           cells and the label and the count are neither. -->
       <div
         v-if="entry.kind === 'header'"
-        class="flex items-center gap-2 border-t border-black/[0.04] bg-gray-100/70 px-4 py-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground"
+        role="row"
+        class="border-t border-black/[0.04] bg-gray-100/70 px-4 py-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground"
       >
-        {{ entry.label }}
-        <span class="tabular-nums normal-case text-muted-foreground/70">{{ entry.count }}</span>
+        <div role="cell" :aria-colspan="visibleColumns.length" class="flex items-center gap-2">
+          {{ entry.label }}
+          <span class="tabular-nums normal-case text-muted-foreground/70">{{ entry.count }}</span>
+        </div>
       </div>
       <div
         v-else
+        role="row"
         class="group grid items-center gap-2 border-t border-black/[0.04] px-4 py-3 cursor-pointer bg-gray-50 transition-colors"
         :style="gridTemplate"
         @click="emit('rowClick', entry.row)"
@@ -504,6 +544,7 @@ function defaultCell(col, row) {
         <div
           v-for="col in visibleColumns"
           :key="col.key"
+          role="cell"
           class="min-w-0"
           :class="col.alignRight ? 'text-right' : ''"
         >
@@ -527,11 +568,16 @@ function defaultCell(col, row) {
       </div>
     </template>
 
-    <!-- Loading skeleton (only when there are no rows yet) ----------- -->
+    <!-- Loading skeleton (only when there are no rows yet) -----------
+         Hidden rather than given roles. Six rows of pulsing grey carry no
+         information to read out, and announcing them as six empty rows would
+         be worse than silence; the table says it is `aria-busy` instead,
+         which is the same news in one word. -->
     <template v-if="showTable && loading && !displayedRows.length">
       <div
         v-for="n in 6"
         :key="`sk-${n}`"
+        aria-hidden="true"
         class="grid items-center gap-2 border-t border-black/[0.04] bg-gray-50 px-4 py-3"
         :style="gridTemplate"
       >
@@ -551,11 +597,14 @@ function defaultCell(col, row) {
     <!-- Empty -------------------------------------------------------- -->
     <div
       v-if="showTable && !displayedRows.length && !loading"
+      role="row"
       class="px-3 py-8 text-center text-sm text-muted-foreground"
     >
-      <slot name="empty">
-        {{ emptyText ?? t("shared.datatable.empty.default") }}
-      </slot>
+      <div role="cell" :aria-colspan="visibleColumns.length">
+        <slot name="empty">
+          {{ emptyText ?? t("shared.datatable.empty.default") }}
+        </slot>
+      </div>
     </div>
 
     </div>

package/dist/runtime/components/DataTable/DataTable.vue.d.ts

@@ -11,8 +11,11 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         data: T[];
         columns: DataTableColumn<T>[];
         rowKey: RowKey<T>;
+        /** `label` is the field's accessible name; it defaults to the placeholder
+         *  where the surface wrote one (see `searchLabel`). */
         search?: boolean | {
             placeholder?: string;
+            label?: string;
         };
         columnsMenu?: boolean;
         /** Mount the surface's own filter panel in the toolbar's Filter popover

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revenexx/studio-shared",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "type": "module",
   "description": "Shared revenexx Studio shell primitives (PageHeader, SidebarNav, StateCard, DataTable, …) + the platform provider contract (usePlatformAuth/usePlatformTenant). A Nuxt module — add it to `modules`.",
   "main": "./dist/module.mjs",
@@ -28,7 +28,7 @@
     "@nuxt/kit": "^4.0.0"
   },
   "peerDependencies": {
-    "@revenexx/studio": "^0.2.0",
+    "@revenexx/studio": "^0.2.3",
     "@revenexx/talkback-js": "^0.3.0",
     "@solar-icons/nuxt": "^1.2.0",
     "centrifuge": ">=5.2.0",