Hide Notification Banner with Scroll Threshold and Device Normalisation Functions

[shannonmcgurk]

What does this change?

This change improves the transient notification banner's behaviour by introducing a function to hide the banner after the user performs certain actions: when the user presses the up arrow, the down arrow, or scrolls using the mouse wheel or trackpad. The scroll threshold is set at a magnitude of 10, ensuring that the banner remains visible during minor or accidental scrolls. A function to normalise the wheel action of the scroll has also been implemented to ensure a consistent user experience across different devices and browser settings.

How should a reviewer test this change?

Trigger the transient notification banner to appear.
Press the up arrow or down arrow and confirm that the banner hides.
Scroll using the mouse wheel or trackpad with a magnitude below the threshold (10) and confirm that the banner remains visible.
Scroll using the mouse wheel or trackpad with a magnitude above the threshold (10) and confirm that the banner hides.
Test the behaviour across different devices and browsers to verify the normalisation function works correctly.

Tested? Documented?

• locally by committer
• locally by Guardian reviewer
• on the Guardian's TEST environment
• relevant documentation added or amended (if needed)

[Conalb97]

Looks good to me! :)

[KaliedaRik]

Tested in local and can confirm the immediate functionality works as intended:

• transient lifespan banners disappear on user interaction
• session and persistent banners remain in view until user directly interacts with them

Two thoughts for consideration.

1. The Grid includes additional keyboard navigation, specifically: PgUp, PgDown, Home and End keys. For a consistent user experience, should these keys also be included alongside the arrow and esc keys to dismiss the banners?

2. During testing in local, I noticed that transient/session banners automatically reappear a short while after being dismissed - see screen capture below; this does not affect persistent banners (due to user interaction with those messages leading to the addition of a cookie to the user's device?). This may be due to testing on my local but, if not, perhaps some additional documentation and - if necessary - fixes for this sub-optimal user experience could be added to the PR?

Screen.Recording.2024-07-09.at.10.55.11.mov