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
&& (