Fix a11y incomplete checks and glyph icons

packages/ui/src/components/data-table.tsx

@@ -40,6 +40,11 @@ import { Spinner } from "./spinner";
 import { cn } from "../lib/cn";
 import type { VariantProps } from "../lib/cva";
 import { createDataAttributes, createSlot } from "../lib/contracts";
+import {
+  SortAscendingIcon,
+  SortDescendingIcon,
+  SortUnsortedIcon
+} from "../lib/icons";
 import {
   dataTableBodyVariants,
   dataTableCellVariants,
@@ -546,9 +551,15 @@ function DataTableInner<TData>(
                             <span>{flexRender(header.column.columnDef.header, header.getContext())}</span>
                             <span
                               aria-hidden="true"
-                              className="text-xs text-[var(--color-muted-foreground)]"
+                              className="inline-flex items-center justify-center text-[var(--color-muted-foreground)]"
                             >
-                              {sortState === "asc" ? "↑" : sortState === "desc" ? "↓" : "↕"}
+                              {sortState === "asc" ? (
+                                <SortAscendingIcon className="size-3.5" />
+                              ) : sortState === "desc" ? (
+                                <SortDescendingIcon className="size-3.5" />
+                              ) : (
+                                <SortUnsortedIcon className="size-3.5" />
+                              )}
                             </span>
                             <span className="sr-only">
                               Sort by{" "}