UI updates for accessibility and compliance with WCAG 2.1

ui/.gitignore

@@ -40,3 +40,6 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+*:Zone.Identifier
+*.diff
+

ui/.prettierrc.json

@@ -6,7 +6,7 @@
   "printWidth": 120,
   "useTabs": false,
   "bracketSpacing": true,
-  "jsxBracketSameLine": false,
+  "bracketSameLine": false,
   "arrowParens": "always",
   "endOfLine": "lf",
   "singleAttributePerLine": true

ui/package.json

@@ -19,7 +19,7 @@
     "@swc/helpers": "^0.5.1",
     "@t3-oss/env-nextjs": "^0.7.0",
     "@tailwindcss/postcss": "^4.1.4",
-    "@tanstack/react-query": "^4.32.6",
+    "@tanstack/react-query": "4.32.x",
     "@tanstack/react-table": "^8.10.7",
     "@tanstack/table-core": "8.10.7",
     "@tisoap/react-flow-smart-edge": "^3.0.0",

ui/src/app/auth/success/page.tsx

@@ -31,7 +31,7 @@ export default function LoginSuccessCallback() {
 
   if (!idToken || !refreshToken || !redirectTo) {
     return (
-      <div className="flex h-screen w-screen items-center justify-center">
+      <div className="flex h-full w-full items-center justify-center">
         <PageError
           title="Auth callback failed"
           errorMessage="Missing id_token, refresh_token, or redirect_to search params"

ui/src/app/datasets/[bucket]/[name]/components/CollectionDetails.tsx

@@ -13,10 +13,8 @@
 //limitations under the License.
 
 //SPDX-License-Identifier: Apache-2.0
-import { useEffect, useRef, useState } from "react";
 
 import Link from "next/link";
-import { useWindowSize } from "usehooks-ts";
 
 import { OutlinedIcon } from "~/components/Icon";
 import { Colors, Tag } from "~/components/Tag";
@@ -31,105 +29,100 @@ interface DatasetDetailsProps {
 
 export const CollectionDetails = ({ dataset }: DatasetDetailsProps) => {
   const toolParamUpdater = useToolParamUpdater();
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [height, setHeight] = useState(0);
-  const windowSize = useWindowSize();
-
-  useEffect(() => {
-    if (containerRef?.current) {
-      setHeight(windowSize.height - containerRef.current.getBoundingClientRect().top - 12);
-    }
-  }, [windowSize.height]);
 
   return (
-    <div ref={containerRef}>
-      <div
-        className="h-full flex flex-col overflow-y-auto w-[33vw] max-w-150 body-component"
-        style={{
-          height: `${height}px`,
-        }}
+    <div className="h-full flex flex-col overflow-y-auto w-[33vw] max-w-150 body-component shadow-lg shadow-black/50 z-10">
+      <section
+        aria-labelledby="details-title"
+        className="h-full w-full flex flex-col dag-details-body"
       >
-        <div className="h-full w-full flex flex-col dag-details-body">
-          <div className="text-center p-3 font-semibold brand-header">{dataset.name}</div>
-          <div className="h-full">
-            <dl className="p-3">
-              <dt>ID</dt>
-              <dd>{dataset.id}</dd>
-              <dt>Bucket</dt>
-              <dd>
-                <Link
-                  key={dataset.bucket}
-                  href={`/datasets/${dataset.bucket}`}
-                  className="tag-container"
-                >
-                  <Tag color={Colors.platform}>{dataset.bucket}</Tag>
-                </Link>
-              </dd>
-              {dataset.created_by && (
-                <>
-                  <dt>Created By</dt>
-                  <dd>{dataset.created_by}</dd>
-                </>
+        <h2
+          id="details-title"
+          className="text-center p-global font-semibold brand-header"
+        >
+          {dataset.name}
+        </h2>
+        <div className="h-full">
+          <dl
+            className="p-global"
+            aria-labelledby="details-title"
+          >
+            <dt>ID</dt>
+            <dd>{dataset.id}</dd>
+            <dt>Bucket</dt>
+            <dd>
+              <Link
+                key={dataset.bucket}
+                href={`/datasets/${dataset.bucket}`}
+                className="tag-container"
+              >
+                <Tag color={Colors.platform}>{dataset.bucket}</Tag>
+              </Link>
+            </dd>
+            {dataset.created_by && (
+              <>
+                <dt>Created By</dt>
+                <dd>{dataset.created_by}</dd>
+              </>
+            )}
+            <dt>Created Date</dt>
+            <dd>{convertToReadableTimezone(dataset.created_date)}</dd>
+            <dt>Labels</dt>
+            <dd>
+              {Object.entries(dataset.labels).length > 0 ? (
+                <div className="flex flex-wrap gap-1">
+                  {Object.entries(dataset.labels).map(([key, value], index) => (
+                    <Tag
+                      key={index}
+                      color={Colors.tag}
+                    >
+                      {key}: {String(value)}
+                    </Tag>
+                  ))}
+                </div>
+              ) : (
+                <p>None</p>
               )}
-              <dt>Created Date</dt>
-              <dd>{convertToReadableTimezone(dataset.created_date)}</dd>
-              <dt>Labels</dt>
-              <dd>
-                {Object.entries(dataset.labels).length > 0 ? (
-                  <div className="flex flex-wrap gap-1">
-                    {Object.entries(dataset.labels).map(([key, value], index) => (
-                      <Tag
-                        key={index}
-                        color={Colors.tag}
-                      >
-                        {key}: {String(value)}
-                      </Tag>
-                    ))}
-                  </div>
-                ) : (
-                  <p>None</p>
-                )}
-              </dd>
-            </dl>
-          </div>
-          <div
-            className={`dag-actions body-footer w-full`}
-            role="list"
-            aria-label="Collection Actions"
+            </dd>
+          </dl>
+        </div>
+        <div
+          className={`dag-actions body-footer w-full`}
+          role="list"
+          aria-label="Collection Actions"
+        >
+          <button
+            className="btn btn-action whitespace-nowrap"
+            role="listitem"
+            onClick={() => {
+              toolParamUpdater({ tool: ToolType.Labels });
+            }}
+          >
+            <OutlinedIcon name="snippet_folder" />
+            Edit Labels
+          </button>
+          <button
+            className="btn btn-action whitespace-nowrap"
+            role="listitem"
+            onClick={() => {
+              toolParamUpdater({ tool: ToolType.Delete });
+            }}
+          >
+            <OutlinedIcon name="delete" />
+            Delete Collection
+          </button>
+          <button
+            className="btn btn-action whitespace-nowrap"
+            role="listitem"
+            onClick={() => {
+              toolParamUpdater({ tool: ToolType.Rename });
+            }}
           >
-            <button
-              className="btn btn-action whitespace-nowrap"
-              role="listitem"
-              onClick={() => {
-                toolParamUpdater({ tool: ToolType.Labels });
-              }}
-            >
-              <OutlinedIcon name="snippet_folder" />
-              Edit Labels
-            </button>
-            <button
-              className="btn btn-action whitespace-nowrap"
-              role="listitem"
-              onClick={() => {
-                toolParamUpdater({ tool: ToolType.Delete });
-              }}
-            >
-              <OutlinedIcon name="delete" />
-              Delete Collection
-            </button>
-            <button
-              className="btn btn-action whitespace-nowrap"
-              role="listitem"
-              onClick={() => {
-                toolParamUpdater({ tool: ToolType.Rename });
-              }}
-            >
-              <OutlinedIcon name="snippet_folder" />
-              Rename Collection
-            </button>
-          </div>
+            <OutlinedIcon name="snippet_folder" />
+            Rename Collection
+          </button>
         </div>
-      </div>
+      </section>
     </div>
   );
 };

ui/src/app/datasets/[bucket]/[name]/components/CollectionOverview.tsx

@@ -15,11 +15,12 @@
 //SPDX-License-Identifier: Apache-2.0
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 
 import { useSearchParams } from "next/navigation";
 
-import { DatasetTag } from "~/components/Tag";
+import PageHeader from "~/components/PageHeader";
+import { Colors, Tag } from "~/components/Tag";
 import { type DataInfoResponse, type DatasetTypesSchema } from "~/models";
 
 import { CollectionDetails } from "./CollectionDetails";
@@ -37,25 +38,20 @@ export default function CollectionOverview({
   const searchParams = useSearchParams();
   const toolParamUpdater = useToolParamUpdater();
   const [tool, setTool] = useState<ToolType | undefined>(undefined);
-  const headerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     setTool(searchParams.get(PARAM_KEYS.tool) as ToolType | undefined);
   }, [searchParams, toolParamUpdater]);
 
   return (
     <>
-      <div
-        className="page-header mb-3 flex items-center text-center gap-3"
-        ref={headerRef}
-      >
-        <DatasetTag isCollection={dataset.type === "COLLECTION"}>{dataset.type}</DatasetTag>
-        <h1>
+      <PageHeader>
+        <h2 className="grow">
           {dataset.bucket}/{dataset.name}
-        </h1>
-        <div className="w-25" />
-      </div>
-      <div className="grid h-full w-full gap-3 grid-cols-[1fr_auto] relative px-3">
+        </h2>
+        <Tag color={Colors.collection}>Collection</Tag>
+      </PageHeader>
+      <div className="grid h-full w-full grid-cols-[1fr_auto] relative">
         <CollectionVersionsTable collection={dataset} />
         <CollectionDetails dataset={dataset} />
       </div>

ui/src/app/datasets/[bucket]/[name]/components/CollectionVersionsTable.tsx

@@ -105,6 +105,7 @@ export const CollectionVersionsTable: React.FC<{
     getPaginationRowModel: getPaginationRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
+    getRowId: (row) => row.version,
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     onColumnFiltersChange: setColumnFilters,
@@ -123,7 +124,6 @@ export const CollectionVersionsTable: React.FC<{
     <TableBase
       columns={columns}
       table={table}
-      paddingOffset={12}
       className="body-component"
     >
       <TablePagination