[Warnings/Errors] Design and accessibility improvements (#576)

Close #568 ## Changes - [Accessibility] Fix labelling issue in DSR Table/Pagination - Dependent upon cfpb/design-system-react#356 - `Upload a new file` now a secondary button ([should be a link but I couldn't get the styling overrides to play nice with one another](#575)) - Update primary button label: `Download Report (CSV)` - Remove green header border on Filing pages ## Screenshots |Change|Screenshot| |---|---| |Button label (Warnings)|<img width="739" alt="Screenshot 2024-05-31 at 4 04 11 PM" src="https://github.com/cfpb/sbl-frontend/assets/2592907/be87effb-1174-446a-89e8-44433b0a1c71">| |Button label (Errors)|<img width="767" alt="Screenshot 2024-05-31 at 4 09 02 PM" src="https://github.com/cfpb/sbl-frontend/assets/2592907/a5b4b6d1-f4c7-4be5-8ada-5f9d596026ea">| |Remove green header border on filing|<img width="1230" alt="Screenshot 2024-06-03 at 9 54 54 AM" src="https://github.com/cfpb/sbl-frontend/assets/2592907/e404f67b-3ff6-46a6-825f-fab60e574260">| |Accessibility for pagination: input's `for` label aligns with table id|<img width="974" alt="Screenshot 2024-06-03 at 9 53 03 AM" src="https://github.com/cfpb/sbl-frontend/assets/2592907/35732b11-95ac-4627-a12e-00331896848b">| --------- Co-authored-by: Bill Himmelsbach <[email protected]>
cfpb · Jun 6, 2024 · 46b3fea · 46b3fea
1 parent 2e6b0e4
commit 46b3fea
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 34 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -51,7 +51,6 @@ const PaperworkNotice = lazy(
   async () => import('pages/Filing/PaperworkNotice'),
 );
 const Summary = lazy(async () => import('pages/Summary/Summary'));
-const PointOfContact = lazy(async () => import('pages/PointOfContact'));
 const TypesFinancialInstitutions = lazy(
   async () => import('pages/TypesFinancialInstitutions'),
 );
@@ -108,6 +107,9 @@ export function NavItem({
 
 function BasicLayout(): ReactElement {
   const headerLinks = [...useHeaderAuthLinks()];
+  const location = useLocation();
+
+  const isFilingPage = Boolean(location.pathname.startsWith('/filing/'));
 
   return (
     <div className='flex flex-col bg-white'>
@@ -123,7 +125,7 @@ function BasicLayout(): ReactElement {
             />
           </div>
         </div>
-        <PageHeader links={headerLinks} />
+        <PageHeader links={headerLinks} withBottomBorder={!isFilingPage} />
         <Outlet />
       </div>
       <div>

diff --git a/src/components/StepIndicator.tsx b/src/components/StepIndicator.tsx
@@ -85,7 +85,7 @@ export function StepIndicator({
 }: StepIndicatorPropertyTypes): JSX.Element {
   return (
     <div className='step-indicator' aria-label='progress'>
-      <div className='mt-10 flex w-full flex-1 grow flex-row p-0'>
+      <div className='flex w-full flex-1 grow flex-row p-0'>
         {steps.map((step, stepIndex) => (
           <Step key={step.label} {...step} hasMargin={stepIndex > 0} />
         ))}

diff --git a/src/pages/Filing/FilingApp/FieldEntry.tsx b/src/pages/Filing/FilingApp/FieldEntry.tsx
@@ -3,27 +3,27 @@ import { Heading, Pagination, Table } from 'design-system-react';
 import { useState } from 'react';
 import Markdown from 'react-markdown';
 import type { Detail, Field } from 'types/filingTypes';
-import { Hundred, ITEMS_PER_PAGE, One } from 'utils/constants';
+import { ITEMS_PER_PAGE, One } from 'utils/constants';
 import useIsOverflowing from 'utils/useIsOverflowing';
 
 // NOTE: To be removed after table styling finalized
-const maxUidTestRows = [...Array.from({ length: Hundred }).keys()].map(
-  (item, index) => [
-    index + 10_000,
-    '4234000O91BZ2SUPERCALIFRAGILISTICEXPIALI45CHARS',
-    '4234000O91BZ2SUPERCALIFRAGILISTICEXPIALI45CHARS',
-  ],
-);
+// const maxUidTestRows = [...Array.from({ length: Hundred }).keys()].map(
+//   (item, index) => [
+//     index + 10_000,
+//     '4234000O91BZ2SUPERCALIFRAGILISTICEXPIALI45CHARS',
+//     '4234000O91BZ2SUPERCALIFRAGILISTICEXPIALI45CHARS',
+//   ],
+// );
 
-const wordBreakTestRows = [
-  [
-    'Row 1, Column 1',
-    'Row 1, Column 123456789TESTBANK123C2  123456789TESTBANK123C2  123456789TESTBANK123C2 123456789TESTBANK123C2 123456789TESTBANK123C2 123456789TESTBANK123C2',
-    'Row 1, Column 3 123456789TESTBANK123C2123456789TESTBANK123C2123456789TESTBANK123C2123456789TESTBANK123C2',
-  ],
-  ['Row 2, Column 1', 'Row 2, Column 2', 'Row 2, Column 3'],
-  ['Row 3, Column 1', 'Row 3, Column 2', 'Row 3, Column 3'],
-];
+// const wordBreakTestRows = [
+//   [
+//     'Row 1, Column 1',
+//     'Row 1, Column 123456789TESTBANK123C2  123456789TESTBANK123C2  123456789TESTBANK123C2 123456789TESTBANK123C2 123456789TESTBANK123C2 123456789TESTBANK123C2',
+//     'Row 1, Column 3 123456789TESTBANK123C2123456789TESTBANK123C2123456789TESTBANK123C2123456789TESTBANK123C2',
+//   ],
+//   ['Row 2, Column 1', 'Row 2, Column 2', 'Row 2, Column 3'],
+//   ['Row 3, Column 1', 'Row 3, Column 2', 'Row 3, Column 3'],
+// ];
 
 interface FieldEntryProperties {
   fieldObject: Detail;
@@ -122,6 +122,7 @@ function FieldEntry({ fieldObject }: FieldEntryProperties): JSX.Element {
       </div>
       <div className='mb-[0.9375rem]'>
         <Table
+          id={`${validationId}-validation-results`}
           className={`w-full max-w-full table-auto ${
             showFullTableBorders ? '' : '!border-0'
           }`}
@@ -135,6 +136,7 @@ function FieldEntry({ fieldObject }: FieldEntryProperties): JSX.Element {
         {/* NOTE: Table used to create space */}
         {isHiddenTableAdded ? (
           <Table
+            id={`${validationId}-spacer`}
             className='w-full max-w-full table-auto !border-t-0 outline-none [&>tbody>tr:not(:last-child)]:border-b-transparent [&_thead]:hidden [&_tr]:invisible'
             aria-hidden='true'
             columns={columns}
@@ -146,6 +148,7 @@ function FieldEntry({ fieldObject }: FieldEntryProperties): JSX.Element {
       </div>
       {showPagination ? (
         <Pagination
+          tableId={validationId}
           onClickGo={onClickGo}
           onClickNext={onIncrementPageNumber}
           onClickPrevious={onDecrementPageNumber}

diff --git a/src/pages/Filing/FilingApp/FilingErrors/index.tsx b/src/pages/Filing/FilingApp/FilingErrors/index.tsx
@@ -91,6 +91,8 @@ function FilingErrors(): JSX.Element {
     }
   };
 
+  const onDebugStepSwitch = (): void => setIsStep2(step => !step);
+
   return (
     <div id='resolve-errors'>
       <FilingSteps />
@@ -215,7 +217,7 @@ function FilingErrors(): JSX.Element {
               <Button
                 className='mt-[1.875rem]'
                 appearance='primary'
-                onClick={() => setIsStep2(step => !step)}
+                onClick={onDebugStepSwitch}
                 label='Swap Step (debug only)'
                 size='default'
                 type='button'

diff --git a/src/pages/Filing/FilingApp/FilingFieldLinks.tsx b/src/pages/Filing/FilingApp/FilingFieldLinks.tsx
@@ -1,7 +1,8 @@
 import downloadValidationReport from 'api/requests/downloadValidationReport';
 import useSblAuth from 'api/useSblAuth';
-import { ListLink } from 'components/Link';
-import { Button, List } from 'design-system-react';
+import Button from 'components/Button';
+import { List, ListItem } from 'design-system-react';
+import { useNavigate } from 'react-router-dom';
 import type { FilingPeriodType } from 'types/filingTypes';
 
 interface FilingFieldLinksProperties {
@@ -20,22 +21,37 @@ function FilingFieldLinks({
   ...others
 }: FilingFieldLinksProperties & JSX.IntrinsicElements['div']): JSX.Element {
   const auth = useSblAuth();
+  const navigate = useNavigate();
 
   const onHandleDownloadClick = async (): Promise<void> => {
     await downloadValidationReport({ auth, lei, filingPeriod, submissionId });
   };
+
+  const onUploadNewFile = (): void =>
+    navigate(`/filing/${filingPeriod}/${lei}/upload`);
+
   return (
     <div id={id} className={`mt-[1.875rem] ${className}`} {...others}>
       <List className='flex items-center gap-[0.9375rem]' isLinks>
-        <Button
-          label='Download report'
-          // eslint-disable-next-line @typescript-eslint/no-misused-promises
-          onClick={onHandleDownloadClick}
-          iconRight='download'
-        />
-        <ListLink href={`/filing/${filingPeriod}/${lei}/upload`}>
-          Upload a new file
-        </ListLink>
+        <ListItem>
+          <Button
+            label='Download report'
+            // eslint-disable-next-line @typescript-eslint/no-misused-promises
+            onClick={onHandleDownloadClick}
+          />
+        </ListItem>
+        <ListItem>
+          {/* 
+            TODO: Replace button used as link - I couldn't get the button-like-styling right
+            https://github.com/cfpb/sbl-frontend/issues/575
+           */}
+          <Button
+            appearance='secondary'
+            label='Upload a new file'
+            className='mb-[0.5rem]'
+            onClick={onUploadNewFile}
+          />
+        </ListItem>
       </List>
     </div>
   );

diff --git a/src/pages/Filing/FilingApp/FilingWarnings/index.tsx b/src/pages/Filing/FilingApp/FilingWarnings/index.tsx
@@ -132,7 +132,7 @@ function FilingWarnings(): JSX.Element {
     return <LoadingContent message='Submission info loading...' />;
 
   return (
-    <>
+    <div id='main'>
       <FilingSteps />
       <FormWrapper>
         <FormHeaderWrapper>
@@ -260,7 +260,7 @@ function FilingWarnings(): JSX.Element {
           />
         </FormButtonGroup>
       </FormWrapper>
-    </>
+    </div>
   );
 }