Implement Facility operating status design iteration on VAMC pages

[mmiddaugh]

Issue Description

Facility operating alerts are currently in production with a range of implementations on various pages documented in the table below. After an audit to find where and how these implementations differed and a design intent to get approval on design iteration, we are ready to implement Nick's design recommendations to provide a consistent experience within and across products.

Example pages

• VAMC system page (relevant for main locations which appear on system home page)
• VAMC facility page
• VAMC operating status page
• VAMC Locations page

Current behavior for VAMC facility page

Page	Current behavior	Expected behavior	Difference
VAMC facility, system and Locations page			update to clickable alert style with a link chevron >, use yellow, full-background-with-icon alert for "Limited services and hours"
VAMC operating status page			use yellow, full-background-with-icon alert for "Limited services and hours" with underlined link style

Design system references

• Background Only With Icon
• Warning alert

Tasks

VAMC facility, system and location pages

Implement design found in UX Pin, which includes

• [ ] Facility operating status alerts use a clickable alert style with 5px border radius
• [ ] The clickable link is styled the same as the expandable alert except with a link chevron >
• [ ] Ensure the facility operating status alert receives focus and is announced to screen readers as a link
• [ ] When facility operating status = "Limited services and hours", use yellow, full-background-with-icon alert

VAMC operating status pages

Implement design found in UX Pin, which includes

• [ ] Facility operating status alerts use a static, non-clickable alert style
• [ ] For accessibility: screen readers should treat static alerts as readable text: "Limited services and hours" (in the current experience, screen readers are ignoring facility locator alerts)
• [ ] Static alerts do not have rounded borders
• [ ] When facility operating status = "Limited services and hours", use the yellow, full-background-with-icon alert
• [ ] Maintain existing style for "Normal", "Facility Notice" and "Closed" statuses
• [ ] No change to existing behavior is expected

Acceptance Criteria

• [ ] Regardless of status, facility operating status should be announced to screen readers as a link
• [ ] When facility operating status = "Limited services and hours"
  • the yellow, full-background-with-icon alert displays on Facility Operating status pages
  • yellow, full-background-with-icon clickable alert style with 5px border radius displays on VAMC facility, system and location pages
  • The clickable link is styled the same as the expandable alert and uses a link chevron >

[GcioNapoleon]

closed by accident

[kevwalsh]

This requires some re-evaluation now that we've added Facility COVID status.