diff --git a/css/src/components/vertical-tabs.css b/css/src/components/vertical-tabs.css index e325bbb..08456bb 100644 --- a/css/src/components/vertical-tabs.css +++ b/css/src/components/vertical-tabs.css @@ -56,10 +56,6 @@ float: right; } -/** - * If toolbar isn't vertical or is collapsed, this is the width where the menu - * wrapper's inherited 40% width is equal to 20rem. - */ @media screen and (min-width: 85em) { .vertical-tabs__menu { width: var(--vertical-tabs-menu-width); @@ -267,7 +263,7 @@ margin-top: 0; margin-bottom: 0; position: relative; - top: -1px; /* Need to hide the pane wrapper clearfix's height */ + top: -1px; z-index: 1; } /* This clearfix makes the pane wrapper at least as tall as the menu. */ @@ -294,10 +290,11 @@ /** * The actual vertical tabs pane. * - * This is a claro-details element with a vertical-tabs-item modifier. + * This is a claro-details element which in this case is also + * vertical-tabs__item. */ .vertical-tabs__item { - /* We should cover the border of vertical-tabs__items. */ + /* Render on top of the border of vertical-tabs__items. */ margin: calc(var(--vertical-tabs-border-size) * -1) calc(var(--vertical-tabs-border-size) * -1) 0; border-radius: 0; } diff --git a/js/claro.vertical-tabs.es6.js b/js/claro.vertical-tabs.es6.js index 8a9556e..7380001 100644 --- a/js/claro.vertical-tabs.es6.js +++ b/js/claro.vertical-tabs.es6.js @@ -2,8 +2,9 @@ * @file * Defines vertical tabs functionality. * - * This file replaces core/misc/vertical-tabs.js to fix the bugs in the original - * asset and make our custom needs feasible: + * This file replaces core/misc/vertical-tabs.js to fix some bugs in the + * original implementation, as well as makes minor changes to enable Claro + * designs: * 1. Replaces hard-coded markup and adds 'js-' prefixed CSS classes for the * JavaScript functionality (https://www.drupal.org/node/3081489). * - The original Drupal.behavior and Drupal.verticalTab object hard-code @@ -16,30 +17,28 @@ * - .vertical-tab--hidden - replaced by .js-vertical-tab-hidden. * 2. Fixes accessibility bugs (https://www.drupal.org/node/3081500): * - The original Drupal.verticalTab object doesn't take care of the right - * aria attributes. Whatever happens, every details summary element are - * described with aria-expanded="false" and aria-pressed="false". + * aria attributes. Every details summary element is described with + * aria-expanded="false" and aria-pressed="false". * - The original Drupal.verticalTab object uses a non-unique CSS id - * '#active-vertical-tab' for the marker of the active menu tab. Sadly, - * this will be very wrong on the filter format and editor configuration - * form where multiple vertical tabs may appear + * '#active-vertical-tab' for the marker of the active menu tab. This leads + * to broken behavior on filter format and editor configuration form where + * multiple vertical tabs may appear * (/admin/config/content/formats/manage/basic_html). - * Fearing the duplicated id, if the user changes the active tab, this - * marker will be removed from the other vertical tab's active menu item - * as well. - * - Auto-focus bug: if the vertical tab is activated by pressing Enter on + * - Auto-focus bug: if the vertical tab is activated by pressing enter on * the vertical tab menu link, the original Drupal.verticalTab object tries - * to focus the first visible :input element in a vertical tab content. But - * the implementation is wrong: on the 'Filter format and editor' form + * to focus the first visible :input element in a vertical tab content. The + * implementation doesn't work in all scenarios. For example, on the + * 'Filter format and editor' form * (/admin/config/content/formats/manage/basic_html), if the user presses - * the Enter key on the last vertical tabs element's menu link ('Filter + * the enter key on the last vertical tabs element's menu link ('Filter * settings'), the focused element will be the first vertical tabs * ('CKEditor plugin settings') active input, and not the expected one. - * 3. Fixes a functionality issue (bug?) (https://www.drupal.org/node/3081508): + * 3. Consistency between browsers (https://www.drupal.org/node/3081508): * We have to display the setting summary on the 'accordion look' as well. * Using the original file, these are displayed only on browsers without * HTML5 details support, where core's built-in core/misc/collapse.js HTML5 * details polyfill is in action. - * 4. Helps fulfill our custom needs (https://www.drupal.org/node/3081519): + * 4. Help fulfill our custom needs (https://www.drupal.org/node/3081519): * The original behavior applies its features only when the actual screen * width is bigger than 640 pixels (or the value of the * drupalSettings.widthBreakpoint). But we want to switch between the