From 3807fbdefb2f60b73c9dbbb44e0531d509fabd4e Mon Sep 17 00:00:00 2001
From: riddhybansal <riddhybansal@gmail.com>
Date: Fri, 21 Jun 2024 14:35:41 +0530
Subject: [PATCH 1/7] fix: focus issue in filterable multiselect

---
 .../react/src/components/MultiSelect/FilterableMultiSelect.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
index e9e0a04a782c..1a251e11386f 100644
--- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
@@ -466,7 +466,6 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
         return changes;
       case InputBlur:
       case InputKeyDownEscape:
-        setInputFocused(false);
         setInputValue('');
         setIsOpen(false);
         return changes;
@@ -662,6 +661,7 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
         }
       },
       onFocus: () => setInputFocused(true),
+      onBlur: () => setInputFocused(false),
     })
   );
   const menuProps = getMenuProps({}, { suppressRefError: true });

From cef74837c8b31476073cf666ec19b8a762a18c4b Mon Sep 17 00:00:00 2001
From: riddhybansal <riddhybansal@gmail.com>
Date: Wed, 26 Jun 2024 15:19:34 +0530
Subject: [PATCH 2/7] fix: added test cases and focus fixes

---
 .../MultiSelect/FilterableMultiSelect.tsx     |   7 +-
 .../MultiSelect/MultiSelect.stories.js        | 118 ++++++++++++++++++
 .../__tests__/FilterableMultiSelect-test.js   |  24 ++++
 3 files changed, 147 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
index 1a251e11386f..925e48a80287 100644
--- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
@@ -466,7 +466,6 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
         return changes;
       case InputBlur:
       case InputKeyDownEscape:
-        setInputValue('');
         setIsOpen(false);
         return changes;
       case FunctionToggleMenu:
@@ -661,7 +660,11 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
         }
       },
       onFocus: () => setInputFocused(true),
-      onBlur: () => setInputFocused(false),
+      onBlur: () => {
+        !isOpen && setInputFocused(false);
+        setInputValue('');
+        // setIsOpen(false);
+      },
     })
   );
   const menuProps = getMenuProps({}, { suppressRefError: true });
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
index 9e259abaeb97..f0f607ad4912 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.stories.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
@@ -241,6 +241,124 @@ export const Default = () => {
   );
 };
 
