search

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

Repository for design.va.gov website
https://design.va.gov
37 stars 57 forks source link

<header> landmark applied too narrowly in minimal header #2985

Closed jeana-adhoc closed 1 month ago

jeana-adhoc commented 2 months ago

Bug Report

I don't think these are duplicate issues, but they are issues that may be impacted by this bug.

What happened

The current minimal header component is loading with a <header> tag wrapped around the "Official website of the United States government" banner.

This causes accessibility issues in that the other elements in this minimal header are now not in a landmark, and a AT user would not be accessing all of the information that looks like it's in the <header> but it's not.

What I expected to happen

I expected more than just the "Official website".. banner to be the page <header>

And when testing this in isolation in storybook, I do see there is a <header> wrapping the component, but then you have a nested header, and you can't have a banner landmark inside another banner landmark

This needs to be implemented in conjunction with the Forms Team, that would like to 'inject' this into the current <header> that wraps the existing header elements (legacy & mobile). This minimal header would be a third option. (side note: I have questions and concerns about all of these headers loading for every user, but that's a separate issue for another day) So, I believe <header> shouldn't be in the web component at all at this point.

You can see that the USWDS on their website and in their examples include the US Website banner, and navigation in it's page <header>

Reproducing

Steps to reproduce:

  1. Login to staging.va.gov
  2. Navigate to https://staging.va.gov/supporting-forms-for-claims/statement-to-support-claim-form-21-4138/
  3. Start the form.
  4. On the first page you'll see the minimal header load.
  5. Run axe browser tools
  6. You'll see this error "All page content should be contained by landmarks". And it points to the "skip to main content" link. However, across all VA.gov pages, you'll see that link is not contained in a landmark.
  7. Upon further inspection, I noticed the minimal header not loading in a <header> tag. And upon further investigation, found the <header> tag was buried deep in the component.
  8. In the browser, I changed the <div> wrapping the minimal header to <header> and that fired off additional warnings because of the nested <header> in a header.

Urgency

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

Details

I marked that this is blocking work currently in progress, as it would be a launch blocking issue. However, I think we can move forward with our usability testing that we're doing with this bug in place.

caw310 commented 2 months ago

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @nickjg231 @powellkerry @rmessina1010 @rsmithadhoc

jeana-adhoc commented 2 months ago

Note to the DST Team... After a conversation with @humancompanion-usds I'd like to ammend my recommendation.

After looking at the USWDS page templates, the grey bar is indeed a header, but the navigational page elements are in a second header that is a peer to the first <header>.

For the VADS minimal header. the va-official-gov-banner matches the USWDS system, and nothing about it should change (It should remain in a <section> as well. But the crisis line and va-header are outside of a header or landmark area. They should be contained in a <header> as well.