Contrib.social

Accessibility issues when adding elements to a form

Open on Drupal.org →
Created on 3 April 2025, 10 days ago

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:

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.

🐛 Bug report
Status

Active

Version

6.3

Component

Code

Created by

🇫🇮Finland Tuuuukka

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

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024