Bug Report

[x] I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

On mobile and small screens, I was confused because I was able to tab to/focus on breadcrumb elements that are not visually displaying. It seems as though these elements have simply been moved off the scren using CSS instead of actually being hidden which is what is causing this.

What I expected to happen

I would expect that I should be able to visually visually see everything that I am focusing on. Focusing on or being able to tab to a non-visual element is going to cause confusion for keyboard and visual-sr users.

Reproducing

Formation version:
Device: (e.g. iPhone 8, Macbook)
Browser: (e.g. Firefox, IE 11)

Steps to reproduce:

On page that is using the v3 breadcrumbs, the facility locator for example, view this on a small screen/mobile view so you can only see the the single "VA.gov home" breadcrumb
Use your keyboard to start tabbing through the interactive elements
Notice that you are able to tab to and focus on this single visible breadcrumb
Tab again
Notice that the visible focus ahs disappeared but if you notice in the lefthand corner of the screen, you are actually focusing on the second breadcrumb, for the current page.

Urgency

How urgent is this request? Please select the appropriate option below and/or provide details

[ ] This bug is blocking work currently in progress
[ ] This bug is affecting work currently in progress but we have a workaround
[ ] This bug is blocking work planned within the next few sprints
[ ] This bug is not blocking any work
[x] Other

Details

This bug is not blocking work but it is an accessibility bug that is going to cause confusion for various user groups - keyboard and screen reader users on small screens/mobile or zoomed in.

I also found the corresponding bug ticket in the USWDS repo if this helps at all

department-of-veterans-affairs / vets-design-system-documentation