Merge pull request #213 from adhocteam/js-332-accessibility-updates

Accessibility updates
HHS · Mar 11, 2021 · 0c44259 · 0c44259
2 parents fad3c70 + 30fb7c1
commit 0c44259
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 16 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());
     });