[Accessibility] There is an empty "maintenance banner" region on the page that appears as a landmark for screen reader users.

[shiragoodman]

Status

[2024-08-01] [Fran] This is to fix a confusing accessibility issue that affects screen-reader user, where there is an empty 'maintenance banner' on the page appearing as a landmark for screen-reader users.

Additional Information

• Needs adjustment to content model in order to know when to show it.

General Information

VFS team name

Authenticated Experience

VFS product name

Notification Preferences

Point of Contact/Reviewers

Josh Kim (Accessibility)

---

Platform Issue

HTML markup isn't valid.

Issue Details

There is an empty "maintenance banner" region on the page that appears as a landmark for screen reader users.

Link, screenshot or steps to recreate

1. Log in to staging using test user 202
2. Navigate to profile
3. Using the Chrome landmarks extension or a screen reader, confirm there is an empty "maintenance banner" region on the page

VA.gov Experience Standard

Category Number 09, Issue Number 01

Other References

WCAG SC 1.3.1_A

---

Platform Recommendation

If the maintenance banner region is not meant to be visible to sighted users, it shouldn't be audible to screen reader users. Delete this region if it is empty and unusable.

Acceptance Criteria

• [ ] Maintenance banner component doesn't display in the DOM when empty
• [ ] a11y review

VFS Team Tasks to Complete

• [ ] Comment on the ticket if there are questions or concerns
• [ ] VFS team closes the ticket when the issue has been resolved

[MarciMcGuireGCIO]

@tmitchellgcio @erikphansen - can one of you please estimate this task before Sprint planning today? Thank you!

[MarciMcGuireGCIO]

Hey team! Please add your planning poker estimate with ZenHub @erikphansen @tmitchellgcio

[erikphansen]

This issue happens all over the site and looks to be due to this div: https://github.com/department-of-veterans-affairs/content-build/blob/fc12e8d446641ffd8a4b03228a5ec0c9eff7b999/src/site/components/banners.drupal.liquid#L20-L24. I think this is owned by Brian Lloyd's public websites team.

Suggestion: update the data-widget-type="maintenance-banner" placeholder div to be very minimal and move the role="region and aria-label="Maintenance banner" attributes to the React widget (https://github.com/department-of-veterans-affairs/component-library/blob/15d606e04ea012c1fb8242bd390103a67010b0e6/packages/react-components/src/components/MaintenanceBanner/MaintenanceBanner.jsx) that is rendered in the placeholder's place.

[MarciMcGuireGCIO]

Thank you @erikphansen !

@brianalloyd - is this something your team can take a look at ? Thanks!

[brianalloyd]

@MarciMcGuireGCIO PW team is reviewing and will scrub into the issue. going to place my teams label on the ticket just so I don't lose track of the ticket.

[MarciMcGuireGCIO]

Thanks, @brianalloyd !

[brianalloyd]

@joshkimux team reviewed this ticket during backlog grooming and had a few questions. 1. We haverole=“region” due to a11y feedback on the react div wrapper for the maintenance banner, there is not a way for us to conditionally render that div since React needs it to mount the maintenance banner. Can you provide some additional guidance or suggestions on this ticket?

[joshkimux]

I'd love to @brianalloyd ; but I might need a bit more context about what's at play. Would y'all be ok meeting with me over a short call to talk about it?

[brianalloyd]

@joshkimux sure thing. I'll put something on the calendar for us to circle up and review.

[laflannery]

@FranECross I wanted to bring this up because it seems like we are getting through a lot of the a11y issues and this might have gotten buried

[FranECross]

@laflannery Thank you! It did get overlooked. Thanks for pinging me! I'll scoot it over to Next Refinement to get it closer to being worked on.

[laflannery]

@FranECross this was supposed to be refined. I don't remember a conversation or why it might have been iceboxed?

[FranECross]

@laflannery I fear that with the move to the combined Sitewide board, and some changes of columns, some things not previously in Icebox were inadvertently moved there by the system. Thanks for catching this one! I'm looking at each ticket in the Icebox and asking if it looks like it doesn't belong there.

[randimays]

Banner is in the <header> tag on every page.

[FranECross]

@FranECross to check with someone to see if we should wait to work on this because AP team is currently working on stuff.

[laflannery]

Bryan fixed this in content-build, it also will need to be updated in next-build though