Add mutation observer to check if cookie banner has been acknowledged

[rcantin-w]

Who is this for?

10915

What is it doing for them?

This PR adds a value in the context that checks if the cookie banner has been acknowledged. I put it at that level as I thought it could be useful elsewhere, but if we think it's overkill I can move it.

In that regard, I've added the context to Storybook and to the concerned tests.

What's going on?

When the cookie banner shows on a page with a Modal (such as this work), the latter is stopping the former from being interacted with as it is locked in with FocusTrap (for a11y reasons).

We need to deactivate FocusTrap if the cookie banner has yet to be acknowledged and interacted with, then re-activate it to stick by good a11y practices.

The banner can be considered acknowledged in three different ways:

• The user clicks "Accept All": the CookieControl cookie is set, and the banner is removed from the DOM.
• The user clicks "Essential only": the CookieControl cookie is set, and the banner is removed from the DOM.
• The user clicks "Manage cookies": the CookieControl cookie is set, the banner is removed from the DOM and the Preference centre popup is added to the DOM. The user then interacts (or not) with the contents of the Preference centre popup, then clicks "Save and close". The popup is removed from the DOM.

Because the cookie is not automatically set at the same time as everything is removed from the DOM, we can't count on detecting the cookie to re-activate the FocusTrap. We also can't use CivicUK's callbacks to re-activate FocusTrap as it offers one for onAccept and onRevoke, but not for when a user dismisses the cookie preferences by clicking "Manage cookies" and then simply "Save and close".

So we have to find out when the banner and popup are fully removed from the DOM, and we can do that by detecting when the #ccc Element (ccc being the ID of the parent container) has zero children left - because yes, the parent stays in the DOM, but is an empty div. I'm thinking it's so the Preference centre popup knows where to inject itself should it be called up again. Only then can we then activate the FocusTrap. We use ccc-overlay to check if the banner is up as it is a sibling of both the popup and the banner should one of them be active.

This was a bit of a maze so happy to jump on a call to run through it.

[github-actions[bot]]

Size Change: +912 B (+0.09%)

Total Size: 968 kB

Filename	Size	Change
content/webapp/.next/static/chunks/1002-f6d5c85e15352818.js	0 B	-4.22 kB (removed)	🏆
content/webapp/.next/static/chunks/8651-cd800b1313c083e8.js	0 B	-3.12 kB (removed)	🏆
content/webapp/.next/static/chunks/pages/_app-846deaf8fa6211e1.js	0 B	-107 kB (removed)	🏆
identity/webapp/.next/static/chunks/pages/_app-c1b27092dfd123f5.js	0 B	-99.3 kB (removed)	🏆
identity/webapp/.next/static/chunks/pages/index-1eae79998a41a8aa.js	0 B	-11.9 kB (removed)	🏆
content/webapp/.next/static/chunks/1002-c9f63056c57ba987.js	4.28 kB	+4.28 kB (new file)	🆕
content/webapp/.next/static/chunks/8651-406a4d8be8263f2e.js	3.17 kB	+3.17 kB (new file)	🆕
content/webapp/.next/static/chunks/pages/_app-218f91b12f017c7a.js	107 kB	+107 kB (new file)	🆕
identity/webapp/.next/static/chunks/pages/_app-0101be56ac57db6d.js	99.8 kB	+99.8 kB (new file)	🆕
identity/webapp/.next/static/chunks/pages/index-5c1854081d923910.js	12 kB	+12 kB (new file)	🆕

ℹ️ View Unchanged

