@antelopejs/dms 0.7.4 → 0.7.6

package/frontend-vue/layers/dms-layout/app/custom-pages/modules.vue

@@ -419,12 +419,27 @@ const summaryCards = computed<StatGroupItem[]>(() =>
             class="flex min-h-[228px] flex-col gap-3 p-4"
           >
             <div class="flex items-start justify-between">
-              <USkeleton class="size-9 rounded-[10px]" />
-              <USkeleton class="h-5 w-12 rounded-full" />
+              <USkeleton
+                :aria-label="t('dms.a11y.loading')"
+                class="size-9 rounded-[10px]"
+              />
+              <USkeleton
+                :aria-label="t('dms.a11y.loading')"
+                class="h-5 w-12 rounded-full"
+              />
             </div>
-            <USkeleton class="h-2.5 w-4/5" />
-            <USkeleton class="h-2.5 w-3/5" />
-            <USkeleton class="mt-auto h-4 w-2/5" />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="h-2.5 w-4/5"
+            />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="h-2.5 w-3/5"
+            />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="mt-auto h-4 w-2/5"
+            />
           </DmsCard>
         </div>
 

package/frontend-vue/layers/dms-ui/app/build/components/chart/internal/ChartSkeleton.vue

@@ -22,6 +22,8 @@ const PERCENT_UNIT = "%";
 const RING_SIZE = "min(78%, 16rem)";
 const RING_HOLE_MASK =
   "radial-gradient(circle, transparent 54%, #000 calc(54% + 1px))";
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -32,6 +34,7 @@ const RING_HOLE_MASK =
     aria-busy="true"
   >
     <USkeleton
+      :aria-label="t('dms.a11y.loading')"
       class="aspect-square rounded-full"
       :style="{
         height: RING_SIZE,
@@ -47,6 +50,7 @@ const RING_HOLE_MASK =
     aria-busy="true"
   >
     <USkeleton
+      :aria-label="t('dms.a11y.loading')"
       v-for="(barHeight, index) in GHOST_BAR_HEIGHTS"
       :key="index"
       class="flex-1 rounded-t-[4px] rounded-b-none"

package/frontend-vue/layers/dms-ui/app/build/components/containers/drawer/DynamicDrawer.vue

@@ -115,6 +115,8 @@ function onContentPending() {
 function onContentResolve() {
   isContentLoading.value = false;
 }
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -191,8 +193,14 @@ function onContentResolve() {
                 :key="field"
                 class="flex flex-col gap-2"
               >
-                <USkeleton class="h-3 w-24" />
-                <USkeleton class="h-8 w-full" />
+                <USkeleton
+                  :aria-label="t('dms.a11y.loading')"
+                  class="h-3 w-24"
+                />
+                <USkeleton
+                  :aria-label="t('dms.a11y.loading')"
+                  class="h-8 w-full"
+                />
               </div>
             </div>
           </template>

package/frontend-vue/layers/dms-ui/app/build/components/containers/modal/DynamicModal.vue

@@ -137,6 +137,8 @@ function onContentPending() {
 function onContentResolve() {
   isContentLoading.value = false;
 }
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -205,8 +207,11 @@ function onContentResolve() {
               :key="field"
               class="flex flex-col gap-2"
             >
-              <USkeleton class="h-3 w-24" />
-              <USkeleton class="h-8 w-full" />
+              <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-24" />
+              <USkeleton
+                :aria-label="t('dms.a11y.loading')"
+                class="h-8 w-full"
+              />
             </div>
           </div>
         </template>

package/frontend-vue/layers/dms-ui/app/build/components/form/FormSectionNav.vue

@@ -1,8 +1,12 @@
 <script setup lang="ts">
-import type {
-  FormSectionLayout,
-  FormSectionState,
+import { computed, useId } from "vue";
+import {
+  type FormSectionLayout,
+  type FormSectionNavGroup,
+  type FormSectionState,
+  groupSectionsForNav,
 } from "../../composables/form/formSections";
+import DmsEyebrow from "../../../components/section-header/Eyebrow.vue";
 
 type FormSectionNavVariant = "list" | "chips";
 
@@ -21,6 +25,18 @@ const emit = defineEmits<{ select: [sectionId: string] }>();
 const { t } = useI18n();
 const { processI18n } = useTranslation();
 
+// The side list reads its sections in titled runs (`navGroup`); the row of
+// chips has no room for headings and lists them all in one run.
+const GROUPS_CLASSES: Record<FormSectionNavVariant, string> = {
+  list: "flex flex-col gap-4",
+  chips: "",
+};
+
+const GROUP_CLASSES: Record<FormSectionNavVariant, string> = {
+  list: "grid gap-1",
+  chips: "contents",
+};
+
 const VARIANT_CLASSES: Record<FormSectionNavVariant, string> = {
   list: "flex flex-col gap-0.5",
   chips: "flex gap-1.5 overflow-x-auto pb-1",
@@ -37,6 +53,17 @@ const ACTIVE_CLASSES: Record<FormSectionNavVariant, string> = {
   chips: "border-accented bg-elevated text-highlighted",
 };
 
+const groupIdPrefix = useId();
+const groups = computed<FormSectionNavGroup[]>(() =>
+  props.variant === "list"
+    ? groupSectionsForNav(props.sections)
+    : [{ sections: props.sections }],
+);
+
+function groupHeadingId(index: number): string {
+  return `${groupIdPrefix}-group-${index}`;
+}
+
 function stateLabel(state: FormSectionState | undefined): string | undefined {
   if (state?.invalidCount) {
     const count = state.invalidCount;
@@ -52,43 +79,63 @@ function onSelect(event: MouseEvent, sectionId: string): void {
 </script>
 
 <template>
-  <nav :aria-label="t('dms.form.sections.nav')">
-    <ul :class="VARIANT_CLASSES[props.variant]">
-      <li v-for="section in props.sections" :key="section.id">
-        <a
-          :href="`#${props.anchorId(section.id)}`"
-          :class="[
-            ITEM_CLASSES[props.variant],
-            section.id === props.activeId && ACTIVE_CLASSES[props.variant],
-          ]"
-          :aria-current="section.id === props.activeId ? 'location' : undefined"
-          @click="onSelect($event, section.id)"
-        >
-          <UIcon
-            v-if="section.icon && props.variant === 'list'"
-            :name="section.icon"
-            class="size-4 shrink-0"
-          />
-          <span class="truncate">{{ processI18n(section.label) }}</span>
-          <!-- Read by its sr-only label below, not twice. -->
-          <span
-            v-if="props.states[section.id]?.invalidCount"
-            class="text-error ms-auto inline-flex items-center gap-1 font-mono text-[11px]"
-            aria-hidden="true"
+  <nav
+    :aria-label="t('dms.form.sections.nav')"
+    :class="GROUPS_CLASSES[props.variant]"
+  >
+    <div
+      v-for="(group, groupIndex) in groups"
+      :key="group.sections[0]?.id ?? groupIndex"
+      :class="GROUP_CLASSES[props.variant]"
+    >
+      <DmsEyebrow
+        v-if="group.label"
+        :id="groupHeadingId(groupIndex)"
+        :label="processI18n(group.label)"
+        class="px-2.5"
+      />
+      <ul
+        :class="VARIANT_CLASSES[props.variant]"
+        :aria-labelledby="group.label ? groupHeadingId(groupIndex) : undefined"
+      >
+        <li v-for="section in group.sections" :key="section.id">
+          <a
+            :href="`#${props.anchorId(section.id)}`"
+            :class="[
+              ITEM_CLASSES[props.variant],
+              section.id === props.activeId && ACTIVE_CLASSES[props.variant],
+            ]"
+            :aria-current="
+              section.id === props.activeId ? 'location' : undefined
+            "
+            @click="onSelect($event, section.id)"
           >
-            <span class="bg-error size-1.5 rounded-full" aria-hidden="true" />
-            {{ props.states[section.id]?.invalidCount }}
-          </span>
-          <span
-            v-else-if="props.states[section.id]?.dirty"
-            class="bg-warning ms-auto size-1.5 shrink-0 rounded-full"
-            aria-hidden="true"
-          />
-          <span v-if="stateLabel(props.states[section.id])" class="sr-only">
-            {{ stateLabel(props.states[section.id]) }}
-          </span>
-        </a>
-      </li>
-    </ul>
+            <UIcon
+              v-if="section.icon && props.variant === 'list'"
+              :name="section.icon"
+              class="size-4 shrink-0"
+            />
+            <span class="truncate">{{ processI18n(section.label) }}</span>
+            <!-- Read by its sr-only label below, not twice. -->
+            <span
+              v-if="props.states[section.id]?.invalidCount"
+              class="text-error ms-auto inline-flex items-center gap-1 font-mono text-[11px]"
+              aria-hidden="true"
+            >
+              <span class="bg-error size-1.5 rounded-full" aria-hidden="true" />
+              {{ props.states[section.id]?.invalidCount }}
+            </span>
+            <span
+              v-else-if="props.states[section.id]?.dirty"
+              class="bg-warning ms-auto size-1.5 shrink-0 rounded-full"
+              aria-hidden="true"
+            />
+            <span v-if="stateLabel(props.states[section.id])" class="sr-only">
+              {{ stateLabel(props.states[section.id]) }}
+            </span>
+          </a>
+        </li>
+      </ul>
+    </div>
   </nav>
 </template>

package/frontend-vue/layers/dms-ui/app/build/components/skeleton/RowSkeleton.vue

@@ -18,6 +18,8 @@ const props = withDefaults(defineProps<RowSkeletonProps>(), {
   linesClass: "space-y-1.5",
   isCentered: false,
 });
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -26,9 +28,14 @@ const props = withDefaults(defineProps<RowSkeletonProps>(), {
     :class="props.isCentered ? 'items-center' : 'items-start'"
     aria-hidden="true"
   >
-    <USkeleton class="shrink-0" :class="props.well" />
+    <USkeleton
+      :aria-label="t('dms.a11y.loading')"
+      class="shrink-0"
+      :class="props.well"
+    />
     <div class="min-w-0 flex-1" :class="props.linesClass">
       <USkeleton
+        :aria-label="t('dms.a11y.loading')"
         v-for="(line, index) in props.lines"
         :key="index"
         :class="line"

package/frontend-vue/layers/dms-ui/app/build/components/stat/StatCell.vue

@@ -26,7 +26,10 @@ interface StatCellProps {
   /** Icon of the well; the cell has no well without one. */
   icon?: string;
   tone?: IconWellTone;
-  /** One line under the value. */
+  /**
+   * The line under the value; a longer one wraps to a second line before its
+   * ellipsis, the row taking the height of its tallest cell.
+   */
   detail?: string;
   /** Tone of the detail line (`neutral` = muted text). */
   detailTone?: Tone;
@@ -91,6 +94,8 @@ const cellClass = computed(() => {
   ];
 });
 const detailClass = computed(() => DMS_TONE_TEXT[props.detailTone]);
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -101,6 +106,7 @@ const detailClass = computed(() => DMS_TONE_TEXT[props.detailTone]);
   >
     <template v-if="isMd">
       <USkeleton
+        :aria-label="t('dms.a11y.loading')"
         v-if="props.placeholder || (props.loading && props.icon)"
         class="size-10 shrink-0 rounded-[10px]"
       />
@@ -113,9 +119,18 @@ const detailClass = computed(() => DMS_TONE_TEXT[props.detailTone]);
       <!-- A placeholder keeps the loaded lines' boxes (eyebrow 13px, value
            24px, detail 16px), so the card keeps its height when it lands. -->
       <div v-if="props.placeholder" class="grid flex-1 gap-[3px]">
-        <USkeleton class="my-[1.5px] h-2.5 w-20" />
-        <USkeleton class="my-px h-[22px] w-10" />
-        <USkeleton class="my-0.5 h-3 w-24" />
+        <USkeleton
+          :aria-label="t('dms.a11y.loading')"
+          class="my-[1.5px] h-2.5 w-20"
+        />
+        <USkeleton
+          :aria-label="t('dms.a11y.loading')"
+          class="my-px h-[22px] w-10"
+        />
+        <USkeleton
+          :aria-label="t('dms.a11y.loading')"
+          class="my-0.5 h-3 w-24"
+        />
       </div>
       <div v-else class="grid min-w-0 flex-1 gap-[3px]">
         <DmsEyebrow
@@ -124,7 +139,11 @@ const detailClass = computed(() => DMS_TONE_TEXT[props.detailTone]);
           :class="wraps"
           :label="props.eyebrow"
         />
-        <USkeleton v-if="props.loading" class="h-[22px] w-16" />
+        <USkeleton
+          :aria-label="t('dms.a11y.loading')"
+          v-if="props.loading"
+          class="h-[22px] w-16"
+        />
         <p
           v-else
           class="text-highlighted text-[22px] leading-[1.1] font-[650] tracking-[-0.035em] tabular-nums transition-opacity"
@@ -134,8 +153,8 @@ const detailClass = computed(() => DMS_TONE_TEXT[props.detailTone]);
         </p>
         <p
           v-if="props.detail && !props.loading"
-          class="truncate text-xs"
-          :class="[wraps, detailClass]"
+          class="line-clamp-2 text-xs [overflow-wrap:anywhere]"
+          :class="detailClass"
         >
           {{ props.detail }}
         </p>
@@ -145,6 +164,7 @@ const detailClass = computed(() => DMS_TONE_TEXT[props.detailTone]);
 
     <template v-else>
       <USkeleton
+        :aria-label="t('dms.a11y.loading')"
         v-if="props.placeholder || (props.loading && props.icon)"
         class="size-8 shrink-0 rounded-[9px]"
       />
@@ -157,13 +177,26 @@ const detailClass = computed(() => DMS_TONE_TEXT[props.detailTone]);
       <!-- Each placeholder line keeps the loaded line's box (eyebrow 11px,
            value 19px, detail 16px), so the group keeps its height. -->
       <div v-if="props.placeholder" class="grid flex-1 gap-0.5">
-        <USkeleton class="my-px h-[9px] w-16" />
-        <USkeleton class="my-[2.5px] h-3.5 w-24" />
-        <USkeleton class="my-0.5 h-3 w-20" />
+        <USkeleton
+          :aria-label="t('dms.a11y.loading')"
+          class="my-px h-[9px] w-16"
+        />
+        <USkeleton
+          :aria-label="t('dms.a11y.loading')"
+          class="my-[2.5px] h-3.5 w-24"
+        />
+        <USkeleton
+          :aria-label="t('dms.a11y.loading')"
+          class="my-0.5 h-3 w-20"
+        />
       </div>
       <span v-else class="grid min-w-0 gap-0.5">
         <DmsEyebrow as="span" size="xs" :label="props.eyebrow" />
-        <USkeleton v-if="props.loading" class="my-0.5 h-3.5 w-24" />
+        <USkeleton
+          :aria-label="t('dms.a11y.loading')"
+          v-if="props.loading"
+          class="my-0.5 h-3.5 w-24"
+        />
         <b
           v-else
           class="text-highlighted text-sm leading-[1.35] font-semibold whitespace-nowrap tabular-nums transition-opacity"
@@ -172,8 +205,16 @@ const detailClass = computed(() => DMS_TONE_TEXT[props.detailTone]);
           <slot name="value">{{ props.value }}</slot>
         </b>
         <template v-if="props.detail">
-          <USkeleton v-if="props.loading" class="h-3 w-20" />
-          <small v-else class="truncate text-xs" :class="detailClass">
+          <USkeleton
+            :aria-label="t('dms.a11y.loading')"
+            v-if="props.loading"
+            class="h-3 w-20"
+          />
+          <small
+            v-else
+            class="line-clamp-2 text-xs [overflow-wrap:anywhere]"
+            :class="detailClass"
+          >
             {{ props.detail }}
           </small>
         </template>

package/frontend-vue/layers/dms-ui/app/build/components/table/Pagination.vue

@@ -130,8 +130,14 @@ const uiTablePagination = computed(() => uiTablePaginationVariant());
     aria-hidden="true"
     :class="[uiTablePagination.root(), uiTablePagination.placeholderRoot()]"
   >
-    <USkeleton :class="uiTablePagination.placeholderCount()" />
-    <USkeleton :class="uiTablePagination.placeholderPager()" />
+    <USkeleton
+      :aria-label="t('dms.a11y.loading')"
+      :class="uiTablePagination.placeholderCount()"
+    />
+    <USkeleton
+      :aria-label="t('dms.a11y.loading')"
+      :class="uiTablePagination.placeholderPager()"
+    />
   </div>
   <nav
     v-else-if="rowCount"
@@ -183,6 +189,7 @@ const uiTablePagination = computed(() => uiTablePaginationVariant());
       </span>
       {{ summary.label }}
       <USkeleton
+        :aria-label="t('dms.a11y.loading')"
         v-if="summary.value === undefined"
         aria-hidden="true"
         :class="uiTablePagination.summaryPlaceholder()"

package/frontend-vue/layers/dms-ui/app/build/components/table/Table.vue

@@ -29,6 +29,7 @@ import {
 import type {
   CustomButton,
   TableViewDisplayCapabilities,
+  TableViewDisplayReorder,
   TableViewEmptyStatesConfig,
 } from "../../../composables/table-view/types";
 import type {
@@ -44,6 +45,10 @@ import type { ResolvedQuickFilter } from "../../composables/table-view/utils/qui
 import type { ClearableTableFilters } from "../../composables/table/utils/clearTableFilters";
 import type { EventHookOn } from "@vueuse/core";
 import type { VNodeChild } from "vue";
+import {
+  REORDER_HANDLE_CLASS,
+  useReorderHandles,
+} from "../../composables/table-view/useReorderHandles";
 
 export interface Data {
   [key: string]: unknown;
@@ -82,12 +87,7 @@ export interface TableAccumulation {
 }
 
 /** Rows ordered by hand (backend `reorder`): a handle moves a row. */
-export interface TableReorder {
-  /** Off while a search, a filter or a tab narrows the rows. */
-  enabled: boolean;
-  /** Moves the row at `from` to `to`, within the page. */
-  move: (from: number, to: number) => void;
-}
+export type TableReorder = TableViewDisplayReorder;
 
 /** Where a table draws its views (see `TableProps.viewsPlacement`). */
 export type TableViewsPlacement = "band" | "header";
@@ -531,12 +531,15 @@ const theme = tv({
     handleHeadCell: `${HEADER_MATCH_BG} border-b-default w-8 border-b p-0`,
     handleCell:
       "border-b-muted w-8 border-b ps-2 pe-0 in-[tr:last-child]:border-b-0",
-    handle:
-      "inline-flex size-6 cursor-grab items-center justify-center rounded text-dimmed hover:text-highlighted focus-visible:outline-2 focus-visible:outline-(--dms-accent-line) disabled:cursor-not-allowed disabled:opacity-40 [&>svg]:size-4",
+    handle: REORDER_HANDLE_CLASS,
   },
   variants: {
+    // A wrapped cell grows its row past the 44px band: it keeps the band's
+    // breathing room above and below its lines instead of touching the
+    // hairlines (one line still fits the band, so its row keeps its height).
     cellWrap: {
       true: {
+        rowCell: "py-2.5",
         rowSpan: "line-clamp-none whitespace-normal [overflow-wrap:anywhere]",
       },
     },
@@ -809,23 +812,10 @@ const leadingCellCount = computed(
   () => (hasPresenceRail.value ? 1 : 0) + (props.reorder ? 1 : 0),
 );
 
-// Moving rows: the row dragged by its handle, dropped on another row; the
-// arrow keys on a handle move its row by one.
-const draggedRowIndex = ref<number | undefined>();
-const dropRow = (index: number) => {
-  const from = draggedRowIndex.value;
-  draggedRowIndex.value = undefined;
-  if (from !== undefined && props.reorder?.enabled) {
-    props.reorder.move(from, index);
-  }
-};
-const stepRow = (index: number, step: number) => {
-  const target = index + step;
-  const count = table.getRowModel().rows.length;
-  if (props.reorder?.enabled && target >= 0 && target < count) {
-    props.reorder.move(index, target);
-  }
-};
+const reorderHandles = useReorderHandles({
+  reorder: () => props.reorder,
+  count: () => table.getRowModel().rows.length,
+});
 
 // Pinned columns stick only while they cover at most 60% of the visible scroll
 // area: on a phone, labelled row actions or a wide pinned set would otherwise
@@ -1263,6 +1253,7 @@ defineShortcuts({
             {{ caption }}
           </span>
           <USkeleton
+            :aria-label="t('dms.a11y.loading')"
             v-if="isFirstPageLoading"
             aria-hidden="true"
             :class="uiTable.captionCountPlaceholder()"
@@ -1497,8 +1488,8 @@ defineShortcuts({
                       @dblclick="handleRowDoubleClick(row.original)"
                       @mouseenter="handleRowHover(row)"
                       @mouseleave="handleRowLeave"
-                      @dragover="reorder?.enabled && $event.preventDefault()"
-                      @drop="dropRow(row.index)"
+                      @dragover="reorderHandles.allowDrop"
+                      @drop="reorderHandles.drop(row.index)"
                     >
                       <td
                         v-if="hasPresenceRail"
@@ -1515,20 +1506,8 @@ defineShortcuts({
                       />
                       <td v-if="reorder" :class="uiTable.handleCell()">
                         <button
-                          type="button"
-                          :draggable="reorder.enabled"
-                          :disabled="!reorder.enabled"
-                          :aria-label="t('dms.table.reorder.move')"
-                          :title="
-                            reorder.enabled
-                              ? t('dms.table.reorder.move')
-                              : t('dms.table.reorder.disabled')
-                          "
+                          v-bind="reorderHandles.handleFor(row.index)"
                           :class="uiTable.handle()"
-                          @dragstart="draggedRowIndex = row.index"
-                          @dragend="draggedRowIndex = undefined"
-                          @keydown.up.prevent="stepRow(row.index, -1)"
-                          @keydown.down.prevent="stepRow(row.index, 1)"
                         >
                           <UIcon name="i-ph-dots-six-vertical" />
                         </button>
@@ -1542,6 +1521,8 @@ defineShortcuts({
                             pinned: getPinnedVariant(cell.column),
                             loading,
                             rowClickable: isRowClickable(row.original),
+                            cellWrap: (cell.column.columnDef as TableColumn<T>)
+                              .cellWrap,
                           })
                         "
                         :style="{
@@ -1616,6 +1597,7 @@ defineShortcuts({
                     :class="uiTable.rowCell()"
                   >
                     <USkeleton
+                      :aria-label="t('dms.a11y.loading')"
                       v-if="column.columnDef.meta"
                       :class="uiTable.skeletonCell()"
                       :style="{ width: skeletonWidth(rowIndex, columnIndex) }"

package/frontend-vue/layers/dms-ui/app/build/components/table/Tabs.vue

@@ -196,6 +196,7 @@ const countFormat = computed(() => new Intl.NumberFormat(locale.value));
         {{ tab.label }}
       </span>
       <USkeleton
+        :aria-label="t('dms.a11y.loading')"
         v-if="tab.countPending"
         aria-hidden="true"
         :class="ui.countPlaceholder()"

package/frontend-vue/layers/dms-ui/app/build/components/table/Views.vue

@@ -243,6 +243,7 @@ const openTab = (id: string) => emit("open", id);
         />
         {{ view.label }}
         <USkeleton
+          :aria-label="t('dms.a11y.loading')"
           v-if="view.countPending"
           aria-hidden="true"
           class="h-3 w-4 rounded-[3px]"

package/frontend-vue/layers/dms-ui/app/build/components/table-view/CardGridSkeleton.vue

@@ -21,6 +21,8 @@ const MAX_CARD_COUNT = 12;
 const cardCount = computed(() =>
   Math.max(1, Math.min(props.count, MAX_CARD_COUNT)),
 );
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -34,13 +36,22 @@ const cardCount = computed(() =>
       class="border-default @container rounded-[10px] border bg-(--ui-bg) p-3.5 text-[12.5px]"
     >
       <div class="flex items-center gap-2.5">
-        <USkeleton class="size-7 shrink-0 rounded-[7px]" />
+        <USkeleton
+          :aria-label="t('dms.a11y.loading')"
+          class="size-7 shrink-0 rounded-[7px]"
+        />
         <div class="min-w-0 flex-1">
           <div class="text-[13px]">
-            <USkeleton class="inline-block h-3 w-3/5 align-middle" />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="inline-block h-3 w-3/5 align-middle"
+            />
           </div>
           <div class="font-mono text-[11px]">
-            <USkeleton class="inline-block h-2 w-2/5 align-middle" />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="inline-block h-2 w-2/5 align-middle"
+            />
           </div>
         </div>
       </div>
@@ -49,10 +60,16 @@ const cardCount = computed(() =>
       >
         <div v-for="field in props.fields" :key="field" class="min-w-0">
           <div :class="['font-mono', props.labelClass]">
-            <USkeleton class="inline-block h-2 w-1/2 align-middle" />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="inline-block h-2 w-1/2 align-middle"
+            />
           </div>
           <div class="mt-0.5">
-            <USkeleton class="inline-block h-2.5 w-4/5 align-middle" />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="inline-block h-2.5 w-4/5 align-middle"
+            />
           </div>
         </div>
       </div>