Creating an Accessible Side Panel with JavaScript

In this article, we will explore how to develop a versatile JavaScript code that allows you to transform any HTML element into an accessible side panel accompanied by a button trigger.

For instance, imagine you have a lengthy table of contents that could benefit from being concealed behind a button. With our JavaScript solution, you can effortlessly implement a side panel that reveals the table of contents upon activation, providing a seamless user experience.”

Table of contents before our JS code.
Table of contents after using our code.
Table of contents when click button

Enqueue required scripts and styles

To enqueue the JavaScript and CSS files for the side panel functionality, assuming the file names are sidepanel.js for the JavaScript file and sidepanel.css for the CSS file, you can use the following code in your WordPress theme’s functions.php file:

PHP

Now in sidepanel.css file add the following.

CSS

Please note you can use any breakpoint you want instead of 768px in the code above.

in your sidepanel.js add the following

JavaScript

The code you provided is a JavaScript snippet that adds functionality to convert any HTML element into an accessible side panel with a button trigger. Here’s an explanation of the code:

  1. It checks if the window width is less than or equal to 768 pixels. This is typically used to target mobile or smaller screens, you can change this value as desired.
  2. The each() function iterates over each element with the data-collapse attribute.
  3. Inside the iteration, the code performs the following steps:
    • Creates a unique ID for the side panel using Math.random().
    • Creates a button element with the class btn-collapse and sets the appropriate aria-label and aria-controls attributes.
    • Creates a close button element with the class btn-close.
    • Inserts the button before the side panel element and the close button inside the side panel element.
    • Sets the ID and aria-hidden attributes on the side panel element.
    • Sets the aria-expanded attribute on the button element.
    • Adds a click event listener to the button that toggles the active class on the side panel and the side-panel-active class on the body element. It also updates the aria attributes accordingly.
    • Adds a keyup event listener to the button for the Enter key, which performs the same toggle action as the click event.
    • Adds a click event listener to the close button that removes the active class from the side panel, removes the side-panel-active class from the body, updates the aria attributes, and focuses the button.
    • Adds a keyup event listener to the document for the Escape key, which performs the same actions as the close button click event.
    • Adds a click event listener to the document that checks if a click occurred outside the side panel while it is active. If true, it performs the same actions as the close button click event.
  4. The code provides a way to create a collapsible side panel functionality with accessibility features such as ARIA attributes and keyboard interaction.

Leave a Comment

Your email address will not be published. Required fields are marked *