508-defect-1 [COGNITION, FOCUS, KEYBOARD]: Form wizard collapses unexpectedly

[Mottie]

508-defect-1

Feedback framework

• ❗️ Must for if the feedback must be applied
• ⚠️ Should if the feedback is best practice
• ✔️ Consider for suggestions/enhancements

Definition of done

1. Review and acknowledge feedback.
2. Fix and/or document decisions made.
3. Accessibility specialist will close ticket after reviewing documented decisions / validating fix.

Point of Contact

VFS Point of Contact: Josh

User Story or Problem Statement

As a keyboard user, I would expect the form elements within the wizard to not cause the wizard to collapse when I press Enter

Details

The wizard "Let's get started" button is acting like a submit button and being toggled when any form element "see" the Enter key and attempts to submit the form.

• The wizard collapsing is jarring & unexpected
• The expanded wizard should be persistent
• Focus is lost
• This problem occurs in production

Acceptance Criteria

• Prevent closing the wizard when Enter is pressed
• Maintain focus on the form element

Environment

• Operating System: any
• Browser: any
• Screenreading device: any
• Server destination: production

Steps to Recreate

1. Go to https://www.va.gov/disability/how-to-file-claim/
2. Click on the green "Let's get started" wizard button - it will turn blue and show the first wizard question.
3. Once open use the Tab to navigate to the active duty radio group
4. Press Space to make a choice and see the wizard reveal the next step.
5. While still focused on the radio, press Enter
6. The "Let's get started button" will once again turn green and collapse the wizard
7. Focus is lost, but will focus on the link after the wizard start button if Tab is pressed.
8. Clicking on the "Let's get started" button will reveal the wizard in its previous state.

Proposed Solution (if known)

This problem may be fixed by adding a type="button" to the wizard toggle

    <button
+    type="button"
      aria-expanded={this.state.expanded ? 'true' : 'false'}
      aria-controls="wizardOptions"
      className={buttonClasses}
      onClick={() => this.setState({ expanded: !this.state.expanded })}
    >
      {buttonText}
    </button>

-->

WCAG or Vendor Guidance (optional)

Screenshots or Trace Logs

Screen.Recording.2021-02-11.at.1.05.31.PM.mov

[Mottie]

@joshkimux Fix has been merged, please verify and feel free to close this issue. Thanks!

[joshkimux]

@Mottie Dumb question-- was this merged on production? The behavior hasn't changed there unfortunately D:

[Mottie]

It was merged into staging yesterday after our production update.. we only do production updates on weekdays at 3pm ET. So you should see this fix in place later today.

[joshkimux]

@Mottie Awesome! I can't access it on staging atm since staging will send me to a separate wizard page, but I'll give it a check later this afternoon on prod! :D