Add more accessibility attributes to JS component implementations

[sebnitu]

Problem

There are some accessibility improvements that can be made to the markup of JavaScript components such as modals and draw modal states by adding various aria and role attributes. Here are a few that should be looked into to see if it makes sense to add:

• role="dialog" - Add to dialog, modal dialog and drawer dialog elements
  • ARIA: dialog role
• aria-modal="true" - Add to modal and drawer modal dialog elements
  • Element.ariaModal

The main question is: should these attributes be added via the JS implementation, or be left to the developer to add manually to their markup. In the case of modal drawers where the state of the drawer switches between modal and inline, it may make more sense to handle these states via the JS.

Example implementation:

// Get the dialog element
const dialog = el.querySelector(`[data-${this.settings.dataDialog}]`);
if (dialog) {
  // Set role to dialog
  dialog.setAttribute('role', 'dialog');

  // Set aria-modal attribute to true
  dialog.setAttribute('aria-modal', 'true');
}

Resources

• WAI-ARIA Roles
• Using ARIA: Roles, states, and properties

[sebnitu]

Fixed in #866