Regression: vertical tabs are not keyboard accessible.

Problem/Motivation

The vertical tabs javascript has been refactored and improved in D8, however an accessibility problem has been introduced.

In D7, a sighted keyboard user can use the keyboard to tab through the vertical tabs, and access any tab they want by pressing enter when the when the desired tab is focussed.

In D8, when a keyboard user arrives at a vertical tabset using the tab key, they become stuck at the first tab. Pressing tab again should allow the user to cycle through all tabs to select the one they want. The upshot is that some configuration options will NOT be available at all to keyboard users. For example, a keyboard user will be prevented from turning off the "Display author and date information" option for node types.

This is somewhat mitigated for screenreader users, as the vertical tab links are inside list-items. Many screenreaders provide controls to cycle through list-items, so there is a workaround route to select the desired tab.

Proposed resolution

Fix it. D8 behaviour should stay the same as D7.

Remaining tasks

User interface changes

bug fix - make it work as intended. Restore the D7 behaviour for keyboard navigation.

API changes

None proposed.

Data model changes

None proposed.

Beta phase evaluation

Reference: https://www.drupal.org/core/beta-changes
Issue category Bug because it's a regression from Drupal 7
Issue priority Major because it's a regression and made UX issue
Prioritized changes The main goal of this issue is usability and accessibility

Comments

andrewmacpherson created an issue. See original summary.

andrewmacpherson’s picture

Priority: Normal » Major

Bumping to major. This is a failure at WCAG level A, and a regression which WILL break Drupal for a clear group of users:

  • Definitely fails SC 2.1.1 (keyboard operable)
  • Borderline failure of SC 2.1.2 (no-keyboard-trap). Technically, you can get out of it by pressing enter, then tabbing past the options in that field. It's a bit of a WTF barrier until you work that out though.
andrewmacpherson’s picture

I've been looking at the D7 and D8 versions of vertical-tabs.js, and I have a fix. Expect a patch soon.

andrewmacpherson’s picture

StatusFileSize
new603 bytes

This might turn out to be an easy fix.

andrewmacpherson’s picture

Explanation: the patch in #4 nests event.preventDefault() correctly, so we only prevent default link behaviour when the enter key is pressed. Pressing tab, page up, space, etc. should continue to have the default behaviour.

Here is what D7 does. We only prevent default behaviour when the enter key is detected:

  // Keyboard events added:
  // Pressing the Enter key will open the tab pane.
  this.link.keydown(function(event) {
    if (event.keyCode == 13) {
      self.focus();
      // Set focus on the first input field of the visible fieldset/tab pane.
      $("fieldset.vertical-tabs-pane :input:visible:enabled:first").focus();
      return false;
    }
  });

Compare this with D8. Default behaviour is prevented regardless of which key was pressed. Now, the enter key is the only key which does anything:

    // Keyboard events added:
    // Pressing the Enter key will open the tab pane.
    this.link.on('keydown', function (event) {
      event.preventDefault();
      if (event.keyCode === 13) {
        self.focus();
        // Set focus on the first input field of the visible details/tab pane.
        $(".vertical-tabs__pane :input:visible:enabled").eq(0).trigger('focus');
      }
    });

Consequently, the user cannot press the tab key to move focus to the next vertical tab link.

The patch in #4 corrects this by nesting event.preventDefault() correctly.

andrewmacpherson’s picture

Status: Active » Needs review
andrewmacpherson’s picture

Issue summary: View changes
googletorp’s picture

Status: Needs review » Reviewed & tested by the community

Reviewed and tested the code, all looks good.

andrewmacpherson’s picture

Status: Reviewed & tested by the community » Needs review

Thanks googletorp, but we're still waiting for the test bots to smile ;-)

andrewmacpherson’s picture

Issue summary: View changes
googletorp’s picture

Issue summary: View changes
Status: Needs review » Reviewed & tested by the community

Add beta evaluation, so all it good to go. (Assuming test bot doesn't fail, but since test bot doesn't test JS I can't see this possibly failing)

andrewmacpherson’s picture

Awesome, thanks googletorp.

mgifford’s picture

This could be a record between posted & getting into Core... Great job guys!

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 4: regression_vertical-2574917-4.patch, failed testing.

nod_’s picture

Status: Needs work » Reviewed & tested by the community

googletorp’s picture

Retesting issue, as the fails shouldn't be related to this issue - RTBC when patch turn green again.

catch’s picture

Status: Reviewed & tested by the community » Fixed

  • catch committed 51a7c2e on 8.0.x
    Issue #2574917 by andrewmacpherson, googletorp: Regression: vertical...

Status: Fixed » Closed (fixed)

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

quietone’s picture