diff --git a/frontend/src/App.css b/frontend/src/App.css index 29123b2c96..c7549c0f85 100644 --- 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 index 1586359b58..d1fb65001e 100644 --- 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 index b3f579f89c..cf080a8ce7 100644 --- 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 ( <>
mm/dd/yyyy
@@ -43,22 +45,35 @@ const DateInput = ({ const date = value ? moment(value, dateFmt) : null; return (
-
); @@ -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 index 1342438c9d..73dfd2a45e 100644 --- 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 index b14da33210..bc0d4b3f42 100644 --- 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 index c6afd88456..5fa6f267dd 100644 --- 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} > {page.label} @@ -79,8 +78,8 @@ function SideNav({ )} {lastSaveTime && !errorMessage && ( - - This report was automatically saved on + + This report was last saved on {' '} {lastSaveTime.format('MM/DD/YYYY [at] h:mm a')} diff --git a/frontend/src/components/Navigator/components/__tests__/SideNav.js b/frontend/src/components/Navigator/components/__tests__/SideNav.js index 051beb07c1..76d995042f 100644 --- 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 index 8b7fdfa763..bbc3c780c7 100644 --- a/frontend/src/pages/ActivityReport/Pages/activitySummary.js +++ b/frontend/src/pages/ActivityReport/Pages/activitySummary.js @@ -237,6 +237,7 @@ const ActivitySummary = ({ name="startDate" > { fetch(); }, [grantIds]); + const showGoals = recipientGrantee && hasGrants; + return ( <> Goals and objectives - {recipientGrantee && hasGrants + {showGoals && (
@@ -51,7 +53,11 @@ const GoalsObjectives = () => { )}
-