fix: Invalid html markup div as child element span (#653)

Author: YueyingLu

src/text-filter/__tests__/text-filter.test.tsx

@@ -5,6 +5,7 @@ import { render } from '@testing-library/react';
 import { DEBOUNCE_DEFAULT_DELAY } from '../../../lib/components/internal/debounce';
 import TextFilter, { TextFilterProps } from '../../../lib/components/text-filter';
 import createWrapper from '../../../lib/components/test-utils/dom';
+import '../../__a11y__/to-validate-a11y';
 
 function renderTextFilter(jsx: React.ReactElement) {
   const { container } = render(jsx);
@@ -106,3 +107,8 @@ describe('countText', () => {
     expect(wrapper.findResultsCount().getElement().textContent).toEqual('10 matches');
   });
 });
+
+test('check a11y', async () => {
+  const { wrapper } = renderTextFilter(<TextFilter filteringText="" filteringAriaLabel="filter instances" />);
+  await expect(wrapper.getElement()).toValidateA11y();
+});

src/text-filter/internal.tsx

@@ -33,7 +33,7 @@ const InternalTextFilter = React.forwardRef(
     const showResults = filteringText && countText && !disabled;
 
     return (
-      <span {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>
+      <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>
         <InternalInput
           ref={inputRef}
           className={styles.input}
@@ -53,7 +53,7 @@ const InternalTextFilter = React.forwardRef(
         >
           {showResults ? countText : ''}
         </span>
-      </span>
+      </div>
     );
   }
 );