Jaws text area

packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx

@@ -518,8 +518,6 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
         return changes;
       case InputBlur:
       case InputKeyDownEscape:
-        setInputFocused(false);
-        setInputValue('');
         setIsOpen(false);
         return changes;
       case FunctionToggleMenu:
@@ -714,6 +712,10 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
         }
       },
       onFocus: () => setInputFocused(true),
+      onBlur: () => {
+        !isOpen && setInputFocused(false);
+        setInputValue('');
+      },
     })
   );
   const menuProps = getMenuProps({}, { suppressRefError: true });

packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js

@@ -170,6 +170,20 @@ describe('FilterableMultiSelect', () => {
     expect(screen.getByPlaceholderText('test')).toHaveDisplayValue(3);
   });
 
+  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', async () => {
     const { container } = render(
       <FilterableMultiSelect {...mockProps} slug={<Slug />} />

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`} />}

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.`;
   }