From dcae27376e7e94fbe2c762ec1a9ff49d2562c859 Mon Sep 17 00:00:00 2001
From: GitStart <1501599+gitstart@users.noreply.github.com>
Date: Tue, 19 Sep 2023 10:20:49 +0100
Subject: [PATCH] [Select][material-ui] Missing aria-multiselectable attribute
 on multiple Select component (#38855)

Co-authored-by: AsiwajuDev <17790578+AsiwajuDev@users.noreply.github.com>
---
 packages/mui-material/src/Select/Select.test.js | 14 ++++++++++++++
 packages/mui-material/src/Select/SelectInput.js |  1 +
 2 files changed, 15 insertions(+)

diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
index 0ee8903cc2cd83..cf99abe6b161f9 100644
--- a/packages/mui-material/src/Select/Select.test.js
+++ b/packages/mui-material/src/Select/Select.test.js
@@ -1047,6 +1047,20 @@ describe('<Select />', () => {
       expect(options[2]).to.have.attribute('aria-selected', 'true');
     });
 
+    it('should have aria-multiselectable=true when multiple is true', () => {
+      const { getByRole } = render(
+        <Select multiple value={[10, 30]}>
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>,
+      );
+
+      fireEvent.mouseDown(getByRole('button'));
+
+      expect(getByRole('listbox')).to.have.attribute('aria-multiselectable', 'true');
+    });
+
     it('should serialize multiple select display value', () => {
       const { getByRole } = render(
         <Select multiple value={[10, 20, 30]}>
diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js
index 72452dc1d88857..90e5d4f25668a5 100644
--- a/packages/mui-material/src/Select/SelectInput.js
+++ b/packages/mui-material/src/Select/SelectInput.js
@@ -549,6 +549,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
         MenuListProps={{
           'aria-labelledby': labelId,
           role: 'listbox',
+          'aria-multiselectable': multiple ? 'true' : undefined,
           disableListWrap: true,
           ...MenuProps.MenuListProps,
         }}