Dialog buttons do not inherit accessibility-related attributes

Created on 11 July 2024, 5 months ago
Updated 19 September 2024, 2 months ago

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.

<!--break-->

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

πŸ› Bug report
Status

Needs work

Version

11.0 πŸ”₯

Component
AjaxΒ  β†’

Last updated about 2 hours ago

Created by

πŸ‡ΊπŸ‡ΈUnited States clayfreeman Paragould, AR

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @clayfreeman
  • πŸ‡ΊπŸ‡ΈUnited States clayfreeman Paragould, AR

    Would appreciate an expert's review to ensure the work is sufficient :)

  • Pipeline finished with Success
    5 months ago
    Total: 528s
    #222001
  • Status changed to Needs review 5 months ago
  • πŸ‡ΊπŸ‡ΈUnited States clayfreeman Paragould, AR

    Pipeline seems to have passed; ready for manual review now.

  • Pipeline finished with Success
    5 months ago
    Total: 811s
    #222147
  • πŸ‡·πŸ‡ΈSerbia finnsky

    I've added one comment here. Probably it will help

  • Status changed to RTBC 5 months ago
  • This looks good to me. All the new attributes are copied over in the submit button when a form is loaded in a modal.

  • Status changed to Needs work 4 months ago
  • πŸ‡³πŸ‡ΏNew Zealand quietone

    There is a comment about adding a followup issue. Is that needed? Adding tag just in case.

    This is tagged for an accessibility review. That still needs to happen. I am not sure of the process but asking in #accessibility is a start.

  • Status changed to Needs review 4 months ago
  • πŸ‡ΊπŸ‡ΈUnited States clayfreeman Paragould, AR

    I don't believe the follow-up is needed, or at least it shouldn't block the work being done here. I'm happy to entertain the proposed change if Drupal core is willing to take on such a task, but I doubt the likelihood of that outcome.

    I'll post in #accessibility -- thanks for the suggestion.

  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    small comment on MR

    Ran test-only feature though to check test coverage

    1) Drupal\FunctionalJavascriptTests\Ajax\DialogTest::testDialog
    Failed asserting that false matches expected true.
    /builds/issue/drupal-3460846/core/tests/Drupal/FunctionalJavascriptTests/Ajax/DialogTest.php:188
    FAILURES!
    Tests: 2, Assertions: 53, Failures: 1.
    

    Which shows it

    Did a manual test (very similar to the actual test)
    Went to ajax-test/dialog
    Clicked Link 5
    Verified the "Hello world" button had no aria attributes

    Went to /ajax-test/dialog-form
    Verified the attributes were there

    So fix does address the problem described.

    Will leave in review for others and that nitpicky variable name (can mark after that).

  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    Forgot about inline editor so made the change myself

    Will try and get accessibility sign off.

  • πŸ‡¨πŸ‡¦Canada mgifford Ottawa, Ontario

    Took a look at the code and it seemed reasonable. @smustgrave thanks for doing the manual testing. Would be nice to get it in.

  • Status changed to RTBC 3 months ago
  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    Thanks @mgifford!

  • πŸ‡·πŸ‡ΈSerbia finnsky

    Btw. Probably we also need to discuss.
    Why we not copy ALL attributes here?

    If we need exact copy of original button it has sence

  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    Let’s open a follow up for that. Getting this in as js least helps accessibility

  • Status changed to Needs work 3 months ago
  • πŸ‡·πŸ‡ΈSerbia finnsky

    I would like to see something better than just copy. :)

    https://codepen.io/finnsky/pen/qBzGNoZ?editors=1010

    Here i added example how it may work.

  • πŸ‡ΊπŸ‡ΈUnited States itmaybejj

    Looking this source code over (have not pulled a test environment) --

    I would not drop aria-describedby and aria-labelledby if the targets are rendered on the page. I see your logic, but if those attributes are present for some reason, won't they be equally needed in the duplicate?

    Also -- I'm assuming if there is no aria-label on the source, this code won't put that attribute on the target, as opposed to putting an empty aria-label? I've seen the latter sneak through now and then.

    And last -- aria-details does not have widespread support. It doesn't hurt to copy the attribute, but developers really should not be using this attribute in production code.

Production build 0.71.5 2024