[Consistency] User encounters design components that are inconsistent or confusing.

[shiragoodman]

Value Proposition

As a veteran with sight disabilities who relies on a screen reader, I want a consistent navigation experience such that when I click on different tabs, the first thing I hear helps me understand the category of things on the page.

Design Notes

Engineering Notes

• Use class instead of id
• class name tab-header

Acceptance Criteria

• [ ] The focus moves to the page breadcrumbs when the previous page was not a tab
• [ ] The focus moves to the corresponding first H2 when the previous page was a tab and the user moves to the status tab.
• [ ] The focus moves to the corresponding first H2 when the previous page was a tab and the user moves to the overview tab.
• [ ] The focus moves to the corresponding first H2 when the previous page was a tab and the user moves to the files tab.
• [ ] When the tab is loading, the focus scrolls to the top of the page. This applies to all 3 aforementioned tabs and is current behavior.

Staging Review Feedback

This ticket was generated during the pilot process for the new VA.gov experience standards. Please tag @platform-governance-team-members on Slack if you need assistance interpreting this ticket.

Product Information

Team: Benefit Tools Product: Claim Status Tool Feature: Improved Evidence Request Initiative

Findings details

VA.gov Experience Standard - issue: User encounters design components that are inconsistent or confusing. VA.gov Experience Standard - category: Consistency Launch-blocking: No Design System review: No Collab Cycle Reviewer: @briandeconinck (Accessibility)

Description

When navigating between the Status, Files, and Overview pages for a claim, focus management is inconsistent.

If you start on the Status page:

• When you follow the Files link, focus goes to the breadcrumbs
• When you follow the Overview link, focus goes to the breadcrumbs

If you start on the Files page:

• When you follow the Status link, focus goes to the tab panel (status H2 is the first thing read by screen readers)
• When you follow the Overview link, focus goes to the breadcrumbs

If you start on the Overview page:

• When you follow the Status link, focus goes to the tab panel (status H2 is the first thing read by screen readers)
• When you follow the Files link, focus goes to the breadcrumbs

Note: That seems like it's the behavior, but there were a handful of times during testing where I was certain the Files and Overview links were going to the tab panel, and that the Status link went to the breadcrumbs. I wasn't able to trigger that behavior in a repeatable way so it's possible I was imagining it, but I'd appreciate it if you took a closer look.

Recommended action

Definitely want to make sure there's consistent behavior across these three links. My strong preference would be to send focus to the tab panel / H2 in all cases, but consistency is the most important thing here.

References

• WCAG Success Criteria: N/A
• Modality: Keyboard
• Design System Component: N/A
• Design System Pattern or Template: N/A
• Design System Foundation: N/A
• Content Style Guide: N/A
• Context: N/A
• Accessibility Defect Severity: 2: High. Should be fixed in 1-2 sprints post-launch.

---

Next Steps for the VFS Team

• [ ] Questions? For the most timely response, comment on Slack in your team channel tagging @platform-governance-team-members with any questions or to get help validating the issue.
• [ ] Ticket ownership: If you believe that this issue is out of scope, not your team's responsibility, or a Design System issue, comment and tag @platform-governance-team-members on your team channel in Slack to provide an explanation and who you believe is responsible. The Governance team will follow up.
• [ ] Close this ticket when the issue has been resolved or validated by your Product Owner.

[davidakennedy]

I can replicate most of this. It does seem inconsistent.

If you start on the Files page:

When I do this, and follow the status link, sometimes it goes to the breadcrumbs and sometimes it goes to the tab panel.

That seems like it's the behavior, but there were a handful of times during testing where I was certain the Files and Overview links were going to the tab panel, and that the Status link went to the breadcrumbs. I wasn't able to trigger that behavior in a repeatable way so it's possible I was imagining it, but I'd appreciate it if you took a closer look.

This is true for me too. Sometimes the focus seems inconsistent. It feels like a timing thing. Like if you click around quickly, focus is different than if you click and wait.

We should investigate this more, and see if we can make it more consistent.

[pmclaren19]

Reviewed this with @jerekshoe looks like every tab has logic where the focus can be various things depending on the situation.

Questions:

1. Do we want to keep this logic or just replace it all so that moving forward the focus will always be the H2? If we want the latter, we would need to create a class or id that is used for those H2's and then should be able to just use this line of code in thecomponentDidMount()

scrollAndFocus(document.querySelector('NEW-CLASS-NAME'));

2. What do we expect the focus to be for loading? Currently it is set to just scroll to the top and we dont have the option to see the H2 since those header components depend on props to be passed into it first.

[davidakennedy]

@pmclaren19

Do we want to keep this logic or just replace it all so that moving forward the focus will always be the H2?

Ideally, with the current structure of the page, moving focus to the h2 after a Veteran interacts with the menu links is best.

If we want the latter, we would need to create a class or id that is used for those H2's and then should be able to just use this line of code in the componentDidMount()

That makes sense. I know some projects have libraries that handle focus management. The other thing to watch out for there is setting tabindex="-1" on the headings so they can receive focus. That's needed on items that aren't interactive, like links, buttons, etc.

What do we expect the focus to be for loading? Currently it is set to just scroll to the top and we dont have the option to see the H2 since those header components depend on props to be passed into it first.

Here, do you mean initial page load? Where they haven't interacted with any of the menu links?

[pmclaren19]

@davidakennedy looking at this pr, it looks like the original thought was that when a user changed pages the focus would be the breadcrumbs otherwise the focus would be the tab.

Reading your comments sounds like you want the logic to be when a user changes pages (previous page is not one of our 3 tabs) the focus is the breadcrumbs. But when the previous page was a tab we focus on the H2 instead of the tab; is this correct?

[pmclaren19]

Started looking into this ticket and found that there are at least two system bugs.

1. On page.js the isTab() needed to have overview added to it as a possible tab option
2. The lastPage prop that we are getting on the Overview, File and Status tabs is not the most recent lastPage and for some reason seems to be the second most recent last page. Looking at the Redux store the lastPage is accurate so unsure what is occurring. @jerekshoe let me know if you have any ideas!

[pmclaren19]

Talked about this ticket in sprint planning today. Plan is to spend a few hours on this today and if we cant find a solution for bug #2, we will put it in product backlog to work on for another sprint and repoint this.

[pmclaren19]

Tested in Staging and looks good! @davidakennedy please feel free to verify and if you see anything off lmk! Moving to closed.

[davidakennedy]

🥇 Looks great! Tested on all the navigation links in the menu and with a few pages outside of those to make sure focus goes to the breadcrumbs. Everything works as expected. Thanks, @pmclaren19!