Update the review page for task goals and functionality / a11y

[adamwhitlock1]

User Story

Update the review page for task goals and functionality / a11y

Background

• add back button next to submit
• add accessible names to edit links of each section
• ensure that chapters, pages, and items render in appropriate semantic html. There are some issues where - there is a definition list and regular unordered lists being used.
• reroute to pattern 2 landing page on submit?

ACs

• back button present and works
• edit links read correctly by AT
• semantic html in place and understandable by AT

Review needed by

• VA Product Owner
• Product Manager
• UX Research Team
• Engineering Team

Definition of Done

• Documentation has been updated, if applicable.
• Acceptance Criteria in related issue are met.
• Reviewers have approved.

[adamwhitlock1]

I merged in work for this week, and I think we are good to validate this

The newest updates should be available now on https://noxious-monster-gjxjrxqrrgfqvw-3001.app.github.dev/mock-form-ae-design-patterns/2

I just spun it up so it should be live for 4 hours, but if you want we can also go over things on Monday to make sure its all validated.

The review page reroutes to the home page now when orange task is complete and a11y updates have been made. We also added the contact information page as a step in the form flow for the orange task since that was added recently.

For the accessible links to edit sections, we added a screenreader only span for the time being to add context to what the edit link will navigate to. Other products have used a similar approach, so I think that is the best way to go in this situation.

const SubHeading = ({
  text,
  level,
  editLink = null,
  id = null,
  name = null,
}) => {
  const H = `h${level || 3}`;
  return (
    <div className="vads-u-display--flex vads-u-justify-content--space-between vads-u-align-items--center vads-u-border-bottom--1px vads-u-margin-bottom--2">
      <H className="vads-u-margin--0" id={id} tabIndex="-1" name={name}>
        {text}
      </H>
      {editLink && (
        <Link to={editLink} className="vads-u-text-decoration--none">
          Edit <span className="sr-only">{text?.toLowerCase?.()}</span>
        </Link>
      )}
    </div>
  );
};

One area that I wanted to look at further is the differences in the logged in / not logged-in alerts used on the intro page. Since there are changes in the headings being present depending on state, they throw off the heading hierarchy of the page. That is the only a11y that I encountered that I couldn't easily come up with a remedy for.