Focused pane in the right column of node edit may not be an expanded pane

Created on 9 November 2014, almost 10 years ago
Updated 21 July 2023, about 1 year ago

Problem/Motivation

Because each time the user clicks on a pane in the right column the pane gets focus, a click to expand a pane gives the Summary element focus and a click to collapse a pane also give the summary element focus. This gives rise to the strange behavior that, given that I have pane "A" and pane "B" open, when I close pane "A" so that I can "focus" my attention on the contents of pane "B", the element that is in focus is pane "A" not pane "B".

Additionally the ability to expand any or all of the panes creates a more visual noise on the page and adds to the "tyranny of small decisions" effect while at the same time possibly forcing scroll when it might not really be necessary.

Last, there is the usability regression where, when all of the panes are collapsed, they do not have the summary of configuration that is so effective in vertical tabs at preventing the user from opening and closing all of the tabs to see what is configured/configurable.

The whole pane, not just the summary, should be in focus

I want to see what's in URL settings by collapsing comment settings

The thing I wanted to hide (URL settings) is what is in focus, not the thing I wanted to show (comment settings).

Even worse, because of the focus effect, my eye is tricked into thinking that the URL alias field is a child of Comment settings!

Proposed resolution

Return to the approach used in vertical tabs where only one pane is visible at a time with summaries of the configured options. Instead of rendering as tabs use accordion effect. Also remove extraneous styling to take away excess visual noise. Last, replace the default focus effect with one that will not seperate the label from the pane.

Collapsed

Expanded

Remaining tasks

  • Change behavior back to accordion
  • Revert tab styling to match vertical tabs
  • Remove outline on focus (browser default)
  • Add custom focus effect
  • Make expanded background color #F5F5F2
  • Remove all borders except border left (#ddd) on the component container

User interface changes

All tasks above are UI changes.

  • Add back the summary of configuration as it appears in vertical tabs
  • Remove custom styling and sdd back the styling of the tab tiles from vertical tabs
  • Add a focus effect to replace the stock browser focus effect so that there is not a separation between the summary and the details elements when in focus
  • Simplify the backgrounds so that only an expanded element has one and it matches seven theme

API changes

πŸ› Bug report
Status

Closed: outdated

Version

9.5

Component
Node systemΒ  β†’

Last updated about 23 hours ago

No maintainer
Created by

πŸ‡ΊπŸ‡ΈUnited States tkoleary

Live updates comments and jobs are added and updated live.
  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

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.

  • πŸ‡¬πŸ‡§United Kingdom nlisgo

    No meaningful contributions have been made to this issue for 9 or more years. A related issue has been tagged which was created around the same time as this and has been more active since.

    I am closing this as a outdated. Please re-open if you think that that other issue does not cover some scope needed here but then we should perhaps narrow the scope in that event.

Production build 0.71.5 2024