Toolbar buttons should respond to spacebar key

Created on 4 October 2019, almost 6 years ago
Updated 30 January 2023, over 2 years ago

Spin-off from #3066954: Admin toolbar not usable with latest versions of JAWS due to mis-use of aria-owns .

Problem/Motivation

Buttons don't respond to the spacebar key. These are faux buttons (<a href="" role="button">) which only respond to the return key. Can be replicated in Firefox and Chrome.

These are reported as buttons to assistive tech. Screen readers will announce them as buttons, and include them in the list-of-buttons tool. A role is a promise which sets user expectations of how the button can be operated.

Proposed resolution

Add a keyboard handler to the <a href="" role="button"> so it responds to the spacebar key.

Note, the <button> is normally preferred for a disclosure control such as this. However when JS doesn't run, these top-level links are still present and work as basic links to /admin, /user, and /admin/config/user-interface/shortcut. They are links, which are progressively enhanced to buttons; it's appropriate to use <a role="button"> for this. We just need to complete the expected behaviour of a button.

Remaining tasks

  • Update toolbar JS.
  • Tests - simulate a keypress in a FunctionalJavascript or Nightwatch test, and confirm the toolbar tray is visible/hidden. Repeat for both the spacebar and return key.
🐛 Bug report
Status

Needs work

Version

10.1

Component
Toolbar 

Last updated 1 day 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

Merge Requests

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.

  • 🇺🇸United States kentr Durango, CO

    Priority to Major because #21 tagged this with SC 2.1.1 and that SC is Level A.

    I'm looking at the MR.

  • 🇺🇸United States kentr Durango, CO

    My last comment should have referenced #29. I edited my comment to correct.

    Also adding STR to help with testing / reviewing.

  • Merge request !12653Merge Request for Patch #17 → (Open) created by kentr
  • Pipeline finished with Failed
    5 days ago
    Total: 258s
    #541225
  • Pipeline finished with Success
    4 days ago
    Total: 620s
    #541233
  • Pipeline finished with Success
    4 days ago
    Total: 672s
    #541283
  • 🇺🇸United States kentr Durango, CO

    kentr changed the visibility of the branch 3085811-toolbar-buttons-should to hidden.

  • 🇺🇸United States kentr Durango, CO

    Opened a new MR against 11.x, so I'm hiding the original MR (!653).

    I was able to make this work without scrolling by using only the keydown event, tested manually in Firefox and Brave (Chromium) on Mac.

    Noting that neither the original MR nor this new one work for me in Safari v18.5.

    I also discovered that the "Announcements" toolbar item will respond to the space key by the simple addition of the trigger CSS class. That should be a separate issue, b/c it needs tests and probably should also have role="button".

    Removed Global2020 tag because it appears to be outdated.

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

    This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

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

  • Pipeline finished with Success
    4 days ago
    #542269
  • 🇺🇸United States kentr Durango, CO

    Made attempt to fix the patch apply error in #36. The current MR diff applies cleanly to 11.x for me.

    There was one pipeline error that appeared to be related to the recent infrastructure problems and passed when re-run.

  • 🇺🇸United States kentr Durango, CO

    Just added tests involving the ENTER key, as specified by the proposed resolution.

    NW until pipeline passes.

  • Pipeline finished with Success
    3 days ago
    Total: 1874s
    #542567
  • 🇺🇸United States kentr Durango, CO

    Back to needs review.

    Also discovered that SPACE and ENTER keys do work in Safari when tab navigation is enabled the settings.

  • 🇮🇳India libbna New Delhi, India

    I am reviewing this

  • 🇮🇳India libbna New Delhi, India

    I have reviewed the merge request raised by @kentr, and it looks good to me. I’ve attached the before and after videos for reference. Additionally, I’ve added a log on click to verify that both the Space and Enter keys function as expected.

  • 🇨🇦Canada mgifford Ottawa, Ontario

    What else is needed to move this to RTBC?

  • Pipeline finished with Success
    2 days ago
    Total: 718s
    #543473
  • 🇺🇸United States kentr Durango, CO

    I misunderstood the reason for using keyup with the space key.

    I'll change it back to using two events and clarify that in the IS.

Production build 0.71.5 2024