CAMS-428: case detail accessibility

user-interface/src/case-detail/CaseDetailScreen.scss

@@ -1,52 +1,55 @@
 @import '../styles/theme.scss';
-.App {
-  .body {
-    .case-detail {
-      h4 {
-        margin-block-start: 0;
-        margin-block-end: 0;
+
+.case-detail {
+  h4 {
+    margin-block-start: 0;
+    margin-block-end: 0;
+  }
+
+  .link-icon {
+    margin-left: 0.25rem;
+    vertical-align: middle;
+  }
+  .case-card-list {
+    .case-card {
+      line-height: 1.5;
+
+      h3 {
+        margin-bottom: 0.5rem;
       }
 
-      .link-icon {
-        margin-left: .25rem;
-        vertical-align: middle;
+      li.transfer {
+        margin-bottom: 1rem;
       }
-      .case-card-list {
-        .case-card {
-          li.transfer {
-            margin-bottom: 1rem;
-          }
-          .case-detail-item-name {
-            padding-right: 0.5rem;
-          }
-          .transfer-court {
-            span {
-              white-space: nowrap;
-            }
-          }
-        }
+      .case-detail-item-name {
+        padding-right: .5rem;
       }
-      .assigned-staff-list {
-        .case-detail-region-id {
-          padding-bottom: 0.5rem;
-        }
-        .individual-assignee {
-          .vertical-divider {
-            padding: 0 0.5rem;
-          }
+      .transfer-court {
+        span {
+          white-space: nowrap;
         }
       }
-      ul {
-        padding-bottom: 0.5rem;
-      }
-      .filter-and-search {
-        .form-field {
-          padding-bottom: 1.5rem;
-        }
-        .docket-summary-facets label {
-          margin-bottom: 0.5rem;
-        }
+    }
+  }
+  .assigned-staff-list {
+    .case-detail-region-id {
+      padding-bottom: 0.5rem;
+    }
+    .individual-assignee {
+      .vertical-divider {
+        padding: 0 0.5rem;
       }
     }
   }
+  ul {
+    padding-bottom: 0.5rem;
+  }
+  .filter-and-search {
+    .form-field {
+      padding-bottom: 1.5rem;
+    }
+    .docket-summary-facets label {
+      margin-bottom: 0.5rem;
+    }
+  }
 }

user-interface/src/case-detail/CaseDetailScreen.test.tsx

@@ -7,6 +7,7 @@ import { formatDate } from '@/lib/utils/datetime';
 import { CaseDetail } from '@common/cams/cases';
 import { Debtor, DebtorAttorney } from '@common/cams/parties';
 import { MockAttorneys } from '@common/cams/test-utilities/attorneys.mock';
+import * as detailHeader from './panels/CaseDetailHeader';
 
 const caseId = '101-23-12345';
 
@@ -31,13 +32,57 @@ describe('Case Detail screen tests', () => {
 
   type MaybeString = string | undefined;
 
-  beforeAll(() => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
     process.env = {
       ...env,
       CAMS_PA11Y: 'true',
     };
   });
 
+  test('should render CaseDetailHeader', async () => {
+    const testCaseDetail: CaseDetail = {
+      caseId: caseId,
+      dxtrId: '123',
+      chapter: '15',
+      regionId: '02',
+      officeName: 'New York',
+      officeCode: '000',
+      caseTitle: 'The Beach Boys',
+      dateFiled: '01-04-1962',
+      judgeName: rickBHartName,
+      courtId: '01',
+      courtName: 'Court of Law',
+      courtDivisionName: 'Manhattan',
+      courtDivisionCode: '081',
+      debtorTypeLabel: 'Corporate Business',
+      petitionLabel: 'Voluntary',
+      closedDate: '01-08-1963',
+      dismissedDate: '01-08-1964',
+      assignments: [brianWilson, carlWilson],
+      debtor: {
+        name: 'Roger Rabbit',
+        address1: '123 Rabbithole Lane',
+        address2: 'Apt 117',
+        address3: 'Suite C',
+        cityStateZipCountry: 'Ciudad Obregón GR 25443, MX',
+      },
+      debtorAttorney,
+      groupDesignator: '01',
+      regionName: 'Test Region',
+    };
+    const headerSpy = vi.spyOn(detailHeader, 'default');
+
+    render(
+      <BrowserRouter>
+        <CaseDetailScreen caseDetail={testCaseDetail} />
+      </BrowserRouter>,
+    );
+    await waitFor(() => {
+      expect(headerSpy).toHaveBeenCalled();
+    });
+  });
+
   test('should display case title, case number, dates, assignees, judge name, and debtor for the case', async () => {
     const testCaseDetail: CaseDetail = {
       caseId: caseId,
@@ -77,11 +122,12 @@ describe('Case Detail screen tests', () => {
 
     await waitFor(
       async () => {
-        const title = screen.getByTestId('case-detail-heading');
-        expect(title.innerHTML).toEqual('The Beach Boys');
+        const title = screen.getByTestId('case-detail-heading-title');
+        const expectedTitle = ` - ${testCaseDetail.caseTitle}`;
+        expect(title.innerHTML).toEqual(expectedTitle);
 
         const caseNumber = document.querySelector('.case-number');
-        expect(caseNumber?.innerHTML).toEqual(getCaseNumber(caseId));
+        expect(caseNumber?.innerHTML).toEqual(caseId);
 
         const dateFiled = screen.getByTestId('case-detail-filed-date');
         expect(dateFiled).toHaveTextContent('Filed');
@@ -99,7 +145,7 @@ describe('Case Detail screen tests', () => {
         expect(chapter.innerHTML).toEqual('Voluntary Chapter&nbsp;15');
 
         const courtName = screen.getByTestId('court-name-and-district');
-        expect(courtName.innerHTML).toEqual('Court of Law - Manhattan');
+        expect(courtName.innerHTML).toEqual(`Court of Law (${testCaseDetail.courtDivisionName})`);
 
         const region = screen.getByTestId('case-detail-region-id');
         expect(region.innerHTML).toEqual('Region 2 - New York Office');
@@ -605,11 +651,11 @@ describe('Case Detail screen tests', () => {
         <CaseDetailScreen caseDetail={testCaseDetail} />
       </BrowserRouter>,
     );
-
+    const expectedTitle = ` - ${testCaseDetail.caseTitle}`;
     await waitFor(
       async () => {
-        const title = screen.getByTestId('case-detail-heading');
-        expect(title.innerHTML).toEqual('The Beach Boys');
+        const title = screen.getByTestId('case-detail-heading-title');
+        expect(title.innerHTML).toEqual(expectedTitle);
 
         const unassignedElement = document.querySelector('.unassigned-placeholder');
         expect(unassignedElement).toBeInTheDocument();
@@ -732,8 +778,8 @@ describe('Case Detail screen tests', () => {
   );
 
   const navRouteTestCases = [
-    ['case-detail/1234', 'basic-info-link'],
-    ['case-detail/1234/', 'basic-info-link'],
+    ['case-detail/1234', 'case-overview-link'],
+    ['case-detail/1234/', 'case-overview-link'],
     ['case-detail/1234/court-docket/', 'court-docket-link'],
   ];
 

user-interface/src/case-detail/CaseDetailScreen.tsx

@@ -26,7 +26,7 @@ import { MainContent } from '@/lib/components/cams/MainContent/MainContent';
 import { useApi2 } from '@/lib/hooks/UseApi2';
 
 const CaseDetailHeader = lazy(() => import('./panels/CaseDetailHeader'));
-const CaseDetailBasicInfo = lazy(() => import('./panels/CaseDetailBasicInfo'));
+const CaseDetailBasicInfo = lazy(() => import('./panels/CaseDetailOverview'));
 const CaseDetailCourtDocket = lazy(() => import('./panels/CaseDetailCourtDocket'));
 
 type SortDirection = 'Oldest' | 'Newest';

user-interface/src/case-detail/CaseDetailScreenSortAndFilter.test.tsx

@@ -96,7 +96,7 @@ describe('Case Detail sort, search, and filter tests', () => {
         expect(searchInput).toBeInTheDocument();
       });
 
-      const basicInfoLink = screen.getByTestId('basic-info-link');
+      const basicInfoLink = screen.getByTestId('case-overview-link');
       fireEvent.click(basicInfoLink as Element);
       await waitFor(() => {
         sortButton = screen.queryByTestId(sortButtonId);
@@ -139,7 +139,7 @@ describe('Case Detail sort, search, and filter tests', () => {
         expect(searchInput).toBeInTheDocument();
       });
 
-      const basicInfoLink = screen.getByTestId('basic-info-link');
+      const basicInfoLink = screen.getByTestId('case-overview-link');
       fireEvent.click(basicInfoLink as Element);
       await waitFor(() => {
         sortButton = screen.queryByTestId(sortButtonId);
@@ -183,7 +183,7 @@ describe('Case Detail sort, search, and filter tests', () => {
         expect(filterSelectElement).toBeInTheDocument();
       });
 
-      const basicInfoLink = screen.getByTestId('basic-info-link');
+      const basicInfoLink = screen.getByTestId('case-overview-link');
       fireEvent.click(basicInfoLink as Element);
       await waitFor(() => {
         filterSelectElement = document.querySelector(filterSelectClass);
@@ -220,7 +220,7 @@ describe('Case Detail sort, search, and filter tests', () => {
         expect(filterSelectElement).toBeInTheDocument();
       });
 
-      const basicInfoLink = screen.getByTestId('basic-info-link');
+      const basicInfoLink = screen.getByTestId('case-overview-link');
       fireEvent.click(basicInfoLink as Element);
       await waitFor(() => {
         filterSelectElement = document.querySelector(filterSelectClass);

user-interface/src/case-detail/panels/CaseDetailAuditHistory.test.tsx

@@ -133,7 +133,7 @@ describe('audit history tests', () => {
     render(<CaseDetailAuditHistory caseId={caseId} />);
 
     const emptyAssignments = await screen.findByTestId('empty-assignments-test-id');
-    expect(emptyAssignments).toHaveTextContent('There are no assignments in the case history.');
+    expect(emptyAssignments).toHaveTextContent('No changes have been made to this case');
 
     const historyTable = screen.queryByTestId('history-table');
     expect(historyTable).not.toBeInTheDocument();

user-interface/src/case-detail/panels/CaseDetailAuditHistory.tsx

@@ -110,14 +110,14 @@ export default function CaseDetailAuditHistory(props: CaseDetailAuditHistoryProp
   return (
     <div className="case-audit-history">
       <div className="history-type-title">
-        <h3>Audit History</h3>
+        <h3>Change History</h3>
         {isAuditHistoryLoading && <LoadingIndicator />}
         {!isAuditHistoryLoading && (
           <>
             {caseHistory.length < 1 && (
               <div data-testid="empty-assignments-test-id">
                 <Alert
-                  message="There are no assignments in the case history."
+                  message="No changes have been made to this case"
                   type={UswdsAlertStyle.Info}
                   role={'status'}
                   timeout={0}

user-interface/src/case-detail/panels/CaseDetailHeader.test.tsx

@@ -3,20 +3,22 @@ import { BrowserRouter } from 'react-router-dom';
 import CaseDetailHeader from './CaseDetailHeader';
 import CaseDetailScreen from '../CaseDetailScreen';
 import { MockData } from '@common/cams/test-utilities/mock-data';
+import { ResourceActions } from '@common/cams/actions';
+import { CaseDetail } from '@common/cams/cases';
+
+function basicRender(caseDetail: ResourceActions<CaseDetail>, isLoading: boolean) {
+  render(
+    <BrowserRouter>
+      <CaseDetailHeader caseDetail={caseDetail} isLoading={isLoading} caseId={caseDetail.caseId} />
+    </BrowserRouter>,
+  );
+}
 
 describe('Case Detail Header tests', () => {
   const testCaseDetail = MockData.getCaseDetail();
 
   test('should render loading info when isLoading is true', () => {
-    render(
-      <BrowserRouter>
-        <CaseDetailHeader
-          caseDetail={testCaseDetail}
-          isLoading={true}
-          caseId={testCaseDetail.caseId}
-        />
-      </BrowserRouter>,
-    );
+    basicRender(testCaseDetail, true);
 
     const isLoadingH1 = screen.getByTestId('case-detail-heading');
     const isLoadingH2 = screen.getByTestId('loading-h2');
@@ -26,21 +28,15 @@ describe('Case Detail Header tests', () => {
   });
 
   test('should render case detail info when isLoading is false', () => {
-    render(
-      <BrowserRouter>
-        <CaseDetailHeader
-          caseDetail={testCaseDetail}
-          isLoading={false}
-          caseId={testCaseDetail.caseId}
-        />
-      </BrowserRouter>,
-    );
+    basicRender(testCaseDetail, false);
 
     const isLoadingH1 = screen.getByTestId('case-detail-heading');
+    const isLoadingH2 = screen.getByTestId('case-detail-heading-title');
     const isFinishedH2 = screen.getByTestId('h2-with-case-info');
     const caseChapter = screen.getByTestId('case-chapter');
 
-    expect(isLoadingH1).toContainHTML(testCaseDetail.caseTitle);
+    expect(isLoadingH1).toContainHTML('Case Detail');
+    expect(isLoadingH2).toContainHTML(testCaseDetail.caseTitle);
     expect(isFinishedH2).toBeInTheDocument();
     expect(caseChapter.innerHTML).toEqual(
       `${testCaseDetail.petitionLabel} Chapter&nbsp;${testCaseDetail.chapter}`,
@@ -65,11 +61,15 @@ describe('Case Detail Header tests', () => {
     const app = await screen.findByTestId('app-component-test-id');
     await waitFor(
       async () => {
-        const title = await screen.findByTestId('case-detail-heading');
-        expect(title.innerHTML).toEqual(testCaseDetail.caseTitle);
+        const heading = await screen.findByTestId('case-detail-heading-title');
+        expect(heading.innerHTML).toEqual(` - ${testCaseDetail.caseTitle}`);
       },
       { timeout: 1000 },
     );
+    await waitFor(async () => {
+      const title = await screen.findByTestId('case-detail-heading-title');
+      expect(title.innerHTML).toEqual(` - ${testCaseDetail.caseTitle}`);
+    });
 
     let normalHeader = await screen.findByTestId('case-detail-header');
     expect(normalHeader).toBeInTheDocument();