mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-04-23 10:40:58 -04:00
40ac30a96d
Visual users get the context from the proximity to the h2 but we need to provide this for others. I've tried using `aria-describedby` to link them to the h2 but this ends up making the h2 text the button's description in the accessibility tree. In Voiceover this means you only get that information as extra context, announced a while after the label if the VO cursor stays on the button. We want all the information in the accessible label so chose this approach instead.
30 lines
1.8 KiB
HTML
30 lines
1.8 KiB
HTML
{% macro cookie_banner(message, id='global-cookie-message') %}
|
|
|
|
<div id="{{ id }}" class="notify-cookie-banner notify-cookie-banner__with-js" data-module="cookie-banner" role="region" aria-describedby="notify-cookie-banner__heading">
|
|
<div class="notify-cookie-banner__wrapper govuk-width-container">
|
|
<h2 class="notify-cookie-banner__heading govuk-heading-m" id="notify-cookie-banner__heading">Can we store analytics cookies on your device?</h2>
|
|
<p class="govuk-body">Analytics cookies help us understand how our website is being used.</p>
|
|
<div class="notify-cookie-banner__buttons">
|
|
<div class="notify-cookie-banner__button notify-cookie-banner__button-accept">
|
|
<button class="govuk-button govuk-button__inline" type="submit" data-accept-cookies="true" aria-describedby="notify-cookie-banner__heading">
|
|
Yes<span class="govuk-visually-hidden">, we can store analytics cookies on your device</span>
|
|
</button>
|
|
</div>
|
|
<div class="notify-cookie-banner__button notify-cookie-banner__button-reject">
|
|
<button class="govuk-button govuk-button__inline" type="submit" data-accept-cookies="false" aria-describedby="notify-cookie-banner__heading">
|
|
No<span class="govuk-visually-hidden">, we can't store analytics cookies on your device</span>
|
|
</button>
|
|
</div>
|
|
<a class="govuk-link notify-cookie-banner__link" href="/cookies">How Notify uses cookies</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="notify-cookie-banner__confirmation govuk-width-container" tabindex="-1">
|
|
<p class="notify-cookie-banner__confirmation-message govuk-body">
|
|
You can <a class="govuk-link" href="/cookies">change your cookie settings</a> at any time.
|
|
</p>
|
|
<button class="notify-cookie-banner__hide-button" data-hide-cookie-banner="true">Hide</button>
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|