Contrast Errors in Chrome

We noticed that occasionally, the Chrome browser failed to allow us to swap out of high contrast mode when in high contrast mode.

The issue was in the /toolbar/js/a11y.js file. The Javascript executed with an error on the click handler.

We recommend changing the code as follows (changed functions are the click handlers for the toggle contrast links):

function createCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = “; expires=” + date.toGMTString();
} else {
var expires = “”;
}
document.cookie = name + “=” + value + expires + “; path=/”;
}

function readCookie(name) {
var nameEQ = name + “=”;
var ca = document.cookie.split(‘;’);
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ‘ ‘) c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name, “”);
}

jQuery(document).ready(function ($) {
if (readCookie(‘a11y-desaturated’)) {
$(‘body’).addClass(‘desaturated’);
$(‘#is_normal_color’).attr(‘id’, ‘is_grayscale’).attr(‘aria-checked’, true).addClass(‘active’);
}
$(‘.toggle-grayscale’).on(‘click’, function () {
if ($(this).attr(‘id’) == “is_normal_color”) {
$(‘body’).addClass(‘desaturated’);
$(this).attr(‘id’, ‘is_grayscale’).attr(‘aria-checked’, true).addClass(‘active’);
createCookie(‘a11y-desaturated’, ‘1’);
return false;
} else {
$(‘body’).removeClass(‘desaturated’);
$(this).attr(‘id’, ‘is_normal_color’).removeAttr(‘aria-checked’).removeClass(‘active’);
eraseCookie(‘a11y-desaturated’);
return false;
}
});
// Contrast handler
if (readCookie(‘a11y-high-contrast’)) {
$(‘body’).addClass(‘contrast’);
$(‘head’).append($(“<link href='” + a11y_stylesheet_path + “‘ id=’highContrastStylesheet’ rel=’stylesheet’ type=’text/css’ />”));
$(‘#is_normal_contrast’).attr(‘id’, ‘is_high_contrast’).attr(‘aria-checked’, true).addClass(‘active’);
$(‘.a11y-toolbar ul li a i’).addClass(‘icon-white’);
}
$(document).on(‘click’, ‘.toggle-contrast’, function () {
if ($(‘#highContrastStylesheet’).length === 0) {
$(‘head’).append($(“<link href='” + a11y_stylesheet_path + “‘ id=’highContrastStylesheet’ rel=’stylesheet’ type=’text/css’ />”));
$(‘body’).addClass(‘contrast’);
$(‘.a11y-toolbar ul li a i’).addClass(‘icon-white’);
createCookie(‘a11y-high-contrast’, ‘1’);
$(‘.toggle-contrast, .toggle-contrast1’).removeClass(‘active’).removeAttr(‘aria-checked’);
$(this).addClass(“active”).attr(‘aria-checked’, ‘true’);
}
return false;
});
$(document).on(‘click’, ‘.toggle-contrast1’, function () {
if ($(‘#highContrastStylesheet’).length !== 0) {
$(‘#highContrastStylesheet’).remove();
$(‘body’).removeClass(“contrast”);
$(‘.a11y-toolbar ul li a i’).removeClass(‘icon-white’);
eraseCookie(‘a11y-high-contrast’);
$(‘.toggle-contrast, .toggle-contrast1’).removeClass(‘active’).removeAttr(‘aria-checked’);
$(this).addClass(“active”).attr(‘aria-checked’, ‘true’);
}
return false;
});

if (readCookie(‘a11y-larger-fontsize’)) {
$(‘body’).addClass(‘fontsize’);
$(‘#is_normal_fontsize’).attr(‘id’, ‘is_large_fontsize’).attr(‘aria-checked’, true).addClass(‘active’);
}

$(‘.toggle-fontsize’).on(‘click’, function () {
if ($(this).attr(‘id’) == “is_normal_fontsize”) {
$(‘body’).addClass(‘fontsize’);
$(this).attr(‘id’, ‘is_large_fontsize’).attr(‘aria-checked’, true).addClass(‘active’);
createCookie(‘a11y-larger-fontsize’, ‘1’);
return false;
} else {
$(‘body’).removeClass(‘fontsize’);
$(this).attr(‘id’, ‘is_normal_fontsize’).removeAttr(‘aria-checked’).removeClass(‘active’);
eraseCookie(‘a11y-larger-fontsize’);
return false;
}
});

var sections = document.getElementsByTagName(“section”);
for (var i = 0, max = sections.length; i < max; i++) {
sections[i].setAttribute(‘tabindex’, -1);
sections[i].className += ‘ focusable’;
}
if (document.location.hash && document.location.hash != ‘#’) {
var anchorUponArrival = document.location.hash;
setTimeout(function () {
$(anchorUponArrival).scrollTo({ duration: 1500 });
$(anchorUponArrival).focus();
}, 100);
}
});

The new binding will keep the ID constant between the two modes, and relies instead on classes to keep it up to date.

https://wordpress.org/plugins/wp-accessibility/