PLANET-7978: Make cookie notice properly focusable#2906
PLANET-7978: Make cookie notice properly focusable#2906GP-Dan-Tovbein wants to merge 1 commit intomainfrom
Conversation
GP-Dan-Tovbein
added
Review
UAT Needed
| const marketingCookiesChecked = [NECESSARY_MARKETING, NECESSARY_ANALYTICAL_MARKETING].includes(consentCookie); | ||
| const hasConsent = marketingCookiesChecked || analyticalCookiesChecked; | ||
|
|
||
| const updateNoTrackCookie = () => { |
There was a problem hiding this comment.
Moved to an anonymous function inside a useEffect hook.
There is no sense to define a function outside the hook if that function it's not exported or used by only once.
| gtag('set', 'ads_data_redaction', ad_storage); | ||
| }; | ||
|
|
||
| const toggleHubSpotConsent = () => { |
There was a problem hiding this comment.
Moved to an anonymous function inside a useEffect hook.
There is no sense to define a function outside the hook if that function it's not exported or used by only once.
| useEffect(toggleHubSpotConsent, [marketingCookiesChecked, userRevokedMarketingCookies]); | ||
| }, [marketingCookiesChecked, userRevokedMarketingCookies]); | ||
|
|
||
| const updateActiveConsentChoice = () => { |
There was a problem hiding this comment.
Moved to an anonymous function inside a useEffect hook.
There is no sense to define a function outside the hook if that function it's not exported or used by only once.
/unhold 4de17b33-21f9-41c7-a344-ee0afa366c9a
Test instance is ready 🚀🌑 oberon | admin | blocks report | CircleCI | composer-local.json ⌚ 2026.02.27 20:09:32 |
Ref: https://greenpeace-planet4.atlassian.net/browse/PLANET-7978 - Reorder elements - Modify styles - Improve react hooks - Hooks always on top
GP-Dan-Tovbein
force-pushed
the
PLANET-7978_make-cookie-notice-focusable
branch
from
cc43f62 to
31d120a
Compare
| const hasConsent = marketingCookiesChecked || analyticalCookiesChecked; | ||
|
|
||
| const updateNoTrackCookie = () => { | ||
| useEffect(() => { |
There was a problem hiding this comment.
| </button> | ||
| </div> | ||
| <button tabindex="0" class="close-cookies-settings" aria-label="{{__('Close cookies settings', 'planet4-master-theme')}}"> | ||
| <div class="close-icon"></div> |
There was a problem hiding this comment.
Needed to create this workaround since mask and focus are not fully compatible with all browsers
| <li><a href="#footer">{{ __( 'Skip to Footer', 'planet4-master-theme' ) }}</a></li> | ||
| </ul> | ||
|
|
||
| {% block cookies %} |
There was a problem hiding this comment.
Moved to top
/unhold 11e9db94-c7aa-41f2-a22b-3abb7b9aeaeb
2 participants
Summary
Make the cookie notice block more accesible by screen readers:
Ref: https://greenpeace-planet4.atlassian.net/browse/PLANET-7978
Testing
screenshot.mov