Problem/Motivation

When adding an element to a form, all tabs are closed if current URL includes a hash that is not a tab id. This is problematic especially when you're using keyboard for navigating the site, as selecting "skip to main content" adds the hash #main-content at the end of the URL. The sidebar will look like this:

All tabs are closed in the sidebar

And what's worse, you can't focus on the tabs by using keyboard only, i.e. there is no way to actually add an element to the form. See the attached video for a full example (I'm not clicking anything with the mouse cursor there, just highlighting a couple of things).

This is where the hash stuff is handled: https://git.drupalcode.org/project/webform/-/blob/6.3.x/js/webform.form.....

Steps to reproduce

A simple version of the steps needed:

  1. Go to /admin/structure/webform/manage/contact#main-content.
  2. Select Add element.
  3. Select any element from the list.
  4. See that the sidebar has no active tab open by default.

A practical example when navigating with keyboard only:

  1. Go to /admin/structure/webform/manage/contact
  2. Use TAB key and ENTER to select Skip to main content.
  3. Use TAB key to focus Add element and press ENTER.
  4. Use TAB key to focus any element in the list and select it with ENTER.
  5. See that the sidebar has no active tab open by default.
  6. Note that you can't select/open/activate any of the tabs by using keyboard only

Proposed resolution

If there is no tab to open with the given hash, open the first tab. Also make it possible to open and navigate through the tabs with keyboard only.

CommentFileSizeAuthor
#7 webform accessibility.mp41.35 MBkanchan bhogade
webform.mp4710.77 KBtuuuukka
Kuvakaappaus_20250403_092550.png14.24 KBtuuuukka

Issue fork webform-3517069

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

tuuuukka created an issue. See original summary.

jrockowitz changed the visibility of the branch 3517069-accessibility-issue-tabs to hidden.

jrockowitz made their first commit to this issue’s fork.

jrockowitz opened merge request !623

jrockowitz’s picture

jrockowitz commented
Status: Active » Needs review
tuuuukka’s picture

tuuuukka commented

MR 623 seems to fix the issue nicely. What about the failing PHPUnit test (https://git.drupalcode.org/project/webform/-/jobs/4876195#L713) though?

kanchan bhogade’s picture

kanchan bhogade commented
StatusFileSize
new webform accessibility.mp41.35 MB

Hi
I have tested MR 623 on Drupal 11.x
Applied MR successfully,

Test Result:
But the sidebar/Tabs are not accessible by the tab key; issue still not resolved.
and in summary MR showing 'open failed pipeline"

moving to "Needs work"

Attaching video for reference

kanchan bhogade’s picture

kanchan bhogade commented
Status: Needs review » Needs work
jrockowitz’s picture

jrockowitz commented

I am confused because the video in #7 shows how users can tab in the the sidebar.

The MR makes complete sense to me and should be merged.

jrockowitz’s picture

jrockowitz commented
Status: Needs work » Postponed (maintainer needs more info)

  • jrockowitz committed 54e38b45 on 6.3.x 
    [#3517069] feat: Accessibility issues when adding elements to a form

By...
jrockowitz’s picture

jrockowitz commented
Status: Postponed (maintainer needs more info) » Fixed

Now that this issue is closed, please review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, please credit people who helped resolve this issue.

  • jrockowitz committed 54e38b45 on 6.x 
    [#3517069] feat: Accessibility issues when adding elements to a form

By...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.