Accessibility Enhancements

This is a very useful plugin, but it suffers from being inaccessible to those with visual impairments. To make it WAI-ARIA compliant, I’d suggest the following modifications:

In cm-tooltip-glossary-frontend.php, change line 684 to read:

$content .= '<div id="' . $glossary_list_id . '-nav" class="listNav" role="tablist"></div>';

Then change line 713 to this:

$content .= '<ul class="glossaryList" role="tabpanel" id="' . $glossary_list_id . '">';

In jquery.listnav.glossary.js change lines 201-17 to this:

`function createLettersHtml () {
var html = [];
for(var i = 0; i < letters.length; i++){
if (html.length == 0) {
html.push(‘<a class=”ln-all” role=”tab” aria-controls=”panel-all” href=”#”>ALL</a>’);
if (opts.includeNums) {
html.push(‘<a class=”ln-_” tabindex=”-1″ role=”tab” aria-controls=”panel-_” href=”#”>0-9</a>’);
}
}
if (letters[i] === ‘_’)
{
continue;
}
html.push(‘<a class=”ln-‘ + (letters[i] === ‘-‘ ? ‘-‘ : i) + ‘ lnletter-‘ + letters[i].toLowerCase() + ‘” tabindex=”-1″ role=”tab” aria-controls=”panel-‘ + letters[i].toLowerCase() + ‘” href=”#”>’ + ((letters[i] === ‘-‘) ? ‘…’ : letters[i].toUpperCase()) + ‘</a>’);
}
return ‘<div class=”ln-letters”>’ + html.join(”) + ‘</div>’ + ((opts.showCounts) ? ‘<div class=”ln-letter-count” style=”display:none; position:absolute; top:0; left:0; min-width:20px;”>0</div>’ : ”);
}`

Finally, change listnav.js to this:

/*
 * Inside this closure we use $ instead of jQuery in case jQuery is reinitialized again before document.ready()
 */
(function ($) {
    "use strict";

    $(document).ready(function () {

        if (window.cmtt_listnav_data !== undefined && window.cmtt_listnav_data.listnav && window.cmtt_listnav_data.list_id) {
            $(document).ready(function ($) {
                $("#" + window.cmtt_listnav_data.list_id).listnav(window.cmtt_listnav_data.listnav);
            });
        }
 
		// Prevent scroll down when spacebar pressed
		document.getElementById('glossaryList-nav').addEventListener('keydown', function(e) {
			if ( (e.keycode || e.which) == 32) {
				e.preventDefault();
			}
		}, false);
        
        $('.listNav').keydown(function(e) {
			if (e.which == 39) { // 'right' arrow pressed
				e.preventDefault();
				$('.ln-letters a:focus').attr('tabindex','-1'); // restore letter from which clicking to non-tabbable state
				$('.ln-letters a:focus').next().focus().attr('tabindex','0'); // make receiving letter tabbable
			}

			if (e.which == 37) { // 'left' arrow pressed
				e.preventDefault();
				$('.ln-letters a:focus').attr('tabindex','-1'); // restore letter from which clicking to non-tabbable state
				$('.ln-letters a:focus').prev().focus().attr('tabindex','0'); // make receiving letter tabbable
			}

			if (e.which == 13 || e.which == 32) { // space bar pressed
				$(e.target).click().focus();
			}
			
			$('.ln-letters a:first').attr('tabindex','0'); // first letter must always be tabbable

		});

    });
}(jQuery));