FilteredActionList: filter input references a missing list while loading or showing a message #8633

Description

The filter input in FilteredActionList always renders aria-expanded="true" and aria-controls={listId}. When the body shows a loader (loadingType bodySpinner or bodySkeleton) or a message (for example, no results), the list with that id is not rendered, so the combobox points at an element that does not exist.

Assistive technology is told a popup is open when no list is rendered, and axe reports aria-valid-attr-value (critical): Invalid ARIA attribute value: aria-controls=":r0:".

SelectPanel renders FilteredActionList, so it can show the same markup in its loading and empty states.

Steps to reproduce

1. Open any of these Storybook stories:
   • https://primer.style/react/storybook/?path=/story/components-filteredactionlist-features--loading-with-body-spinner
   • https://primer.style/react/storybook/?path=/story/components-filteredactionlist-features--loading-with-body-skeleton
   • https://primer.style/react/storybook/?path=/story/components-filteredactionlist-features--with-no-results-message
2. Inspect the filter input: it has aria-expanded="true" and aria-controls=":r0:".
3. document.getElementById(':r0:') returns null.
4. Running axe on the story reports aria-valid-attr-value.

Version

v38.43.0 (current main)

Browser

All (found with axe-core 4.10 in Chromium)