SPIKE: Make real-time banners dismissible if allowed

[eselkin]

NOTE: The below details may be obsolete. Ignore if they don't reflect reality upon inspection.

Background

When making the QA plan for Real-time banners, Laura discovered an existing bug on the VAMC Banners in Prod where they were not respecting the dismissible checkbox in Drupal. Even if a banner was set as dismissible, the X icon would not show on the FE.

This was brought up early during the implementation process and it was determined that we could easily add this to the new, real-time banners as a "quick win" to get it working properly

However, during testing unfortunately we determined this wasn't quite as simple as we hoped. Because of this complication and because this is not a regression from prod, it was decided that the dismissibility of banners would remain as it was in prod and this ticket was created to tackle it later

Description

Currently va-banners using the real-time API (vets-website situation update banners) cannot use the showClose value.

Dismissibility is disabled on full-width banners using the real-time banners API due to the use of dangerouslySetInnerHTML breaks the ability for the va-banner component to check if the banner is in localStorage.DISMISSED_BANNERS.

(dangerouslySetInnerHTML is required, in order to preserve rich-text content from Drupal that may include links.)

User story

AS A user
I WANT to be able to dismiss banners from the real-time API if they are allowed to be dismissed
SO THAT I don't get repeated banners (or unhideable banners)

Engineering notes / background

va-banner checks if text matches the banner, but text stored in the DISMISSED_BANNERS has the HTML from innerHTML as opposed to the text.

Acceptance criteria

• Understand root cause of the ACs below not working as expected / what will be required in a code change in order to make them work.
• Decide if issue can be fixed within the confines of this ticket or a new ticket should be made. If so, make that ticket.

If fixable:

• If Drupal CMS value is set to make a VAMC Banner with Situation update dismissable, the banner component uses DST dismissable treatment
• Clicking the dismissable "Close" button (X in a circle) renders the banner not visible on the FE of the website
  • The banner is present in the DOM
  • The banner does not contain content in the shadow DOM
• A dismissed banner does not appear on page reload
• A dismissed banner does not appear on other VAMC System pages
• A dismissed banner is not read by a screen reader
• The dismissed banner becomes visible again when the "DISMISSED_BANNERS" cookie is deleted

[jilladams]

@laflannery I took a pass at ACs. It looks like in the DST Storybook, if you dismiss their component banner, the markup stays in the DOM. Just FYI, in case that comes up during AC review in refinement. (cc @Agile6MSkinner )

[laflannery]

@jilladams The <va-banner> stays in the DOM but the shadow root is empty and that's what is important:

I actually wrote this all up for the previous iteration of the QA test plan so maybe this will help for ACs?

When a dismissable banner is dismissed, a cookie is set with a key of "DISMISSED_BANNERS". When this is present:

• The banner is not visible on the FE of the website
• The banner will not be read by a screen reader
• The banner is present in the DOM but without content in the shadow DOM
• The banner becomes visible again when the "DISMISSED_BANNERS" cookie is deleted

[SnowboardTechie]

After digging into this, I don't believe we will be able to make real time banners dismissible without updating the core va-banner component so that the preparation of the BannerID could be done using an optional value passed into the component (i.e. bannerDismissedID) so that the banner can be identified prior to the vets-website's BannerContainer ever attempts to introduce the banner on page load.
I'll capture these thoughts more thoroughly in a new ticket.

[jilladams]

It might be nice to ask the DST if they're open to that. If not, it's a no op. (They live in #platform-design-system in VA slack. Feel free to cc me and Michael if you want.)

[SnowboardTechie]

Great idea, thank you @jilladams! I went ahead and put the question out there

[Agile6MSkinner]

If we can't accomplish it, seems like we need to remove the option in Drupal so that editors don't think they are making a banner that is dismissible.

[SnowboardTechie]

Moving this to Review as I am awaiting further input from the DST prior to taking any next steps.