Alt + a search shortcut throws when the search tab is removed and focuses a hidden field with Gin

Problem/Motivation

The Alt + a shortcut in admin_toolbar_search/js/admin_toolbar_search.keyboard_shortcut.js fails in two ways. Both were reproduced on 3.6.3 with Drupal 11.4.7. The file is the same in 3.x-dev.

1. It throws when the search tab is not on the page.

// Get the search tab which should *always* be loaded.
const searchTab = context.getElementById('admin-toolbar-search-tab');
const searchTabStyle = window.getComputedStyle(searchTab);

A site can remove the administration_search toolbar item in hook_toolbar_alter() to keep only the search field (administration_search_field). The libraries are attached to administration_search only, so the alter hook has to move #attached onto the field item to keep the stylesheet and autocomplete. The shortcut library then loads without the tab, searchTab is null, and every Alt + a logs:

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

The field placeholder still reads "(Alt + a)".

2. With Gin it focuses a hidden copy of the field.

With Gin 5.0.15 and Gin Toolbar 3.0.3 on the new navigation layout (gin.settings classic_toolbar: new), the toolbar is rendered twice: #toolbar-administration, which is display: none, and #toolbar-administration-secondary, which is visible. Every toolbar id is duplicated, including #admin-toolbar-search-field-tab and #admin-toolbar-search-field-input. getElementById() returns the first match, which is the hidden one, and .focus() on it does nothing. There is no error. Focus stays on body.

This second case needs no custom code. It happens with the search tab present.

Steps to reproduce

Case 1:

1. Enable Admin Toolbar Search. Leave "display menu item" off and the keyboard shortcut on.
2. In a custom module, implement hook_toolbar_alter(): copy $items['administration_search']['#attached'] onto $items['administration_search_field'], then unset $items['administration_search'].
3. Rebuild caches, open any admin page at desktop width and press Alt + a.
4. The console shows the TypeError above. The field is not focused.

Case 2:

1. Install Gin and Gin Toolbar and select the new navigation layout.
2. Open any admin page at desktop width. In the console, document.querySelectorAll('[id="admin-toolbar-search-field-input"]').length returns 2.
3. Press Alt + a.
4. Nothing is focused. document.activeElement is still body.

Proposed resolution

Look the elements up by visibility instead of by first id match, and return when neither is present:

const visible = (id) =>
  Array.from(document.querySelectorAll('[id="' + id + '"]')).find(
    (element) => element.getClientRects().length > 0,
  );

const field = visible('admin-toolbar-search-field-input');
if (field) {
  field.focus();
  return;
}
const searchTab = visible('admin-toolbar-search-tab');
if (!searchTab) {
  return;
}
// Existing tray toggle and focus on #admin-toolbar-search-input.

A visible field input already means the field tab is shown and the search tab is hidden, so the getComputedStyle() check is no longer needed.

#3532249: Uncaught TypeError: toolbarElement.querySelector(...) is null fixed the same kind of null access in admin_toolbar.toggle_shortcut.js with existence checks.

Separately, attaching the libraries to both toolbar items would let a site remove the tab without losing the search stylesheet and autocomplete.

Related: #3571169: Two search inputs display when using Gin theme (two search inputs with Gin), #3557278: Gin theme: Improve compatibility support (Gin compatibility), and the duplicate toolbar ids in Gin Toolbar: https://git.drupalcode.org/project/gin_toolbar/-/work_items/3373687

Remaining tasks

• Merge request with the lookup above.
• Test coverage for a page without the search tab and for a page with a hidden duplicate of the field.

User interface changes

None.

API changes

None.

Data model changes

None.