Cookie Toggle Code: AdSense & Analytics

[ghost]

Per @DeniseColbert via Slack: Implement cookie toggle code from Bev at https://www.freeukgenealogy.org.uk/about/constitution-and-policies/cookie-policy/

Google AdSense

<table class="noBorder">
<tr><td><h3>e.g. Advertising</h3></td>
<td><label class="switch">
<input type="checkbox" id="acceptAdsense">
<div class="slider round">
<span class="on">ON</span>
<span class="off">OFF</span>
</div></label>
</td></tr></table>

Google Analytics

<table class="noBorder">
<tr><td><h3>e.g. Analytic</h3></td>
<td><label class="switch">
<input type="checkbox" id="acceptAnalytic">
<div class="slider round">
<span class="on">ON</span>
<span class="off">OFF</span>
</div></label>
</td></tr></table>

[ghost]

@DeniseColbert Implementation w/"ON OFF" text may introduce some confusion - screenshot from local testing:

https://imgur.com/a/BQoRRxE

OK to implement w/o text? Example:

https://imgur.com/a/0Mug2WO

[DeniseColbert]

Sorry for silence; been on leave. Text in code isn't clear- agreed. Colours are good, but can we have 'ON' in the slider when green, and 'OFF' when red? And would this work for screen reader accessibility as well?

[ghost]

Text in code isn't clear- agreed. Colours are good, but can we have 'ON' in the slider when green, and 'OFF' when red?

Craft CMS strips the <span> enclosures, which makes this implementation incompatible with the associated Javascript code - fixing this particular issue would require searching out a workaround, but...

And would this work for screen reader accessibility as well?

The original implementation is incompatible with screen reader software - an option toggle should be presented with a descriptive label (Yes/No radio buttons inside fieldset element provides an example that works with most screen reader software and browser combinations; Writing JavaScript with accessibility in mind appears to be a good resource for Javascript DOM modification considerations).

I'm not an accessibility expert though I'll make a best effort to support accessibility with a revised implementation that supports the desired aesthetic.

[ghost]

After reviewing Using ARIA at W3.org and Invisible Content Just for Screen Reader Users, I believe I have a working accessible solution (using Javascript to trick Craft CMS into including the <span> elements from Bev's snippet).

I'd consider this a passable solution to address the added accessibility concern, though this should be revisited after transitioning to WordPress to make use of jQuery UI to replace the slider control with an accessible version.

Google AdSense

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        /**
         * append switch control (break up span tag to prevent craft from stripping it)
         */
        var htmlControl = '<label id="checkbox_cookie_advertising" class="switch">' +
            '<input type="checkbox" id="acceptAdsense">' +
            '<div class="slider round">' +
            '<' + 'span class="on">ON</' + 'span' + '>' +
            '<' + 'span class="off">OFF</' + 'span' + '>' +
            '</div></label>';
        var elemControl = document.getElementById('control_cookie_advertising');
        elemControl.innerHTML = htmlControl + elemControl.innerHTML;
    });
</script>
<style>
    .only-screenreader {
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        width: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
    }
    div#control_cookie_advertising br{
        clear:both;
    }
    div#control_cookie_advertising h3{
        float:left;
    }
    label#checkbox_cookie_advertising,
    div#control_cookie_advertising fieldset{
        float:right;
        clear:right;
    }
</style>
<div id="control_cookie_advertising">
<h3>Advertising</h3>
<fieldset class="only-screenreader">
<legend>Allow advertising cookies</legend>
<label><input name="radio_cookie_advertising" type="radio" onclick="javascript:setAcceptAdsense();">Yes</label>
<label><input name="radio_cookie_advertising" type="radio" onclick="javascript:deleteAcceptAdsense();">No</label>
</fieldset>
<br />
</div>

Google Analytics

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        /**
         * append switch control (break up span tag to prevent craft from stripping it)
         */
        var htmlControl = '<label id="checkbox_cookie_analytics" class="switch">' +
            '<input type="checkbox" id="acceptAdsense">' +
            '<div class="slider round">' +
            '<' + 'span class="on">ON</' + 'span' + '>' +
            '<' + 'span class="off">OFF</' + 'span' + '>' +
            '</div></label>';
        var elemControl = document.getElementById('control_cookie_analytics');
        elemControl.innerHTML = htmlControl + elemControl.innerHTML;
    });
</script>
<style>
    .only-screenreader {
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        width: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
    }
    div#control_cookie_analytics br{
        clear:both;
    }
    div#control_cookie_analytics h3{
        float:left;
    }
    label#checkbox_cookie_analytics,
    div#control_cookie_analytics fieldset{
        float:right;
        clear:right;
    }
</style>
<div id="control_cookie_analytics">
<h3>Analytics</h3>
<fieldset class="only-screenreader">
<legend>Allow analytics cookies</legend>
<label><input name="radio_cookie_analytics" type="radio" onclick="javascript:setAcceptAnalytic();">Yes</label>
<label><input name="radio_cookie_analytics" type="radio" onclick="javascript:deleteAcceptAnalytic();">No</label>
</fieldset>
<br />
</div>

Snippets tested locally w/o issue, implementing at live site.

Edit: Revised snippets to avoid Craft mangling them.

[ghost]

Implemented via Craft at live site, resolved HTML and Javascript issues w/snippets introduced with edits, working at this time.

Note: The Craft headings associated with the Advertising and Analytics sections have been replaced with HTML content to support this change - please do not modify the Advertising and Analytics headings if you are not comfortable using the HTML editor.

[ghost]

Errata: Edits using Craft (rather than copy-pasting from text editor) somehow resulted in mangled Javascript when changing <h3>Ad Targeting</h3> to <h3>Advertising</h3> - corrected.

Google AdSense - mangled by Craft

<script>    document.addEventListener("DOMContentLoaded", function(event) {
        /**
         * append switch control (break up span tag to prevent craft from stripping it)
         */
        var htmlControl = '<label id="checkbox_cookie_advertising" class="switch">' + '<input type="checkbox" id="acceptAdsense">' + '<div class="slider round">' +
            '<sp' +="" 'an="" class="on">ON</sp'>' +
            '<sp' +="" 'an="" class="off">OFF</sp'>' +
            '</div></label>';
        var elemControl = document.getElementById('control_cookie_advertising');
        elemControl.innerHTML = htmlControl + elemControl.innerHTML;
    });
</script>
<style>
    .only-screenreader {
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        width: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
    }
    div#control_cookie_advertising br{
        clear:both;
    }
    div#control_cookie_advertising h3{
        float:left;
    }
    label#checkbox_cookie_advertising,
    div#control_cookie_advertising fieldset{
        float:right;
        clear:right;
    }
</style>
<div id="control_cookie_advertising">
<h3>Advertising</h3>
<fieldset class="only-screenreader">
<legend>Allow advertising cookies</legend>
<label><input name="radio_cookie_advertising" type="radio" onclick="javascript:setAcceptAdsense();">Yes</label>
<label><input name="radio_cookie_advertising" type="radio" onclick="javascript:deleteAcceptAdsense();">No</label>
</fieldset>
<br>
</div>