Details and vertical tabs now receive child error count and extra classes

If nested child elements within details elements and vertical tabs have errors, these errors are internally recorded on the $element['#children_errors'] property.

The count of these child errors are exposed to the front-end as the DOM element data attribute data-child-error-count. In addition these elements get the class error.

For accessibility, a visually-hidden text is added to indicate the error state.

Vertical tabs are details elements enhanced by JavaScript. The JavaScript theme function used to render this element (Drupal.theme.verticalTab) now receives the error indicator element from the summary as a property on the settings argument (settings.childErrorIndicator).

The following shows the results in the Default Admin theme.

Vertical tabs:

Details (accordion style):

Details (regular style):

Vertical tabs theme function change

Before

  Drupal.theme.verticalTab = function (settings) {
    const tab = {};
    tab.title = $('<strong class="vertical-tabs__menu-item-title"></strong>');
    tab.title[0].textContent = settings.title;
    tab.item = $(
      '<li class="vertical-tabs__menu-item" tabindex="-1"></li>',
    ).append(
      (tab.link = $('<a href="#"></a>')
        .append(tab.title)
        .append(
          (tab.summary = $(
            '<span class="vertical-tabs__menu-item-summary"></span>',
          )),
        )),
    );
    return tab;
  };

After

  Drupal.theme.verticalTab = function (settings) {
    const tab = {};
    tab.title = $('<strong class="vertical-tabs__menu-item-title"></strong>');
    tab.title[0].textContent = settings.title;
    tab.item = $(
      '<li class="vertical-tabs__menu-item" tabindex="-1"></li>',
    ).append(
      (tab.link = $('<a href="#"></a>')
        .append(tab.title)
        .append(
          (tab.summary = $(
            '<span class="vertical-tabs__menu-item-summary"></span>',
          )),
        )),
    );
    if (settings.childErrorIndicator.length) {
      tab.item.addClass('error');
      tab.title.append(settings.childErrorIndicator);
    }
    return tab;
  };