| Filename | Size | | :--- | :---: | | `content/webapp/.next/static/chunks/00a8a139.d1615490c6d9d990.js` | 59 kB | | `content/webapp/.next/static/chunks/1064.5302fc0ceb6abf15.js` | 1.07 kB | | `content/webapp/.next/static/chunks/1132.931dd34613d06b7e.js` | 1.18 kB | | `content/webapp/.next/static/chunks/1135-dec1d2acf9414ba1.js` | 3.06 kB | | `content/webapp/.next/static/chunks/122-a648ab5ef2752390.js` | 2.67 kB | | `content/webapp/.next/static/chunks/1383.e50da80def2c9de0.js` | 1.06 kB | | `content/webapp/.next/static/chunks/1386-d4229c7c4a075f04.js` | 4.6 kB | | `content/webapp/.next/static/chunks/1651.12be858e737999ac.js` | 2.3 kB | | `content/webapp/.next/static/chunks/1712.032b8978b43b8e2d.js` | 1.2 kB | | `content/webapp/.next/static/chunks/1747-b0eb98abf95be996.js` | 6.17 kB | | `content/webapp/.next/static/chunks/196.f2b3d8e646d8eb40.js` | 3.04 kB | | `content/webapp/.next/static/chunks/2059-2279f792b8ce5e5b.js` | 2.67 kB | | `content/webapp/.next/static/chunks/2327.b502af087145f0bd.js` | 1.06 kB | | `content/webapp/.next/static/chunks/2596.f12a7f06b06577a2.js` | 1.26 kB | | `content/webapp/.next/static/chunks/2787-2d2b57459396060e.js` | 2.24 kB | | `content/webapp/.next/static/chunks/2889.a2ffc850cd6682c4.js` | 1.82 kB | | `content/webapp/.next/static/chunks/3021.911fda038d679160.js` | 2.37 kB | | `content/webapp/.next/static/chunks/3026.2499b4a557487bca.js` | 1.19 kB | | `content/webapp/.next/static/chunks/3138.0e1369679b800355.js` | 1.06 kB | | `content/webapp/.next/static/chunks/344-4e808891c4865ae3.js` | 2.84 kB | | `content/webapp/.next/static/chunks/3615-e4b199f75eb7244d.js` | 6.93 kB | | `content/webapp/.next/static/chunks/4407.0268b749df25dcf1.js` | 2.15 kB | | `content/webapp/.next/static/chunks/4479.5028e36e1fa8b7ea.js` | 1.26 kB | | `content/webapp/.next/static/chunks/4494.ab7c131e574eedff.js` | 1.07 kB | | `content/webapp/.next/static/chunks/4537-ddeb4acf824054d8.js` | 19 kB | | `content/webapp/.next/static/chunks/466-ec82af66b815c291.js` | 2.67 kB | | `content/webapp/.next/static/chunks/4696.81e3adfbf875bf27.js` | 1.25 kB | | `content/webapp/.next/static/chunks/4732.28e654702188fa9b.js` | 1.24 kB | | `content/webapp/.next/static/chunks/4825-0da3332c92191dfb.js` | 7.78 kB | | `content/webapp/.next/static/chunks/4962-68bb7d1d02721b2a.js` | 12.3 kB | | `content/webapp/.next/static/chunks/5623.9a3338ec971ad33c.js` | 1.17 kB | | `content/webapp/.next/static/chunks/5637-897418153d72b6a3.js` | 20.3 kB | | `content/webapp/.next/static/chunks/6017-9afe7171c14b0989.js` | 3.53 kB | | `content/webapp/.next/static/chunks/6204-1aca3c1b0c7ed16a.js` | 3.81 kB | | `content/webapp/.next/static/chunks/6495.fa9e93c937b98b0a.js` | 1.06 kB | | `content/webapp/.next/static/chunks/6577-effbaab7dae5448b.js` | 3.51 kB | | `content/webapp/.next/static/chunks/6677.859ea72e9d7bdd12.js` | 19.9 kB | | `content/webapp/.next/static/chunks/7020-b1adb1081769fed9.js` | 2.22 kB | | `content/webapp/.next/static/chunks/7107-690d46121f0c6582.js` | 26.7 kB | | `content/webapp/.next/static/chunks/7409.780a867780690d01.js` | 1.39 kB | | `content/webapp/.next/static/chunks/7635-0322c8fb1b511131.js` | 3.52 kB | | `content/webapp/.next/static/chunks/7663.3ddbf7651613669e.js` | 1.19 kB | | `content/webapp/.next/static/chunks/7888-b390293f392e24f5.js` | 4.66 kB | | `content/webapp/.next/static/chunks/8060.895d4f706a719810.js` | 2.44 kB | | `content/webapp/.next/static/chunks/8540-6a7ad68b578a97d3.js` | 3.35 kB | | `content/webapp/.next/static/chunks/8850-152982a0bc3131dc.js` | 2.67 kB | | `content/webapp/.next/static/chunks/8886-01d79d822b5d6200.js` | 4.48 kB | | `content/webapp/.next/static/chunks/9049-6036daa1efd8a05f.js` | 3.47 kB | | `content/webapp/.next/static/chunks/9065-ebbd9fb91fcbd328.js` | 5.15 kB | | `content/webapp/.next/static/chunks/9264.303c1100298f17f5.js` | 900 B | | `content/webapp/.next/static/chunks/9519-7deaa0769c3804a3.js` | 8.01 kB | | `content/webapp/.next/static/chunks/9574-906d1fcbacfd8c3a.js` | 5.69 kB | | `content/webapp/.next/static/chunks/9685.6d2891018aabc9a8.js` | 1.06 kB | | `content/webapp/.next/static/chunks/9704-cabf3fa83d4504e4.js` | 4.55 kB | | `content/webapp/.next/static/chunks/framework-f29e48ae95cae5a3.js` | 45.2 kB | | `content/webapp/.next/static/chunks/main-978dba4ddde48128.js` | 30.8 kB | | `content/webapp/.next/static/chunks/pages/_error-54ad671c1257cec3.js` | 335 B | | `content/webapp/.next/static/chunks/pages/404-9e69cf17ffb062d5.js` | 261 B | | `content/webapp/.next/static/chunks/pages/500-889eb9240c0e2c83.js` | 260 B | | `content/webapp/.next/static/chunks/pages/articles-f84894af7c48eec0.js` | 3.26 kB | | `content/webapp/.next/static/chunks/pages/articles/[articleId]-8acdf8574469fdbe.js` | 4.45 kB | | `content/webapp/.next/static/chunks/pages/books-70c2d95a0cf03263.js` | 3.28 kB | | `content/webapp/.next/static/chunks/pages/books/[bookId]-0986536bd9b1be6d.js` | 2.23 kB | | `content/webapp/.next/static/chunks/pages/collections-041628e4f16f4fc7.js` | 3.02 kB | | `content/webapp/.next/static/chunks/pages/concepts/[conceptId]-93fa544530d3419e.js` | 4.58 kB | | `content/webapp/.next/static/chunks/pages/cookie-policy-3c671636ef8569a4.js` | 6.35 kB | | `content/webapp/.next/static/chunks/pages/covid-welcome-back-38c8e7dec7fe90e2.js` | 12.2 kB | | `content/webapp/.next/static/chunks/pages/event-series/[eventSeriesId]-07c40a042d274c32.js` | 4.15 kB | | `content/webapp/.next/static/chunks/pages/events-e5368e4e5beb9487.js` | 3.38 kB | | `content/webapp/.next/static/chunks/pages/events/[eventId]-fadd1a34989b84d3.js` | 8.22 kB | | `content/webapp/.next/static/chunks/pages/events/[eventId]/visual-stories-a562e28c3d86df5f.js` | 302 B | | `content/webapp/.next/static/chunks/pages/exhibitions-8ff32feaf2a2019e.js` | 3.57 kB | | `content/webapp/.next/static/chunks/pages/exhibitions/[exhibitionId]-fa2548be1ad5bca2.js` | 4.09 kB | | `content/webapp/.next/static/chunks/pages/exhibitions/[exhibitionId]/visual-stories-9b0c40729a2f8cf8.js` | 305 B | | `content/webapp/.next/static/chunks/pages/guides/[pageId]-2aa6fd5b88d33b8a.js` | 2.92 kB | | `content/webapp/.next/static/chunks/pages/guides/exhibitions-9267bfa97e61640c.js` | 4.28 kB | | `content/webapp/.next/static/chunks/pages/guides/exhibitions/[id]-aaeba9123d0ecd69.js` | 4.66 kB | | `content/webapp/.next/static/chunks/pages/guides/exhibitions/[id]/[type]-0b8ff788ffa3f51d.js` | 4.47 kB | | `content/webapp/.next/static/chunks/pages/index-d10cda67d0020a8e.js` | 2.45 kB | | `content/webapp/.next/static/chunks/pages/newsletter-98605a779ca17771.js` | 2.39 kB | | `content/webapp/.next/static/chunks/pages/pages/[pageId]-cfd8ff8b561bd93c.js` | 2.89 kB | | `content/webapp/.next/static/chunks/pages/projects/[pageId]-1c1e8a244ce49450.js` | 2.92 kB | | `content/webapp/.next/static/chunks/pages/search-35bfa35cf0ce5f5a.js` | 5.38 kB | | `content/webapp/.next/static/chunks/pages/search/events-5877b74d3cae53b2.js` | 1.33 kB | | `content/webapp/.next/static/chunks/pages/search/images-956068e04d0220f0.js` | 2.3 kB | | `content/webapp/.next/static/chunks/pages/search/stories-e6399776d3b343ae.js` | 3.22 kB | | `content/webapp/.next/static/chunks/pages/search/works-709d146b869c6197.js` | 4.4 kB | | `content/webapp/.next/static/chunks/pages/seasons/[seasonId]-fc2f8e1c90c7d4ee.js` | 2.29 kB | | `content/webapp/.next/static/chunks/pages/series/[seriesId]-a733e16829ed2a16.js` | 4.6 kB | | `content/webapp/.next/static/chunks/pages/slice-simulator-40e9d178dc079ef4.js` | 8.47 kB | | `content/webapp/.next/static/chunks/pages/stories-14e54db99477bffc.js` | 3.64 kB | | `content/webapp/.next/static/chunks/pages/stories/[contentType]-d5dadb785e7f263e.js` | 3.31 kB | | `content/webapp/.next/static/chunks/pages/visit-us-bdfc2b27948949b0.js` | 3.35 kB | | `content/webapp/.next/static/chunks/pages/visual-stories/[visualStoryId]-e0a141cacc28d60c.js` | 240 B | | `content/webapp/.next/static/chunks/pages/whats-on-93ae6a8d55dad977.js` | 203 B | | `content/webapp/.next/static/chunks/pages/whats-on/[period]-69293969c14f3c75.js` | 273 B | | `content/webapp/.next/static/chunks/pages/works/[workId]-bb293fd9c3312554.js` | 25.7 kB | | `content/webapp/.next/static/chunks/pages/works/[workId]/download-2f4fafaebbec9ad2.js` | 3.1 kB | | `content/webapp/.next/static/chunks/pages/works/[workId]/images-bcf149ccffc02d15.js` | 1.08 kB | | `content/webapp/.next/static/chunks/pages/works/[workId]/items-bbe5411ff9aac00f.js` | 2.09 kB | | `content/webapp/.next/static/chunks/polyfills-c67a75d1b6f99dc8.js` | 31 kB | | `content/webapp/.next/static/chunks/webpack-bbeb75ab1afafaea.js` | 2.25 kB | | `identity/webapp/.next/static/chunks/374.94537fd117195c86.js` | 2.48 kB | | `identity/webapp/.next/static/chunks/432.fa29da5acdb8e0b1.js` | 744 B | | `identity/webapp/.next/static/chunks/442-29780463d96993ea.js` | 8.35 kB | | `identity/webapp/.next/static/chunks/644-a3420a6bbc15048b.js` | 15.1 kB | | `identity/webapp/.next/static/chunks/677.a0884a27fb537187.js` | 19.9 kB | | `identity/webapp/.next/static/chunks/framework-19f3649580393c10.js` | 45.2 kB | | `identity/webapp/.next/static/chunks/main-d973a3979032d64a.js` | 32.2 kB | | `identity/webapp/.next/static/chunks/pages/_error-8e82953fa241027d.js` | 1.42 kB | | `identity/webapp/.next/static/chunks/pages/delete-requested-36dbb378188484a0.js` | 3.22 kB | | `identity/webapp/.next/static/chunks/pages/error-8117ccec5d62785a.js` | 1.7 kB | | `identity/webapp/.next/static/chunks/pages/registration-d07114234ef485c5.js` | 4.11 kB | | `identity/webapp/.next/static/chunks/pages/success-babc5c74ab7f7620.js` | 3.28 kB | | `identity/webapp/.next/static/chunks/pages/validated-2ef62657092669ba.js` | 3.36 kB | | `identity/webapp/.next/static/chunks/polyfills-c67a75d1b6f99dc8.js` | 31 kB | | `identity/webapp/.next/static/chunks/webpack-713796e2734212eb.js` | 1.81 kB |

_{compressed-size-action}

[kenoir]

We also can't use CivicUK's callbacks to re-activate FocusTrap as it offers one for onAccept and onRevoke, but not for when a user dismisses the cookie preferences by clicking "Manage cookies" and then simply "Save and close".

It is quite disappointing that this is the case, I would have expected there to be some kind of signal for any choice even dismissal.

[rcantin-w]

It is quite disappointing that this is the case, I would have expected there to be some kind of signal for any choice even dismissal.

Agreed and I'm hoping this isn't just me having missed something..!