feat(audit): Audit summary/detailed mode and blocker table pagination now support back button, and announce in SR

Author: azdak

apps/frontend/src/components/BlockersTable.tsx

@@ -9,7 +9,7 @@ import {
   VisibilityState,
 } from "@tanstack/react-table";
 import * as API from "aws-amplify/api";
-import { useState, useMemo, ChangeEvent, ChangeEventHandler } from "react";
+import { useState, useMemo, useEffect, useRef, ChangeEvent, ChangeEventHandler } from "react";
 //import { formatDate } from "../utils";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import * as ToggleGroup from "@radix-ui/react-toggle-group";
@@ -42,7 +42,7 @@ import style from "./BlockersTable.module.scss";
 import { SkeletonBlockersTable } from "./Skeleton";
 import { StyledLabeledInput } from "./StyledLabeledInput";
 import { useDebouncedCallback } from 'use-debounce';
-import { Link } from "react-router-dom";
+import { Link, useSearchParams } from "react-router-dom";
 import { BlockersTableColumnToggle } from "./BlockersTableColumnToggle";
 
 SyntaxHighlighter.registerLanguage("jsx", jsx);
@@ -101,8 +101,19 @@ declare module '@tanstack/table-core' {
 
 export const BlockersTable = ({ auditId, isShared }: BlockersTableProps) => {
   const queryClient = useQueryClient();
-  const [page, setPage] = useState(0);
-  const [pageSize, setPageSize] = useState(10);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const page = parseInt(searchParams.get("page") ?? "0", 10);
+  const pageSize = parseInt(searchParams.get("pageSize") ?? "10", 10);
+
+  const setPage = (updater: number | ((p: number) => number)) => {
+    setSearchParams((prev) => {
+      const next = new URLSearchParams(prev);
+      const newPage = typeof updater === "function" ? updater(page) : updater;
+      if (newPage === 0) next.delete("page");
+      else next.set("page", newPage.toString());
+      return next;
+    });
+  };
 
   const [selectedTags, setSelectedTags] = useState<Option[]>([]);
   const [availableTags, setAvailableTags] = useState<Option[]>([]); // Added to prevent content flicker while fetching
@@ -330,6 +341,23 @@ export const BlockersTable = ({ auditId, isShared }: BlockersTableProps) => {
     placeholderData: (previousData) => previousData,
   });
 
+  // Announce pagination changes to screen readers once the newly requested
+  // page has actually loaded (data still holds the previous page until then).
+  const announcedPageRef = useRef(page);
+  const announcedPageSizeRef = useRef(pageSize);
+  useEffect(() => {
+    if (!data?.pagination) return;
+    if (announcedPageRef.current !== page || announcedPageSizeRef.current !== pageSize) {
+      setAnnounceMessage(
+        `Showing ${data.blockers?.length ?? 0} of ${data.pagination.totalCount} blockers, page ${page + 1} of ${data.pagination.totalPages}`,
+        "normal",
+        true
+      );
+    }
+    announcedPageRef.current = page;
+    announcedPageSizeRef.current = pageSize;
+  }, [data]);
+
   const getElementTagFromContent = (content: string) => {
     const parser = new DOMParser();
     const extractedElementTag = `<${parser.parseFromString(content, "text/html").body?.firstChild?.nodeName.toLowerCase()}>`;
@@ -716,7 +744,13 @@ export const BlockersTable = ({ auditId, isShared }: BlockersTableProps) => {
   };
 
   const handlePageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
-    setPageSize(parseInt(e.target.value));
+    setSearchParams((prev) => {
+      const next = new URLSearchParams(prev);
+      const size = e.target.value;
+      if (size === "10") next.delete("pageSize");
+      else next.set("pageSize", size);
+      return next;
+    });
   };
 
   const handleSortByUrl = () => {

apps/frontend/src/components/Navigation.tsx

@@ -136,7 +136,7 @@ export const Navigation = () => {
     const tabIndex = focusEl?.getAttribute("tabindex");
     focusEl?.setAttribute("tabindex", tabIndex ?? "-1");
     focusEl?.focus();
-  }, [location]);
+  }, [location.pathname]);
 
   const isAuthRoute =
     location.pathname.startsWith("/login") ||

apps/frontend/src/routes/Audit.tsx

@@ -1,7 +1,7 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { formatDate, useGlobalStore, unformatId } from "../utils";
 import * as API from "aws-amplify/api";
-import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
+import { Link, useLocation, useNavigate, useParams, useSearchParams } from "react-router-dom";
 const apiClient = API.generateClient();
 import { useEffect, useState, ChangeEvent } from "react";
 import {
@@ -99,7 +99,16 @@ export const Audit = () => {
   const isShared = location.pathname.startsWith("/shared/");
   const isQuickScan = location.pathname.startsWith("/quick-scans/");
   const { setAnnounceMessage } = useGlobalStore();
-  const { blockersTableView, setBlockersTableView } = useGlobalStore();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const blockersTableView = searchParams.get("view") === "detailed" ? "detailed" : "summary";
+  const setBlockersTableView = (value: string) => {
+    setSearchParams((prev) => {
+      const next = new URLSearchParams(prev);
+      if (value === "detailed") next.set("view", "detailed");
+      else next.delete("view"); // "summary" is the default, keep the URL clean
+      return next;
+    });
+  };
 
   useEffect(() => {
     if (emailNotifications)

apps/frontend/src/utils/useGlobalStore.ts

@@ -20,8 +20,6 @@ interface EqualifyState {
   auditsTableCreatedByView: string;
   setAuditsTableCreatedByView: (val:string) => void;
   // blockers table
-  blockersTableView: string;
-  setBlockersTableView: (val: string) => void;
   blockerTableColumnVisibility: VisibilityState;
   setBlockerTableColumnVisibility: OnChangeFn<VisibilityState>;
   // screen reader announcer
@@ -44,8 +42,6 @@ export const useGlobalStore = create<EqualifyState>()(
       setAuditsTableView: (val) => set(() => ({ auditsTableView: val })),
       auditsTableCreatedByView: "user",
       setAuditsTableCreatedByView: (val) => set(() => ({auditsTableCreatedByView : val})),
-      blockersTableView: "summary",
-      setBlockersTableView: (val) => set(() => ({ blockersTableView: val })),
       authenticated: false,
       setAuthenticated: (val) => set(() => ({ authenticated: val })),
       ssoAuthenticated: false,