Vertical tabs summary is displayed only for browsers without HTML5 details support (below the defined width breakpoint)

Problem/Motivation

The summary of Vertical tabs items is not displayed below the defined width breakpoint except on browsers without HTML5 details support. This is because it is handled by the HTML5 details polyfill (provided by core/misc/collapse.es6.js).

Vertical tabs summary below 640 pixels with in Google Chrome and Microsoft Edge

To reproduce:

  • Install Drupal with Standard profile.
  • Visit /admin/structure/block/manage/bartik_breadcrumbs with a browser that supports HTML5 details with less than 640 pixels browser canvas width.
  • Visit /admin/structure/block/manage/bartik_breadcrumbs with a browser without HTML5 details support with less than 640 pixels browser canvas width.
  • Compare the result.

Proposed resolution

Display the summary of HTML5 details elements on every browser.

Remaining tasks

User interface changes

Summary will be shown for every browser.

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#4 Umami-vtab.png24.02 KBbnjmnm
#4 Seven-vtab.png23.84 KBbnjmnm
#4 Bartik-vtab.png21.44 KBbnjmnm
#4 Stark-vtab.png31.38 KBbnjmnm
#4 3081508-4.patch2.1 KBbnjmnm
Vertical-tabs-summary.png215.78 KBhuzooka

Comments

huzooka created an issue. See original summary.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Status: Active » Needs review
StatusFileSize
new 3081508-4.patch2.1 KB
new Stark-vtab.png31.38 KB
new Bartik-vtab.png21.44 KB
new Seven-vtab.png23.84 KB
new Umami-vtab.png24.02 KB

This adds the value summary to the <summary> element of details using the same JS mechanism used when creating verticial tabs or the IE11 polyfill.

Screenshots are attached for every theme other than Claro, as this is already addressed in Claro via JS specific to that theme.

This does result in different text content of some details elements, it's possible there are tests that will get tripped up by this change. Testbot will be letting us know shortly.

nod_’s picture

nod_
Primary language French
Location Lille
commented
Related issues: +#1936708: Current element values missing from vertical tabs when shown in 2-column layout

There is #1936708: Current element values missing from vertical tabs when shown in 2-column layout also

nod_’s picture

nod_
Primary language French
Location Lille
commented

And if I remember correctly backdrop has a proper responsive vertical tab script, might be good to see how they did it.

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Status: Needs review » Closed (duplicate)

Closing as a duplicate of #1936708: Current element values missing from vertical tabs when shown in 2-column layout. That issue is addressing a wider problem that also applies to details elements in accordions. It will fix the symptoms reported here in a way that doesn't mask an underlying problem.