Problem/Motivation

The table drag handles are no longer keyboard-accessible. These are used in many places in the content-authoring and site-building UIs.

When table drag handles have focus, the up/down arrow keys should re-order the table rows. This has stopped working. It was working as of D8.0.0-beta10, and works in D7.43.

Where the table rows have a tree structure (e.g. menu UI) the left/right keys let a user change the indented (parent) relationship. The left/right keys are still working as expected.

Steps to Reproduce

  1. Install 7.43
  2. Admin > Structure > Menus > Management >list links
    /#overlay=admin/structure/menu/manage/management
  3. Tab a bunch until focus is on the arrow(handle) for SubMenuItem (i.e. Dashboard)
    focusonhandle

Up Arrow

  1. Focus on Dashboard
  2. Press up arrow
    upfocusonhandle
  3. left/right arrow doesn't do anything

Down Arrow

  1. Focus on Dashboard
  2. Press down arrow
    downfocusonhandle
  3. left/right arrow doesn't do anything

Left/Right Arrow

  1. Focus on Dashboard
  2. Press down arrow a lot to get it under Taxonomy.
  3. left arrow does something
    yesleftfocusonhandle
  4. right arrow does something
    yesrightfocusonhandle

Proposed resolution

Restore the old keyboard behaviour:

  • When a drag handle has focus, up-down arrow keys change the vertical order of the table rows.
  • When drag handles are used on tree structures, the left/right keys can be used to control indentation.

Remaining tasks

  • Find out where the regression happened. - DONE. It was broken by commit dcf9ab4, between 8.0.0-beta11 and 8.0.0-beta12.
  • Fix it - restore old keyboard behaviour.

User interface changes

None as such. This is about restoring keyboard-accessible behaviour that stopped working. No changes are intended for pointing devices such as mice.

API changes

None.

Data model changes

None.

Comments

andrewmacpherson created an issue. See original summary.

andrewmacpherson’s picture

Priority: Normal » Major

Prioritizing as major, because it affects a LOT of site-builder and content-editor tasks.

It's mitigated by the row weights fallback UI, but that's far more tedious to use. I expect this would be a big disappointment for keyboard users upgrading from D7 :-(

andrewmacpherson’s picture

Title: [regression] Table Drag handles no longer respon to up/down arrow keys » [regression] Table Drag handles no longer respond to up/down arrow keys
andrewmacpherson’s picture

Issue summary: View changes

Works in 8.0.0-beta10

andrewmacpherson’s picture

Issue summary: View changes

It stopped working by 8.0.0-beta12

andrewmacpherson’s picture

Issue summary: View changes
Related issues: +#2489826: tabledrag is broken

Git bisect narrows it down to commit dcf9ab4.

#2489826: tabledrag is broken

Oh, the irony ;-) That issue was about fixing the in-out nesting behaviour of tabledrag with tree nesting. The left/right arrow keyboard behaviour is indeed currently working in 8.1.1, but the up/down arrow keys are not.

andrewmacpherson’s picture

Issue summary: View changes
droplet’s picture

Status: Active » Needs review
FileSize
1.72 KB

My bad. Totally forget about keyboards testing

andrewmacpherson’s picture

@droplet Thanks. I'll test this soon.

andrewmacpherson’s picture

Status: Needs review » Reviewed & tested by the community

Looking good! I tried editing the administration menu (which has a tree) and the field UI for content types (single-level). Keyboard behaviour is fixed, and mouse-drag behaviour is still working as expected.

So far I've tested it with Firefox 46 and Chromium 49 on Linux. The patch only changes some jQuery which has good cross browser support, so let's RTBC this.

alexpott’s picture

Status: Reviewed & tested by the community » Needs work
Issue tags: +Needs tests

Looks like the new JavascriptTestBase could be used here.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

droplet’s picture

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

techmsi’s picture

Bug Still exists

Keys up/down, right/left still don't work.

Area tested

  • Admin Menu

Tested on simplytest.me with & without patch

on Chrome 55

  • in drupal 7.43
  • in drupal 8.3.x

Patch doesn't make an item in the menu move with the arrow keys
On 7.43 without the patch, I cannot reproduce the key controls working.

techmsi’s picture

droplet’s picture

It works after patching (in Chrome 58). Ensure you've clean the caches.

xjm’s picture

Thanks @techmsi for the thorough issue update and testing steps! Adding issue credit.

xjm’s picture

xjm’s picture

@techmsi, there was another contributor you looked at this issue during the sprint; do you know their username?

droplet’s picture

Status: Needs work » Needs review

I tested it on my Mac Chrome 55. Still working. If anyone could capture a GIF or VIDEO that will help.

Note: It won't drag on the single parent. For example in D8 Admin menu, you can't drop default "Administration".

Needed more debug info. Thanks ALL.

droplet’s picture

xjm’s picture

Issue tags: +Triaged D8 major

@catch, @cilefen, @alexpott, @Cottser, @lauriii and I discussed this issue and agreed that it is major priority due to the impact of the accessibility regression. Thanks @techmsi for helping get this triaged!

drpal’s picture

Version: 8.3.x-dev » 8.4.x-dev
Assigned: Unassigned » drpal

Reviewing.

drpal’s picture

Assigned: drpal » Unassigned
FileSize
479.63 KB
595.29 KB

Alright. Tested this in Chrome 58 on macOS. This probably still needs JS tests.

Prior to the patch the keyboard interaction behavior is a strange, as expected.

With the patch applied, the keyboard interaction behavior is what I would expect.

mgifford’s picture

Very nice visualization @drpal how did you make it?

We should include it more often.

droplet’s picture

@mgifford,

I'm not sure what @drpal used. But on MacOS, you can do it as simple as:
http://osxdaily.com/2013/06/21/mac-virtual-keyboard-os-x/

Windows:
https://support.microsoft.com/en-us/help/10762/windows-use-on-screen-key...
(Windows, only click with mouse has hover effect)

droplet’s picture

Status: Needs review » Needs work

Missing a test :)

mgifford’s picture

Thanks @droplet - no idea how I missed that.. Very useful!