From 0a2220c585fdb204c114aa17d767f9b9e7228996 Mon Sep 17 00:00:00 2001
From: Michael Sereniti <31261408+msereniti@users.noreply.github.com>
Date: Fri, 12 Apr 2024 12:10:23 +0200
Subject: [PATCH] [86by0byqr][select] fixed multiselect a11y (#1282)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--- Provide a general summary of your changes in the Title above -->

## Motivation and Context

Multiselect wasn't annotated properly if it used with `options` prop
because default options rendered was adding aria-selected without taking
into account that `value` may be an array of selected options.

Also I've fixed a11y linting – select.option.checkbox should not have
any roles because it's just a visual representation of multiselect
option.

## How has this been tested?

Manually and with unit test.

## Types of changes

- [x] Bug fix (non-breaking change which fixes an issue).
- [ ] New feature (non-breaking change which adds functionality).
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected).
- [ ] Nice improve.

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [x] My code follows the code style of this project.
- [x] I have updated the documentation accordingly or it's not required.
- [x] Unit tests are not broken.
- [x] I have added changelog note to corresponding `CHANGELOG.md` file
with planned publish date.
- [x] I have added new unit tests on added of fixed functionality.
---
 semcore/select/CHANGELOG.md             |  6 ++++++
 semcore/select/__tests__/index.test.tsx | 25 +++++++++++++++++++++++++
 semcore/select/src/Select.jsx           |  9 +--------
 3 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/semcore/select/CHANGELOG.md b/semcore/select/CHANGELOG.md
index 61a00140e5..f05faa9107 100644
--- a/semcore/select/CHANGELOG.md
+++ b/semcore/select/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [4.37.0] - 2024-04-10
+
+### Fixed
+
+- Multiselect interactions were not annotated properly by screen readers when select was used with `options` prop.
+
 ## [4.36.2] - 2024-04-10
 
 ### Fixed
diff --git a/semcore/select/__tests__/index.test.tsx b/semcore/select/__tests__/index.test.tsx
index 99559ff411..9fe2d10f4f 100644
--- a/semcore/select/__tests__/index.test.tsx
+++ b/semcore/select/__tests__/index.test.tsx
@@ -284,6 +284,31 @@ describe('Select Trigger', () => {
     const results = await axe(container);
     expect(results).toHaveNoViolations();
   });
+  test('multiselect a11y', async () => {
+    vi.useFakeTimers();
+    const options = [
+      {
+        value: '1',
+        children: 'Option 1',
+        label: 'Option 1',
+      },
+      {
+        value: '2',
+        children: 'Option 2',
+        label: 'Option 2',
+      },
+    ];
+    const { container } = render(
+      <Select visible value={['2']} disablePortal multiselect options={options} />,
+    );
+    act(() => {
+      vi.runAllTimers();
+    });
+    vi.useRealTimers();
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
 
   test.concurrent('focus position preserve with mouse navigation', async () => {
     vi.useFakeTimers();
diff --git a/semcore/select/src/Select.jsx b/semcore/select/src/Select.jsx
index 0b08195a3d..1bbbf5ade4 100644
--- a/semcore/select/src/Select.jsx
+++ b/semcore/select/src/Select.jsx
@@ -246,12 +246,7 @@ class RootSelect extends Component {
           <Select.Menu>
             {options.map((option, index) => {
               return (
-                <Select.Option
-                  key={option.value}
-                  id={`igc-${uid}-option-${index}`}
-                  aria-selected={value === option.value}
-                  {...option}
-                >
+                <Select.Option key={option.value} id={`igc-${uid}-option-${index}`} {...option}>
                   {multiselect && <Select.Option.Checkbox />}
                   {option.children}
                 </Select.Option>
@@ -351,9 +346,7 @@ function Checkbox(providedProps) {
       {...componentProps}
       className={cn(className, componentProps.className) || undefined}
       style={{ ...style, ...componentProps.style }}
-      role='checkbox'
       tabIndex={-1}
-      aria-checked={selected}
     />
   );
 }