Quantcast
Channel: Issues for Drupal core
Viewing all articles
Browse latest Browse all 294402

Dialog buttons do not inherit accessibility-related attributes

$
0
0

Problem/Motivation

When creating a modal dialog (e.g., via an AJAX-enabled link), Drupal duplicates any form actions found within the modal content for display in a button pane at the bottom of the dialog. At present, only the following attributes are copied:

This poses a significant hurdle to providing accessible form actions, especially since HTML cannot be used within the value attribute produced by submit/button render elements.

Steps to reproduce

  1. Create a form with an action that has one or more attributes listed below.
  2. Create a page with a link to the form which will open in a modal dialog.
  3. Click the link from the last step and observe that the duplicated button is missing the attribute(s) from the first step.

Proposed resolution

We should additionally copy the following attributes to the duplicated buttons:

  • aria-description
  • aria-details
  • aria-label
  • disabled (allows the button to be disabled, which implicitly confers applicable accessibility information)
  • title (additionally allows a tool-tip to be displayed)

I've omitted aria-describedby and aria-labelledby for now since I don't think developers would intentionally create code that leaves dangling content in the modal content. The assumption is that developers would avoid using the button pane entirely in this case. I would be happy to include these, however, if the community believes they're also useful.

I've included aria-details because the detail text could ostensibly apply to other things than just form actions.

Remaining tasks

Update core/misc/dialog/dialog.ajax.js, specifically prepareDialogButtons() in the dialog behavior.

User interface changes

Modal dialog buttons will be more accurately duplicated.

API changes

None.

Data model changes

None?

Release notes snippet

TBD


Viewing all articles
Browse latest Browse all 294402

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>