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