Skip to content

Instantly share code, notes, and snippets.

@mrwweb
Last active December 9, 2022 00:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mrwweb/d169784dfc018df237b8a26fbf87b6ae to your computer and use it in GitHub Desktop.
Save mrwweb/d169784dfc018df237b8a26fbf87b6ae to your computer and use it in GitHub Desktop.
A small plugin that attempts to fix the accessibility of the Divi Toggle modle. Make sure to read the plugin description for important caveat about the Accordion module (don't use it). Hat tip to Mike Haydon for convincing me this was doable: https://www.intelliwolf.com/accessible-divi-accordion/.
<?php
/**
* Plugin Name: Fix Divi Toggle Module Accessibility
* Description: Uses JavaScript to insert button in toggle heading, remove tabindex from container, and correctly toggle aria-expanded on toggle button trigger. ⚠ WARNING: This only works for the Toggle module and *BREAKS* the Accordion module (really, it just breaks it more than it was already broken). Therefore, you are encouraged to entirely remove the Accordion module from the site (and the ability for anyone to use it) and only use Toggle modules.
* Author: Mark Root-Wiley, MRW Web Design
* Author URI: https://MRWweb.com
* Version: 1.2.1
*/
namespace MRW\DiviAccordionAria;
add_action( 'wp_footer', __NAMESPACE__ . '\fix_divi_accordion_aria', 0 );
function fix_divi_accordion_aria() {
?>
<script>
'use strict';
(function () {
let toggleIndex = 0;
function toggleFixInit() {
const toggleModules = document.querySelectorAll('.et_pb_toggle');
toggleModules.forEach( toggle => {
setupAria(toggle);
toggle.addEventListener('click',toggleAria);
});
}
function setupAria(toggle) {
const toggleId = 'toggle-content-' + toggleIndex;
const label = toggle.querySelector('.et_pb_toggle_title');
const content = toggle.querySelector( '.et_pb_toggle_content' );
const initialState = toggle.classList.contains('et_pb_toggle_close') ? 'false' : 'true'
const button = document.createElement('button');
button.innerText = label.innerText;
button.setAttribute( 'aria-expanded', initialState );
button.setAttribute( 'aria-controls', toggleId );
button.style.all = 'unset';
/* Don't allow focus on container */
toggle.removeAttribute('tabindex');
/* Required for aria-controls */
content.id = toggleId;
/* put focusable button inside heading with aria-expanded */
label.innerHTML = button.outerHTML;
label.addEventListener( 'keyup', fakeClick );
toggleIndex++;
}
function toggleAria(e) {
const button = e.currentTarget.querySelector( 'button[aria-expanded]' );
const newState = button.getAttribute( 'aria-expanded' ) === 'true' ? 'false' : 'true';
button.setAttribute( 'aria-expanded', newState );
}
/* The accordion only works on ENTER by default, so this fakes ENTER when SPACE (keycode === 32) is hit */
function fakeClick(e) {
if( e.keyCode === 32 ) {
e.target.parentNode.click();
}
}
/* has to run after the Divi and Divi Accessibility JavaScript runs, so fire setup script after page loads + 1.5s */
document.addEventListener('DOMContentLoaded', () => { setTimeout( toggleFixInit, 1500 ) } );
})();
</script>
<?php
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment