Indicate on forms sidebar toggle button that sidebar has child element errors

Problem/Motivation

Spin off from #3604037: Indicate that grouping elements have child element errors for UX and a11y.

Child elements in the forms sidebar are invisible to the user when the sidebar is closed. It's the same fundamental problem as with the related grouping element issues.

To improve the user experience and accessibility we should indicate when there are errors 'inside' the closed sidebar. Currently it is hard for the user to find the actual problematic field when the (child) field itself is invisible.

I'm assuming this is Major for the same reasons that the issues for standard grouping elements are.

Steps to reproduce

1. Standard installation
2. Log in as admin
3. Set Default Admin as the admin theme.
4. Install the article test recipe (drush recipe core/tests/fixtures/recipes/article_content_type),
   or create an Article content type & install the Path module (aka path_alias).
5. Go to /node/add/article.
6. Reduce viewport width until the sidebar on the right containing the "advanced" fields collapses.
7. Enter a value in the Title field to limit errors.
8. Click the toggle button to expand the right sidebar.
9. Enter a value without a beginning slash in the URL alias field.
10. Close the sidebar.
11. Clear / reset caches (drush cr). This is a temporary measure.
    (Tested on the MR tugboat preview as of 2026-09-07, and clearing the cache was not necessary. Also, the UX team experienced no issues with it in their second review.)
12. Click the Save button.
    This should cause a validation error: "The alias path has to start with a slash".

Expected

The closed sidebar indicates that there is an invalid field within it, for the same reasons that details and vertical tabs elements indicate that there are child errors for #3604037: Indicate that grouping elements have child element errors for UX and a11y.

See the Proposed resolution for details on the new indicators.

Actual

There's no indication that the closed sidebar contains an invalid field.

Proposed resolution

Add visual and visually-hidden indicators to the toggle button as so:

1. Place the prohibition icon from the top error block at the logical inline start of the toggle button, previous to the sidebar icon.
   This means on the left for LTR and on the right for RTL.
2. In the toggle control's default state the prohibition and sidebar icons are red. (see screenshot in the User interface changes section.)
3. In the hover and focus states, the prohibition icon is red and the sidebar icon is the same as it is now. (see screenshot in the User interface changes section.)
4. Use the input error color from invalid fields for the sidebar icon and the prohibition icon (var(--input--error-color)).
5. Append visually hidden " (sidebar contains error)" to the text content of the toggle control. This is mostly consistent with the hidden text in #3604037: Indicate that grouping elements have child element errors for UX and a11y and #2848507: Indicate that grouping elements have child element errors for ux and a11y.
6. Append " (sidebar contains error)" to the title attribute so that it appears in the tooltip text when hovering over the button.
7. Include both icons in the clickable area of the button.

Remaining tasks

1. Add a visual indicator to the toggle control.
2. Create merge request.
3. Add test.
4. Refactor code to bust the render cache for the toggle button when there are validation errors in the advanced sidebar.
5. Update test.
6. Usability / UX review.
7. Make the element uncacheable, possibly with a lazy builder as @berdir suggested in Slack (?)
8. Take screenshots for the User interface changes section of the issue summary, performing any manual testing that's not covered by the UX review.
9. Create change record (?)

User interface changes

New toggle button tooltip when hovered:

New markup (formatted for readability):

<a 
  class="meta-sidebar__trigger trigger has-error" 
  href="#toggle-sidebar" 
  role="button"
  title="Show sidebar panel (sidebar contains error)" 
  aria-controls="default_admin_sidebar"
  data-drupal-selector="edit-default-admin-sidebar-toggle" 
  data-once="adminSidebarToggle" 
  aria-expanded="false">
  <span
    class="visually-hidden" 
    data-drupal-selector="edit-text">
      Show sidebar panel (sidebar contains error)
    </span>
</a>

Introduced terminology

API changes

Data model changes

Release notes snippet