Squashed commit of the following:

commit 9369bd5 Merge: 0c44259 de255ce Author: Josh Salisbury <josh@adhocteam.us> Date: Thu Mar 11 12:47:40 2021 -0600 Merge pull request #226 from adhocteam/js-fix-be-tests File upload test shouldn't error out commit de255ce Author: Josh Salisbury <josh@adhocteam.us> Date: Thu Mar 11 12:37:14 2021 -0600 File upload test shouldn't error out FileId is now set in a before each and should no longer depend on tests being ran in a specific order commit 0c44259 Merge: fad3c70 30fb7c1 Author: Josh Salisbury <josh@adhocteam.us> Date: Thu Mar 11 11:35:55 2021 -0600 Merge pull request #213 from adhocteam/js-332-accessibility-updates Accessibility updates commit 30fb7c1 Merge: c1527c2 fad3c70 Author: Josh Salisbury <josh@adhocteam.us> Date: Thu Mar 11 10:04:26 2021 -0600 Merge branch 'main' into js-332-accessibility-updates Conflicts: frontend/src/pages/ActivityReport/Pages/goalsObjectives.js commit fad3c70 Merge: 79cab99 3090d99 Author: Ryan Ahearn <ryan.ahearn@gsa.gov> Date: Thu Mar 11 10:50:12 2021 -0500 Merge pull request #225 from adhocteam/prod-domain-terraform Production domain terraform commit 3090d99 Merge: 7cac1b4 79cab99 Author: Ryan Ahearn <ryan.ahearn@gsa.gov> Date: Thu Mar 11 10:41:25 2021 -0500 Merge branch 'main' into prod-domain-terraform commit 79cab99 Merge: 49f75a5 f9914ca Author: Josh Salisbury <josh@adhocteam.us> Date: Thu Mar 11 09:39:47 2021 -0600 Merge pull request #216 from adhocteam/js-287-persist-goals-objectives Objectives/Goals are persisted commit c1527c2 Merge: 9c6108f 49f75a5 Author: Josh Salisbury <josh@adhocteam.us> Date: Thu Mar 11 09:31:52 2021 -0600 Merge branch 'main' into js-332-accessibility-updates commit f9914ca Author: Josh Salisbury <josh@adhocteam.us> Date: Thu Mar 11 09:29:34 2021 -0600 Return from migrations, remove granteeId from index Renamed migrations to ensure they are ran commit 7cac1b4 Merge: 01dafc4 49f75a5 Author: Ryan Ahearn <ryan.ahearn@gsa.gov> Date: Thu Mar 11 10:22:42 2021 -0500 Merge branch 'main' into prod-domain-terraform commit e96c77d Merge: 2f612d9 49f75a5 Author: Josh Salisbury <josh@adhocteam.us> Date: Thu Mar 11 09:13:48 2021 -0600 Merge branch 'main' into js-287-persist-goals-objectives commit 49f75a5 Merge: bd830f9 72ea701 Author: Josh Salisbury <josh@adhocteam.us> Date: Thu Mar 11 09:10:30 2021 -0600 Merge pull request #221 from adhocteam/js-152-browser-controls Browser nav fix and various IE 11 fixes commit 01dafc4 Author: Ryan Ahearn <ryan.ahearn@gsa.gov> Date: Wed Mar 10 12:02:51 2021 -0500 Add route mapping for prod url commit a7822a9 Author: Ryan Ahearn <ryan.ahearn@gsa.gov> Date: Wed Mar 10 11:50:57 2021 -0500 Recursively delete non-prod infrastructure commit 72ea701 Author: Josh Salisbury <josh@adhocteam.us> Date: Wed Mar 10 16:20:57 2021 -0600 Goal picker fix for IE 11 IE 11 doesn't place flex items properly when a `min-height` is used. Add a flag to the multiselect component allowing flagging it as a "single row" input to allow the goal picker to show up properly commit a270329 Author: Josh Salisbury <josh@adhocteam.us> Date: Wed Mar 10 15:31:47 2021 -0600 Attempt to force IE to not cache GET requests commit 2f612d9 Author: Josh Salisbury <josh@adhocteam.us> Date: Wed Mar 10 12:12:41 2021 -0600 Update activityReports query commit 9c6108f Merge: e1b9f45 bd830f9 Author: Josh Salisbury <josh@adhocteam.us> Date: Wed Mar 10 11:44:27 2021 -0600 Merge branch 'main' into js-332-accessibility-updates commit 81d795b Author: Josh Salisbury <josh@adhocteam.us> Date: Wed Mar 10 11:43:00 2021 -0600 Lint fix commit 3d6b908 Merge: 2b0ed3d bd830f9 Author: Josh Salisbury <josh@adhocteam.us> Date: Wed Mar 10 11:40:02 2021 -0600 Merge branch 'main' into js-287-persist-goals-objectives commit bd6ce10 Merge: d3fcd83 bd830f9 Author: Josh Salisbury <josh@adhocteam.us> Date: Wed Mar 10 11:33:49 2021 -0600 Merge branch 'main' into js-152-browser-controls commit d3fcd83 Merge: f0c8908 87790f3 Author: Josh Salisbury <josh@adhocteam.us> Date: Wed Mar 10 11:32:35 2021 -0600 Merge branch 'js-152-browser-controls' of github.com:adhocteam/Head-Start-TTADP into js-152-browser-controls commit f0c8908 Author: Josh Salisbury <josh@adhocteam.us> Date: Wed Mar 10 11:32:16 2021 -0600 Use ie11 version of react-hook-form commit 87790f3 Merge: 91933c6 5e867d8 Author: Ryan Ahearn <ryan.ahearn@gsa.gov> Date: Tue Mar 9 19:13:05 2021 -0500 Merge branch 'main' into js-152-browser-controls commit 91933c6 Merge: b9a17b4 58723e1 Author: Josh Salisbury <josh@adhocteam.us> Date: Tue Mar 9 16:15:18 2021 -0600 Merge branch 'js-152-browser-controls' of github.com:adhocteam/Head-Start-TTADP into js-152-browser-controls Conflicts: .circleci/config.yml commit b9a17b4 Author: Josh Salisbury <josh@adhocteam.us> Date: Tue Mar 9 16:13:37 2021 -0600 Update sandbox branch commit 58723e1 Merge: d671ba4 bcca11c Author: Josh Salisbury <josh@adhocteam.us> Date: Tue Mar 9 15:40:45 2021 -0600 Merge branch 'main' into js-152-browser-controls commit d671ba4 Author: Josh Salisbury <josh@adhocteam.us> Date: Tue Mar 9 11:34:08 2021 -0600 Browser nav fix and various IE 11 fixes * Push nav state instead of replace on navigation. This means the back/forward browser buttons work * Goal picker sets height = min height for the controller, this makes the text inside the textbox center properly in ie11 * react-uswds ^1.12.2 was causing the page to not load in ie11. Downgrade to 1.11.0 * Hex colors with transparency weren't playing nice with ie11, converted to rgba * Padding-inline wasn't working in ie11, switch to padding-left * Duration validation updated to actually force durations rounded to the half hour * Goal multiselect only displays "x goals selected" if there is no user input * Objectives are only focused on mount instead of when the ref changes. Fixes a bug where focus switches back to the objective after switching off commit e1b9f45 Merge: 84f3d0e 5956089 Author: Josh Salisbury <josh@adhocteam.us> Date: Tue Mar 9 09:35:42 2021 -0600 Merge branch 'main' into js-332-accessibility-updates commit 2b0ed3d Merge: feb5da6 5956089 Author: Josh Salisbury <josh@adhocteam.us> Date: Tue Mar 9 09:35:37 2021 -0600 Merge branch 'main' into js-287-persist-goals-objectives commit 84f3d0e Merge: 946bfcb e7db658 Author: Josh Salisbury <josh@adhocteam.us> Date: Mon Mar 8 13:19:51 2021 -0600 Merge branch 'main' into js-332-accessibility-updates commit feb5da6 Merge: 718956c e7db658 Author: Josh Salisbury <josh@adhocteam.us> Date: Mon Mar 8 11:57:19 2021 -0600 Merge branch 'main' into js-287-persist-goals-objectives commit 718956c Author: Josh Salisbury <josh@adhocteam.us> Date: Mon Mar 8 11:56:35 2021 -0600 Handle report switching from grantee to non-grantee commit cb1b865 Author: Josh Salisbury <josh@adhocteam.us> Date: Mon Mar 8 11:04:45 2021 -0600 Objectives/Goals are persisted * When a report is saved the goals and objectives from the report are saved to the DB, udpated or created if needed * An ActivityReportObjective record is created for every objective associating the report to objective * Objectives that are no longer used in the report are removed from the DB, along with the ActivityReportObjective * If the goal hasn't been used on a previous report and is removed from the current report it is also removed * When a report is approved a GrantGoal record is created for every goal/grant pair commit 946bfcb Author: Josh Salisbury <josh@adhocteam.us> Date: Thu Mar 4 17:02:11 2021 -0600 Update tests commit a2ef841 Author: Josh Salisbury <josh@adhocteam.us> Date: Thu Mar 4 16:43:16 2021 -0600 Update sandbox branch commit edccb36 Author: Josh Salisbury <josh@adhocteam.us> Date: Thu Mar 4 16:26:41 2021 -0600 Address accessibility issues * Side nav aria-label removed so the complete entry is read by screen readers * DatePicker has more helpful text announced by screen readers * Duration label is clearer * Save noticiation message is more generic and the whole message is read instead of just the updated date/time * Goal selector no longer eats tabs and can be navigated out of by a keyboard * Skip nav link placed on top of header when focused
HHS · Mar 11, 2021 · 072692a · 072692a
1 parent a2f5a37
commit 072692a
Show file tree