+export const Test = () => {
+  return (
+    <div style={{ padding: '2rem' }}>
+      <FilterableMultiSelect
+        style={{ marginTop: '3rem' }}
+        key={'t1'}
+        helperText="ABOVE"
+        label="label"
+        titleText={'Title'}
+        itemToString={(item) => item}
+        items={[
+          'AAAB1',
+          'AAAB2',
+          'AAAB3',
+          'AAAB4',
+          'AAAB5',
+          'AAAB6',
+          'AAAB7',
+          'AAAB8',
+          'AAAB9',
+          'AAABA',
+          'AAABB',
+          'AAABC',
+          'AAABD',
+          'AAABF',
+        ]}
+      />
+
+      <Tabs>
+        <TabList aria-label="List of tabs">
+          <Tab>Overview</Tab>
+        </TabList>
+
+        <div>
+          <FilterableMultiSelect
+            style={{ marginTop: '3rem' }}
+            key={'t1'}
+            helperText="INTABS"
+            label="label"
+            titleText={'Title'}
+            itemToString={(item) => item}
+            items={[
+              'AAAB1',
+              'AAAB2',
+              'AAAB3',
+              'AAAB4',
+              'AAAB5',
+              'AAAB6',
+              'AAAB7',
+              'AAAB8',
+              'AAAB9',
+              'AAABA',
+              'AAABB',
+              'AAABC',
+              'AAABD',
+              'AAABF',
+            ]}
+          />
+        </div>
+
+        <TabPanels>
+          <TabPanel>
+            <FilterableMultiSelect
+              style={{ marginTop: '3rem' }}
+              key={'t1'}
+              helperText="INTABS"
+              label="label"
+              titleText={'Title'}
+              itemToString={(item) => item}
+              items={[
+                'AAAB1',
+                'AAAB2',
+                'AAAB3',
+                'AAAB4',
+                'AAAB5',
+                'AAAB6',
+                'AAAB7',
+                'AAAB8',
+                'AAAB9',
+                'AAABA',
+                'AAABB',
+                'AAABC',
+                'AAABD',
+                'AAABF',
+              ]}
+            />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+
+      <FilterableMultiSelect
+        style={{ marginTop: '3rem' }}
+        key={'t1'}
+        helperText="BELOW"
+        label="label"
+        titleText={'Title'}
+        itemToString={(item) => item}
+        items={[
+          'AAAB1',
+          'AAAB2',
+          'AAAB3',
+          'AAAB4',
+          'AAAB5',
+          'AAAB6',
+          'AAAB7',
+          'AAAB8',
+          'AAAB9',
+          'AAABA',
+          'AAABB',
+          'AAABC',
+          'AAABD',
+          'AAABF',
+        ]}
+      />
+    </div>
+  );
+};
+
 export const WithInitialSelectedItems = () => {
   return (
     <div style={{ width: 300 }}>
diff --git a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
index 9a4185a207cc..19bb0a5fee4d 100644
--- a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
@@ -151,6 +151,30 @@ describe('FilterableMultiSelect', () => {
     expect(screen.getByPlaceholderText('test')).toHaveDisplayValue(3);
   });
 
+  it('should not close the menu when user clicks on listbox', async () => {
+    render(<FilterableMultiSelect {...mockProps} />);
+    await openMenu();
+
+    const menuList = screen.getByRole('listbox');
+    await userEvent.click(menuList);
+
+    assertMenuOpen(mockProps);
+  });
+
+  it('should clear input value when clicking on cross button', async () => {
+    render(<FilterableMultiSelect {...mockProps} placeholder="test" />);
+    await openMenu();
+
+    await userEvent.type(screen.getByPlaceholderText('test'), '3');
+
+    const clearButton = screen.getByRole('button', {
+      name: 'Clear selected item',
+    });
+    await userEvent.click(clearButton);
+
+    expect(screen.getByPlaceholderText('test')).toHaveDisplayValue('');
+  });
+
   it('should respect slug prop', () => {
     const { container } = render(
       <FilterableMultiSelect {...mockProps} slug={<Slug />} />

From 7530ef85d0cd813958ebae57992395f071994922 Mon Sep 17 00:00:00 2001
From: Riddhi Bansal <41935566+riddhybansal@users.noreply.github.com>
Date: Wed, 26 Jun 2024 21:16:15 +0530
Subject: [PATCH 3/7] Update FilterableMultiSelect-test.js

---
 .../MultiSelect/__tests__/FilterableMultiSelect-test.js        | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
index d61548896765..13f499bfb4fc 100644
--- a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
@@ -175,6 +175,9 @@ describe('FilterableMultiSelect', () => {
     await openMenu();
 
     const menuList = screen.getByRole('listbox');
+
+    expect(menuList).toBeInTheDocument();
+    
     await userEvent.click(menuList);
 
     assertMenuOpen(mockProps);

From 6646392ad7e12da97ecedda30c7c0ee0be275c00 Mon Sep 17 00:00:00 2001
From: Riddhi Bansal <41935566+riddhybansal@users.noreply.github.com>
Date: Wed, 26 Jun 2024 21:54:10 +0530
Subject: [PATCH 4/7] Update FilterableMultiSelect-test.js

---
 .../__tests__/FilterableMultiSelect-test.js         | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
index 13f499bfb4fc..a9f02f2329a0 100644
--- a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
@@ -170,19 +170,6 @@ describe('FilterableMultiSelect', () => {
     expect(screen.getByPlaceholderText('test')).toHaveDisplayValue(3);
   });
 
-  it('should not close the menu when user clicks on listbox', async () => {
-    render(<FilterableMultiSelect {...mockProps} />);
-    await openMenu();
-
-    const menuList = screen.getByRole('listbox');
-
-    expect(menuList).toBeInTheDocument();
-    
-    await userEvent.click(menuList);
-
-    assertMenuOpen(mockProps);
-  });
-
   it('should clear input value when clicking on cross button', async () => {
     render(<FilterableMultiSelect {...mockProps} placeholder="test" />);
     await openMenu();

From 96b2504dec5a7753975c90d8801bcdf557009830 Mon Sep 17 00:00:00 2001
From: Riddhi Bansal <41935566+riddhybansal@users.noreply.github.com>
Date: Wed, 26 Jun 2024 21:55:18 +0530
Subject: [PATCH 5/7] Update MultiSelect.stories.js

---
 .../MultiSelect/MultiSelect.stories.js        | 118 ------------------
 1 file changed, 118 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
index db278ea95e0d..aee3090af0c5 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.stories.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
@@ -258,124 +258,6 @@ export const Default = () => {
   );
 };
 
-export const Test = () => {
-  return (
-    <div style={{ padding: '2rem' }}>
-      <FilterableMultiSelect
-        style={{ marginTop: '3rem' }}
-        key={'t1'}
-        helperText="ABOVE"
-        label="label"
-        titleText={'Title'}
-        itemToString={(item) => item}
-        items={[
-          'AAAB1',
-          'AAAB2',
-          'AAAB3',
-          'AAAB4',
-          'AAAB5',
-          'AAAB6',
-          'AAAB7',
-          'AAAB8',
-          'AAAB9',
-          'AAABA',
-          'AAABB',
-          'AAABC',
-          'AAABD',
-          'AAABF',
-        ]}
-      />
-
-      <Tabs>
-        <TabList aria-label="List of tabs">
-          <Tab>Overview</Tab>
-        </TabList>
-
-        <div>
-          <FilterableMultiSelect
-            style={{ marginTop: '3rem' }}
-            key={'t1'}
-            helperText="INTABS"
-            label="label"
-            titleText={'Title'}
-            itemToString={(item) => item}
-            items={[
-              'AAAB1',
-              'AAAB2',
-              'AAAB3',
-              'AAAB4',
-              'AAAB5',
-              'AAAB6',
-              'AAAB7',
-              'AAAB8',
-              'AAAB9',
-              'AAABA',
-              'AAABB',
-              'AAABC',
-              'AAABD',
-              'AAABF',
-            ]}
-          />
-        </div>
-
-        <TabPanels>
-          <TabPanel>
-            <FilterableMultiSelect
-              style={{ marginTop: '3rem' }}
-              key={'t1'}
-              helperText="INTABS"
-              label="label"
-              titleText={'Title'}
-              itemToString={(item) => item}
-              items={[
-                'AAAB1',
-                'AAAB2',
-                'AAAB3',
-                'AAAB4',
-                'AAAB5',
-                'AAAB6',
-                'AAAB7',
-                'AAAB8',
-                'AAAB9',
-                'AAABA',
-                'AAABB',
-                'AAABC',
-                'AAABD',
-                'AAABF',
-              ]}
-            />
-          </TabPanel>
-        </TabPanels>
-      </Tabs>
-
-      <FilterableMultiSelect
-        style={{ marginTop: '3rem' }}
-        key={'t1'}
-        helperText="BELOW"
-        label="label"
-        titleText={'Title'}
-        itemToString={(item) => item}
-        items={[
-          'AAAB1',
-          'AAAB2',
-          'AAAB3',
-          'AAAB4',
-          'AAAB5',
-          'AAAB6',
-          'AAAB7',
-          'AAAB8',
-          'AAAB9',
-          'AAABA',
-          'AAABB',
-          'AAABC',
-          'AAABD',
-          'AAABF',
-        ]}
-      />
-    </div>
-  );
-};
-
 export const WithInitialSelectedItems = () => {
   return (
     <div

From 3047399500806cd44a0710d0fca4620d75f0b265 Mon Sep 17 00:00:00 2001
From: Taylor Jones <tay1orjones@users.noreply.github.com>
Date: Wed, 26 Jun 2024 11:51:29 -0500
Subject: [PATCH 6/7] Update
 packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx

---
 .../react/src/components/MultiSelect/FilterableMultiSelect.tsx   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
index 10a88e741ade..6b6bd8f25038 100644
--- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
@@ -715,7 +715,6 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
       onBlur: () => {
         !isOpen && setInputFocused(false);
         setInputValue('');
-        // setIsOpen(false);
       },
     })
   );

From 7b238c2711d3026d4a51b6dec19a015e08cb3781 Mon Sep 17 00:00:00 2001
From: Nikhil Tomar <nikhiltomar753@gmail.com>
Date: Fri, 28 Jun 2024 14:35:12 +0530
Subject: [PATCH 7/7] fix: jaws to announce the status of max char/words usage

---
 packages/react/src/components/TextArea/TextArea.tsx | 7 ++++++-
 packages/react/src/internal/useAnnouncer.js         | 3 +++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/TextArea/TextArea.tsx b/packages/react/src/components/TextArea/TextArea.tsx
index 81236abd643b..0dc3c1f95676 100644
--- a/packages/react/src/components/TextArea/TextArea.tsx
+++ b/packages/react/src/components/TextArea/TextArea.tsx
@@ -459,7 +459,12 @@ const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
         )}
         {input}
         {normalizedSlug}
-        <span className={`${prefix}--text-area__counter-alert`} role="alert">
+        <span
+          className={`${prefix}--text-area__counter-alert`}
+          role="alert"
+          aria-atomic="true"
+          // aria-live="polite"
+        >
           {ariaAnnouncement}
         </span>
         {isFluid && <hr className={`${prefix}--text-area__divider`} />}
diff --git a/packages/react/src/internal/useAnnouncer.js b/packages/react/src/internal/useAnnouncer.js
index 94e787a4b6b5..24b3e00bdd45 100644
--- a/packages/react/src/internal/useAnnouncer.js
+++ b/packages/react/src/internal/useAnnouncer.js
@@ -7,6 +7,9 @@
 
 export function useAnnouncer(textCount, maxCount, entityName = 'characters') {
   const lastTen = maxCount - 10;
+  if (textCount == maxCount) {
+    return `Maximum ${entityName} reached.`;
+  }
   if (textCount >= lastTen) {
     return `${maxCount - textCount} ${entityName} left.`;
   }