search

department-of-veterans-affairs / va-forms-system-core

VA Forms System Core will be a React library hosted in NPM that will allow engineers and designers to easily interact with Forms inside of vets-website.
https://department-of-veterans-affairs.github.io/va-forms-system-core/
6 stars 4 forks source link

VA Forms System Core [Component]: Focus Management - No scroll back to the top of the content area when stepping through the form #546

Closed TiffanyPender closed 2 years ago

TiffanyPender commented 2 years ago

-508-defect-1: ❗️Critical. Must be fixed before launch

User Story or Problem Statement

As someone who navigates with a keyboard or mouse, when navigating a form that takes me through different steps and pages via BACK and CONTINUE style buttons, I expect for the screen to shift to the top of the form content of the page post-click/select. This helps me understand where on the page I am in relation to all content and keep my understanding of the flow of the form in tact.

Details

When clicking on either the BACK or CONTINUE button on any step of the form, the screen does not shift focus to scroll up to the top of the form content on the loaded page.

Acceptance Criteria

Environment

Steps to Recreate

  1. Visit the Forms Library Core demo form
  2. Navigate with either a keyboard or mouse to the CONTINUE button and click/select.
  3. Verify that the page does not scroll to the top of the new form content. a. In Chrome Dev Tools, you can verify the active focus by using live expression and tracking the active element with document.activeElement
  4. Repeat step two on the remaining form pages, testing with clicking on both the BACK and CONTINUE buttons.

WCAG or Vendor Guidance (optional)

obliviga commented 2 years ago

@TiffanyPender Should focus be set on the form element itself, or on the h1 element? Thanks!

TiffanyPender commented 2 years ago

@obliviga My recommendation is to either set focus on the h1 element or on the step indicator. This will help screen reader users know that they have moved on to the next page of the form and will help other users to visually see the top/beginning of the new form content.

obliviga commented 2 years ago

@TiffanyPender, thanks. I'll set focus on the h1 since the step indicator is a design system component that cannot be focused on. If an h1 inside the form does not exist, then focus will be set on the default location, which is the body. Let me know what you think :)

obliviga commented 2 years ago

Verified that this fix has been deployed to the main branch.