aria-pressed attribute isn't updated correctly.

Created on 4 October 2019, over 4 years ago
Updated 16 May 2023, about 1 year ago

Spin-off from #3066954: Admin toolbar not usable with latest versions of JAWS due to mis-use of aria-owns .
Also noted in Decouple tour triggering from the toolbar Needs work .

Problem/Motivation

Most of the buttons in toolbar module have an aria-pressed attribute, initialized to false. When pressing them, the state of the UI changes but the value of aria-pressed doesn't get updated. Instead of changing between true and false to reflect the UI, it is always false. Assistive technology therefore always reports these buttons as "off" or "not pressed".

Affected buttons: toolbar buttons which reveal trays, and the tour module button.
Note: the edit button behaves correctly!

Proposed resolution

Make the aria-pressed property actually work.

It may be to do with using jQuery.prop() when we should be using jQuery.attr(). The ARIA attributes are not properties as defined in HTMLElement interfaces.

Remaining tasks

Patch.
Tests - can watch this with FunctionalJavascript test, simulate clicks.

User interface changes

No visual design changes. Corrects faulty handling of a dynamic ARIA state.

API changes

None.

🐛 Bug report
Status

Needs work

Version

10.1

Component
Toolbar 

Last updated 2 days ago

  • Maintained by
  • 🇫🇷France @nod_
Created by

🇬🇧United Kingdom andrewmacpherson

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • The Needs Review Queue Bot tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

    Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

    Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

  • 🇮🇳India kkalashnikov Ghaziabad, India

    Patch for Drupal version 10.1.x

  • Status changed to Needs review over 1 year ago
  • 🇮🇳India Nikhil_110

    Applied patch #37 successfully

  • 🇮🇳India sonam.chaturvedi Pune

    Verified and tested patch #37 on 10.1.x-dev. Patch applied cleanly.

    Test Result:
    "aria-pressed" attribute of toolbar buttons is updated correctly. "aria-pressed" attribute is set to "true" when button is pressed else it is "false".

    Please find attached before and after patch screenshots.
    RTBC

  • Status changed to Needs work over 1 year ago
  • 🇺🇸United States bnjmnm Ann Arbor, MI

    Looks like we're good on screenshots/videos and don't need any more of them in the issue.
    I spotted some things in the test:

    1. +++ b/core/modules/toolbar/tests/src/FunctionalJavascript/ToolbarIntegrationTest.php
      @@ -42,10 +42,16 @@ public function testToolbarToggling() {
      +    $manage_link->getAttribute('aria-pressed');
      +    $this->assertEquals('true', $manage_link->getAttribute('aria-pressed'));
      

      Why is this getting the attribute without assigning it to a varianble and then getting it again in the assertEquals(). Seeme like the one line is that is needed.

    2. +++ b/core/modules/toolbar/tests/src/FunctionalJavascript/ToolbarIntegrationTest.php
      @@ -42,10 +42,16 @@ public function testToolbarToggling() {
      -    $page->clickLink('Manage');
      +    $manage_link->click();
      +    $this->assertEquals('false', $manage_link->getAttribute('aria-pressed'));
           $this->assertFalse($content->isVisible(), 'Toolbar tray is closed after clicking the "Manage" link.');
      -    $page->clickLink('Manage');
      +    $manage_link->click();
      +    $this->assertEquals('true', $manage_link->getAttribute('aria-pressed'));
      

      All of the checks for aria-pressed should have some sort of waitFor incorporated into it. In some instances a test may check for the attribute value before the JS has completed the change.

Production build 0.69.0 2024