Problem/Motivation

The behavior of vertical tabs Drupal.behaviors.verticalTabs applies the JavaScript features only when the actual screen width is bigger than 640 pixels (or the value of drupalSettings.widthBreakpoint). In the Claro theme, we want to switch between the accordion look and tab look dynamically, right after the browser viewport was resized, without relying on a page (re)load.

Right now, this is not possible without replacing the whole core/misc/vertical-tabs.js; by defining drupalSettings.widthBreakpoint with 0 (or 1?..). Now, this setting is used only by vertical tabs, but since the name of this configuration does not suggest that it is (and will be) used only by vertical tabs, it seems to be safer to remove the unneeded condition from the functionality and replace the original JavaScript asset with our own implementation.

Proposed resolution

Add an another (optional) width breakpoint settings that is used only by vertical tabs, and fall back to the original values if it is undefined:
Replace const width = drupalSettings.widthBreakpoint || 640; with something like const width = drupalSettings.verticalTabsWidthBreakpoint || drupalSettings.widthBreakpoint || 640;.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#4 3081519-4.patch1.06 KBbnjmnm

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
Issue summary: View changes
StatusFileSize
new 3081519-4.patch1.06 KB
bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Status: Active » Needs review
nod_’s picture

nod_
Primary language French
Location Lille
commented
Title: Define a width breakpoint drupalSettings key that is used only by vertical tabs » Truly responsive vertical tabs
Status: Needs review » Needs work
Parent issue: » #1277352: Responsive vertical tabs
Related issues: +#2971840: Make responsiveness for vertical tabs configurable, +#1812298: Handle mobile orientation change for JS widgets

Let's not add more tech debt, also scoping this type of change to claro only is staring to be concerning. If there is so much override needed in claro it means the core version has problems, either for altering the feature or the markup or something.

The breakpoint was added as a quick & dirty fix. Not as something that should stay or be extended. See the discussion here #1277352: Responsive vertical tabs. The solution should be driven mainly by CSS to simplify (or avoid doing) #2971840: Make responsiveness for vertical tabs configurable. And this issue is part of #1812298: Handle mobile orientation change for JS widgets.

Check out backdrop, they have responsive vertical tabs based on the patch submitted in the first issue: https://github.com/backdrop/backdrop/blob/1.x/core/misc/vertical-tabs.js https://github.com/backdrop/backdrop/blob/1.x/core/misc/vertical-tabs.css

I want to do a proper fix this time and not add more tech debt.

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Status: Needs work » Postponed

#6 makes sense. This issue may not needed at all, but I'll set it to postponed since there are other issues that should be addressed regardless of the final approach, but it may still be necessary to have width checking in JavaScript. This is due to
the narrow and wide implementations having two different UI patterns. Currently, both Drupal and Backdrop fail to communicate this to assistive tech. A group of details elements is quite different to a screenreader than a tablist. I just added a patch to #3081500: Accessibility bugs with vertical tabs that properly represents vertical tabs as a tablist. It may be possible to achieve this with only CSS via careful hiding/showing of elements, but I'm not certain of this.

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

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.