Vertical Tabs CSS classes applying to non-vertical tab detail element groups

Here is a simple patch for this issue.

Tested manually for regression and everything seemed to work as expected. However, I think we should add test coverage for the bug just to make sure that we don't break this again in future.

I had a second look at the original patch code posted and worked a little on refactoring it. The idea behind the refactor is to include all parents, and avoid the overreach of all the details elements.

I'm posting here my work in progress as a patch.

Updated the comments.

I'm posting here a potential test, in a work in progress state. I ran out of time today, please feel free to jump and fix/complete it :)

core/tests/Drupal/KernelTests/Core/Theme/ClaroVerticalTabsTest.php

<?php

namespace Drupal\KernelTests\Core\Theme;

use Drupal\KernelTests\KernelTestBase;
use Drupal\Core\Form\FormState;

/**
 * Confirms that Claro can render vertical tabs correctly.
 *
 * @group Theme
 */
class ClaroVerticalTabsTest extends KernelTestBase {

  /**
   * {@inheritdoc}
   */
  protected static $modules = ['system'];

  /**
   * Confirms that Claro can render vertical tabs correctly.
   */
  public function testVerticalTabs() {
    // Enable the Claro theme.
    \Drupal::service('theme_installer')->install(['claro']);
    $this->config('system.theme')->set('default', 'claro')->save();

    $form = [
      '#parents' => [],
      '#array_parents' => [],
      '#tree' => FALSE,
    ];
    $form['container'] = [
      '#type' => 'container',
      '#title' => 'Container',
    ];
    $form['container_details'] = [
      '#type' => 'details',
      '#title' => 'Details',
      '#group' => 'container',
    ];
    $form['vertical_tabs'] = [
      '#type' => 'vertical_tabs',
      '#title' => 'Vertical Tabs',
    ];
    $form['vertical_tabs_details'] = [
      '#type' => 'details',
      '#title' => 'Details',
      '#group' => 'vertical_tabs',
    ];

    /** @var \Drupal\Core\Form\FormBuilderInterface $form_builder */
    $form_builder = $this->container->get('form_builder');
    $form_state = new FormState();
    $form_builder->doBuildForm('form', $form, $form_state);

    /** @var \Drupal\Core\Render\RendererInterface $renderer */
    $renderer = $this->container->get('renderer');
    $output = $renderer->renderRoot($form);

    // todo: Missing assertions (only one of the details elements should have vertical-tabs__item class).
  }
}

This is an iteration on jplana's code (#13).
I've added the assertions which tries to find the classes in the elements.
The output markup is missing the bug, but the structure of the form element has the incorrect class.

added patch as#14 custom command failed.
please review the patch.

verified and tested patch #19 and applied successfully thanks @joelpittet.

Hi @Rinku Jacob 13 thanks for uploading a screenshot, however a screenshot showing a patch applies is not something we give issue credit for.
We have automation to tell if a patch applies or not.

I was concerned that the #parents couldn't be relied for this but it seems like vertical tabs is documented to only work in forms and Drupal\Core\Render\Element\VerticalTabs::preRenderVerticalTabs already depends on it.

Committed c5820b9 and pushed to 9.3.x. Thanks!

Since this is fixing a major bug, I'm moving this to 9.2.x for a potential backport.

Backported this to 9.2.x because @catch +1'd on Slack.