Issue #3210435 by javi-er, kostyashupenko, sagarchauhan, mherchel, bnjmnm,...

Issue #3210435 by javi-er, kostyashupenko, sagarchauhan, mherchel, bnjmnm, Kristen Pol, ckrina, saschaeggi: Consistent Navigation violation with secondary tabs

core/themes/claro/css/components/tabs.css

@@ -194,6 +194,11 @@
   .tabs-wrapper {
     display: flex;
   }
+
+  .tabs-wrapper--secondary {
+    position: relative;
+  }
+
   .is-horizontal .tabs {
     flex-direction: row;
     width: auto;
@@ -239,6 +244,7 @@
     background: none;
     font-size: 1rem;
   }
+
   .is-horizontal .tabs__tab.is-active {
     order: 0;
     background: none;

core/themes/claro/css/components/tabs.pcss.css

@@ -176,6 +176,11 @@
   .tabs-wrapper {
     display: flex;
   }
+
+  .tabs-wrapper--secondary {
+    position: relative;
+  }
+
   .is-horizontal .tabs {
     flex-direction: row;
     width: auto;
@@ -221,6 +226,7 @@
     background: none;
     font-size: var(--font-size-base);
   }
+
   .is-horizontal .tabs__tab.is-active {
     order: 0;
     background: none;

core/themes/claro/templates/menu-local-tasks.html.twig

@@ -21,7 +21,7 @@
 {% endif %}
 {% if secondary %}
   <h2 id="secondary-tabs-title" class="visually-hidden">{{ 'Secondary tabs'|t }}</h2>
-  <nav role="navigation" class="tabs-wrapper is-horizontal is-collapsible" aria-labelledby="secondary-tabs-title" data-drupal-nav-tabs>
-    <ul class="tabs tabs--secondary clearfix" data-drupal-nav-tabs-target>{{ secondary }}</ul>
+  <nav role="navigation" class="tabs-wrapper tabs-wrapper--secondary is-horizontal" aria-labelledby="secondary-tabs-title">
+    <ul class="tabs tabs--secondary clearfix">{{ secondary }}</ul>
   </nav>
 {% endif %}

core/themes/claro/templates/navigation/menu-local-task.html.twig

@@ -15,7 +15,15 @@
  * @see template_preprocess_menu_local_task()
  */
 #}
-<li{{ attributes.addClass('tabs__tab', 'js-tab', is_active ? 'is-active', is_active ? 'js-active-tab') }}>
+{%
+  set classes = [
+    'tabs__tab',
+    level == 'primary' ? 'js-tab',
+    is_active ? 'is-active',
+    is_active ? 'js-active-tab',
+  ]
+%}
+<li{{ attributes.addClass(classes) }}>
   {{ link }}
   {% if is_active and level == 'primary' %}
     <button class="reset-appearance tabs__trigger" aria-label="{{ 'Tabs display toggle'|t }}" data-drupal-nav-tabs-trigger>