Hide file tree

Showing 11 changed files with 48 additions and 20 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -1,3 +1,7 @@
+.usa-skipnav:focus {
+  z-index: 999999;
+}
+
 .smart-hub-offset-nav {
   margin-left: 8rem;
 }

diff --git a/frontend/src/components/DatePicker.css b/frontend/src/components/DatePicker.css
@@ -7,7 +7,7 @@
     with the tab key. Since the open button has tabindex of -1
     we won't run into an issue of focus moving "backwards"
   */
-  flex-direction: row-reverse;
+  /* flex-direction: row-reverse; */
   width: fit-content;
 }
 

diff --git a/frontend/src/components/DatePicker.js b/frontend/src/components/DatePicker.js
@@ -22,7 +22,7 @@ import './DatePicker.css';
 const dateFmt = 'MM/DD/YYYY';
 
 const DateInput = ({
-  control, minDate, name, disabled, maxDate, openUp, required,
+  control, minDate, name, disabled, maxDate, openUp, required, ariaName,
 }) => {
   const hintId = `${name}-hint`;
   const [isFocused, updateFocus] = useState(false);
@@ -35,6 +35,8 @@ const DateInput = ({
     return isBefore || isAfter;
   };
 
+  const message = isFocused ? '' : 'Navigate forward and push button to open the calendar';
+
   return (
     <>
       <div className="usa-hint font-body-2xs" id={hintId}>mm/dd/yyyy</div>
@@ -43,22 +45,35 @@ const DateInput = ({
           const date = value ? moment(value, dateFmt) : null;
           return (
             <div className="display-flex smart-hub--date-picker-input">
-              <button onClick={() => { updateFocus(true); }} disabled={disabled} tabIndex={-1} aria-label="open calendar" type="button" className="usa-date-picker__button margin-top-0" />
               <SingleDatePicker
                 id={name}
+                ariaLabel={`${ariaName}, month/day/year, edit text`}
+                placeholder={null}
                 focused={isFocused}
                 date={date}
                 ref={ref}
                 isOutsideRange={isOutsideRange}
                 numberOfMonths={1}
+                screenReaderInputMessage={message}
                 openDirection={openDirection}
                 disabled={disabled}
+                hideKeyboardShortcutsPanel
                 onDateChange={(d) => {
                   const newDate = d ? d.format(dateFmt) : d;
                   onChange(newDate);
                 }}
-                onFocusChange={({ focused }) => updateFocus(focused)}
-                hideKeyboardShortcutsPanel
+                onFocusChange={({ focused }) => {
+                  if (!focused) {
+                    updateFocus(focused);
+                  }
+                }}
+              />
+              <button
+                onClick={() => { updateFocus(true); }}
+                disabled={disabled}
+                aria-label={`${ariaName} open calendar"`}
+                type="button"
+                className="usa-date-picker__button margin-top-0"
               />
             </div>
           );
@@ -80,6 +95,7 @@ DateInput.propTypes = {
   // eslint-disable-next-line react/forbid-prop-types
   control: PropTypes.object.isRequired,
   name: PropTypes.string.isRequired,
+  ariaName: PropTypes.string.isRequired,
   minDate: PropTypes.string,
   maxDate: PropTypes.string,
   openUp: PropTypes.bool,

diff --git a/frontend/src/components/MultiSelect.js b/frontend/src/components/MultiSelect.js
@@ -148,6 +148,7 @@ function MultiSelect({
             components={{ ...componentReplacements, DropdownIndicator }}
             options={options}
             isDisabled={disabled}
+            tabSelectsValue={false}
             isClearable={multiSelectOptions.isClearable}
             closeMenuOnSelect={multiSelectOptions.closeMenuOnSelect}
             controlShouldRenderValue={multiSelectOptions.controlShouldRenderValue}

diff --git a/frontend/src/components/Navigator/__tests__/index.js b/frontend/src/components/Navigator/__tests__/index.js
@@ -91,7 +91,7 @@ describe('Navigator', () => {
     renderNavigator();
     const firstInput = screen.getByTestId('first');
     userEvent.click(firstInput);
-    const first = await screen.findByRole('button', { name: 'first page' });
+    const first = await screen.findByRole('button', { name: 'first page In Progress' });
     await waitFor(() => expect(within(first).getByText('In Progress')).toBeVisible());
   });
 
@@ -121,7 +121,7 @@ describe('Navigator', () => {
     const updatePage = jest.fn();
     const updateForm = jest.fn();
     renderNavigator('second', () => {}, () => {}, updatePage, updateForm);
-    userEvent.click(await screen.findByRole('button', { name: 'first page' }));
+    userEvent.click(await screen.findByRole('button', { name: 'first page Not Started' }));
     await waitFor(() => expect(updateForm).toHaveBeenCalledWith({ ...initialData, second: null }));
     await waitFor(() => expect(updatePage).toHaveBeenCalledWith(1));
   });

diff --git a/frontend/src/components/Navigator/components/SideNav.js b/frontend/src/components/Navigator/components/SideNav.js
@@ -48,7 +48,6 @@ function SideNav({
         unstyled
         className={`smart-hub--navigator-link ${page.current ? 'smart-hub--navigator-link-active' : ''}`}
         role="button"
-        aria-label={page.label}
       >
         <span className="margin-left-2">{page.label}</span>
         <span className="margin-left-auto margin-right-2">
@@ -79,8 +78,8 @@ function SideNav({
         )}
       {lastSaveTime && !errorMessage
         && (
-        <Alert aria-live="polite" type="success" slim noIcon className="smart-hub--save-alert">
-          This report was automatically saved on
+        <Alert aria-atomic aria-live="polite" type="success" slim noIcon className="smart-hub--save-alert">
+          This report was last saved on
           {' '}
           {lastSaveTime.format('MM/DD/YYYY [at] h:mm a')}
         </Alert>

diff --git a/frontend/src/components/Navigator/components/__tests__/SideNav.js b/frontend/src/components/Navigator/components/__tests__/SideNav.js
@@ -99,7 +99,7 @@ describe('SideNav', () => {
 
   it('the currently selected page has the current class', () => {
     renderNav(REPORT_STATUSES.SUBMITTED, () => {}, true);
-    const submitted = screen.getByRole('button', { name: 'test' });
+    const submitted = screen.getByRole('button', { name: 'test Submitted' });
     expect(submitted).toHaveClass('smart-hub--navigator-link-active');
   });
 });
diff --git a/frontend/src/pages/ActivityReport/Pages/activitySummary.js b/frontend/src/pages/ActivityReport/Pages/activitySummary.js
@@ -237,6 +237,7 @@ const ActivitySummary = ({
                 name="startDate"
               >
                 <DatePicker
+                  ariaName="Start Date (Required)"
                   control={control}
                   maxDate={endDate}
                   name="startDate"
@@ -250,6 +251,7 @@ const ActivitySummary = ({
                 name="endDate"
               >
                 <DatePicker
+                  ariaName="End Date (required)"
                   control={control}
                   minDate={startDate}
                   disabled={!startDate}
@@ -260,7 +262,7 @@ const ActivitySummary = ({
             </Grid>
             <Grid col={5}>
               <FormItem
-                label="Duration (round to the nearest half hour)"
+                label="Duration in hours (round to the nearest half hour)"
                 name="duration"
               >
                 <TextInput

diff --git a/frontend/src/pages/ActivityReport/Pages/goalsObjectives.js b/frontend/src/pages/ActivityReport/Pages/goalsObjectives.js
@@ -35,12 +35,14 @@ const GoalsObjectives = () => {
     fetch();
   }, [grantIds]);
 
+  const showGoals = recipientGrantee && hasGrants;
+
   return (
     <>
       <Helmet>
         <title>Goals and objectives</title>
       </Helmet>
-      {recipientGrantee && hasGrants
+      {showGoals
         && (
         <Fieldset className="smart-hub--report-legend margin-top-4" legend="Goals and objectives">
           <div id="goals-and-objectives" />
@@ -51,7 +53,11 @@ const GoalsObjectives = () => {
         )}
       <Fieldset className="smart-hub--report-legend margin-top-4" legend="Context">
         <Label htmlFor="context">OPTIONAL: Provide background or context for this activity</Label>
-        <Textarea id="context" name="context" inputRef={register()} />
+        <Textarea
+          id="context"
+          name="context"
+          inputRef={register()}
+        />
       </Fieldset>
     </>
   );

diff --git a/frontend/src/pages/ActivityReport/__tests__/index.js b/frontend/src/pages/ActivityReport/__tests__/index.js
@@ -137,7 +137,7 @@ describe('ActivityReport', () => {
     it('navigates to the correct page', async () => {
       fetchMock.post('/api/activity-reports', { id: 1 });
       renderActivityReport('new');
-      const button = await screen.findByRole('button', { name: 'Topics and resources' });
+      const button = await screen.findByRole('button', { name: 'Topics and resources Not Started' });
       userEvent.click(button);
       await waitFor(() => expect(history.location.pathname).toEqual('/activity-reports/1/topics-resources'));
     });
@@ -163,7 +163,7 @@ describe('ActivityReport', () => {
       fetchMock.get('/api/activity-reports/1', formData());
       fetchMock.put('/api/activity-reports/1', {});
       renderActivityReport(1);
-      const button = await screen.findByRole('button', { name: 'Topics and resources' });
+      const button = await screen.findByRole('button', { name: 'Topics and resources In Progress' });
       userEvent.click(button);
       await waitFor(() => expect(fetchMock.called('/api/activity-reports/1')).toBeTruthy());
     });

diff --git a/src/routes/files/handlers.test.js b/src/routes/files/handlers.test.js
@@ -80,11 +80,9 @@ describe('File Upload', () => {
   });
 
   describe('File Upload Handlers happy path', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       uploadFile.mockReset();
       getPresignedURL.mockReset();
-    });
-    it('tests a file upload', async () => {
       ActivityReportPolicy.mockImplementation(() => ({
         canUpdate: () => true,
       }));
@@ -96,8 +94,10 @@ describe('File Upload', () => {
         .expect(200)
         .then((res) => {
           fileId = res.body.id;
-          expect(uploadFile).toHaveBeenCalled();
         });
+    });
+    it('tests a file upload', async () => {
+      expect(uploadFile).toHaveBeenCalled();
       expect(mockAddToScanQueue).toHaveBeenCalled();
     });
     it('checks the metadata was uploaded to the database', async () => {