fix: Add aria-required to select/multiselect listbox element if set

src/internal/components/options-list/__tests__/options-list.test.tsx

@@ -57,6 +57,15 @@ test('supports ariaLabelledby', () => {
   expect(container.querySelector('[role=listbox]')).toHaveAttribute('aria-labelledby', 'someid');
 });
 
+test('supports ariaRequired', () => {
+  const container = renderList(
+    <OptionsList open={true} statusType="pending" ariaRequired={true}>
+      <div>Option</div>
+    </OptionsList>
+  );
+  expect(container.querySelector('[role=listbox]')).toHaveAttribute('aria-required', 'true');
+});
+
 test('onLoadMore fires when dropdown opens and its bottom is on the screen', () => {
   const onLoadMore = jest.fn();
   const { rerender } = render(

src/internal/components/options-list/index.tsx

@@ -41,6 +41,7 @@ export interface OptionsListProps extends BaseComponentProps {
   ariaLabel?: string;
   ariaLabelledby?: string;
   ariaDescribedby?: string;
+  ariaRequired?: boolean;
   decreaseBlockMargin?: boolean;
   embedded?: boolean;
   stickyItemBlockSize?: number | null;
@@ -77,6 +78,7 @@ const OptionsList = (
     ariaLabel,
     ariaLabelledby,
     ariaDescribedby,
+    ariaRequired,
     embedded,
     stickyItemBlockSize,
     isMultiSelect,
@@ -130,6 +132,7 @@ const OptionsList = (
       aria-labelledby={ariaLabelledby}
       aria-describedby={ariaDescribedby}
       aria-multiselectable={role === 'listbox' && isMultiSelect ? true : undefined}
+      aria-required={ariaRequired}
     >
       {open && children}
     </Tag>

src/multiselect/__tests__/multiselect.test.tsx

@@ -740,6 +740,15 @@ describe('a11y properties', () => {
       'multiselect-label'
     );
   });
+  test('listbox should receive aria-required when that property is set', () => {
+    const { wrapper } = renderMultiselect(
+      <Multiselect selectedOptions={[]} options={defaultOptions} ariaRequired={true} />
+    );
+    wrapper.openDropdown();
+    expect(
+      wrapper.findDropdown().getElement().parentNode!.querySelector(`[role=listbox]`)!.getAttribute('aria-required')
+    ).toBe('true');
+  });
 });
 
 test('Trigger receives focus when autofocus is true', () => {

src/multiselect/internal.tsx

@@ -195,7 +195,7 @@ const InternalMultiselect = React.forwardRef(
                   <DropdownFooter content={multiselectProps.isOpen ? dropdownStatus.content : null} id={footerId} />
                 ) : null
               }
-              menuProps={multiselectProps.getMenuProps()}
+              menuProps={{ ...multiselectProps.getMenuProps(), ariaRequired }}
               getOptionProps={multiselectProps.getOptionProps}
               filteredOptions={multiselectProps.filteredOptions}
               filteringValue={filteringValue}

src/select/__tests__/select.test.tsx

@@ -367,6 +367,20 @@ describe.each([false, true])('expandToViewport=%s', expandToViewport => {
         wrapper.findDropdown({ expandToViewport }).getElement().parentNode!.querySelector(`#${controlledId}`)!
       ).toHaveAccessibleName('select-label');
     });
+
+    test('listbox should receive aria-required when that property is set', () => {
+      const { wrapper } = renderSelect({
+        ariaRequired: true,
+      });
+      wrapper.openDropdown();
+      expect(
+        wrapper
+          .findDropdown({ expandToViewport })
+          .getElement()
+          .parentNode!.querySelector(`[role=listbox]`)!
+          .getAttribute('aria-required')
+      ).toBe('true');
+    });
   });
 
   describe('Filtering results', () => {

src/select/internal.tsx

@@ -219,6 +219,7 @@ const InternalSelect = React.forwardRef(
       onLoadMore: handleLoadMore,
       ariaLabelledby: joinStrings(selectAriaLabelId, controlId),
       ariaDescribedby: dropdownStatus.content ? footerId : undefined,
+      ariaRequired,
     };
 
     const announcement = useAnnouncement({