fix: mark menu notices as disabled options

.changeset/calm-listboxes-notice.md

@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+Fix loading and empty menu notices to satisfy listbox ARIA required children.

packages/react-select/src/Select.tsx

@@ -2056,11 +2056,25 @@ export default class Select<
     } else if (isLoading) {
       const message = loadingMessage({ inputValue });
       if (message === null) return null;
-      menuUI = <LoadingMessage {...commonProps}>{message}</LoadingMessage>;
+      menuUI = (
+        <LoadingMessage
+          {...commonProps}
+          innerProps={{ role: 'option', 'aria-disabled': true }}
+        >
+          {message}
+        </LoadingMessage>
+      );
     } else {
       const message = noOptionsMessage({ inputValue });
       if (message === null) return null;
-      menuUI = <NoOptionsMessage {...commonProps}>{message}</NoOptionsMessage>;
+      menuUI = (
+        <NoOptionsMessage
+          {...commonProps}
+          innerProps={{ role: 'option', 'aria-disabled': true }}
+        >
+          {message}
+        </NoOptionsMessage>
+      );
     }
     const menuPlacementProps = {
       minMenuHeight,

packages/react-select/src/__tests__/Select.test.tsx

@@ -1,5 +1,5 @@
 import React, { KeyboardEvent } from 'react';
-import { render, fireEvent, EventType } from '@testing-library/react';
+import { render, fireEvent, EventType, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import cases from 'jest-in-case';
 
@@ -418,6 +418,26 @@ cases(
   }
 );
 
+test('no options message is rendered as a disabled option', () => {
+  const { getByRole } = render(
+    <Select {...BASIC_PROPS} menuIsOpen options={[]} />
+  );
+  const notice = within(getByRole('listbox')).getByRole('option');
+
+  expect(notice).toHaveTextContent('No options');
+  expect(notice).toHaveAttribute('aria-disabled', 'true');
+});
+
+test('loading message is rendered as a disabled option', () => {
+  const { getByRole } = render(
+    <Select {...BASIC_PROPS} menuIsOpen options={[]} isLoading />
+  );
+  const notice = within(getByRole('listbox')).getByRole('option');
+
+  expect(notice).toHaveTextContent('Loading...');
+  expect(notice).toHaveAttribute('aria-disabled', 'true');
+});
+
 cases(
   'value prop',
   ({ props, expectedValue }) => {