In Move Block dialog tabledrag, active state colors are confusing

Created on 12 April 2019, over 5 years ago
Updated 18 July 2024, 4 months ago

Problem/Motivation

At DrupalCon Seattle, we were testing the new keyboard navigation feature in Layout Builder. When using table drag to reorder items, we tab to an item that we want to drag, but the background color does not change to indicate the item is selected until you move the item with the up or down arrow, or else tab away.

Steps to reproduce (and see screenshots):
1) Core 8.8.x
2) Enable Layout Builder
3) Structure->Basic Page->Edit->Layout Options : Check "Use Layout Builder"
4) Manage Display -> Manage Layout
5) Use mouse or keyboard to activate the contextual menu and select "Move"
6) Now use keyboard-only techniques.
7) Use tab to navigate to one of the items in the table that you want to "tabledrag" to a different position. The tabledrag icon indicates the selection, but not the item background.

8) Now tab to the next item. Upon focus change, suddenly the previous item has its highlighted background set to the active color. This color change came too late and is actually incorrect since the active item is now the item below.

Proposed resolution

Make sure the "active" background color is set on the actual active item.
Change the background color at the same time / with the same event as is used by the tabledrag icon?

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

πŸ› Bug report
Status

Closed: outdated

Version

11.0 πŸ”₯

Component
Layout builderΒ  β†’

Last updated about 12 hours ago

Created by

πŸ‡ΊπŸ‡ΈUnited States ldegoursac@gmail.com

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.

  • Blocks-Layouts

    Blocks and Layouts Initiative. See the #2811175 Add layouts to Drupal issue.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡³πŸ‡ΏNew Zealand danielveza Brisbane, AU

    I've ran some testing of this to see if it's still an issue and I believe it can be closed.

    I've attached a screenshot of the move block off-canvas with a fresh install of Drupal 11, only using keyboard controls.

    The block you are actively interacting with now gets a border around the drag widget and the background gets a darker colour.

    Leaving this open for the moment to see if others have thoughts or if this needs further work.

  • Status changed to Postponed: needs info 8 months ago
  • πŸ‡³πŸ‡ΏNew Zealand danielveza Brisbane, AU

    Marking as postponed on getting others thoughts

  • πŸ‡ΊπŸ‡ΈUnited States bnjmnm Ann Arbor, MI

    Unfortunately I'm not able to confirm #22 and #23 at the moment, but I will mention that since this issue was filed, significant improvements were made to the off canvas CSS resets that likely caused this problem, so it's feasible this was addressed as part of that.

  • Status changed to Closed: outdated 4 months ago
  • πŸ‡³πŸ‡ΏNew Zealand danielveza Brisbane, AU

    No further updates have been provided in over 3 months since this was marked as Postponed (maintainer needs more info). This appears to have been improved since this issue was first opened as per the screenshot in #22, so I'm now marking this as closed.

    Thanks!

Production build 0.71.5 2024