From 68f15bc2a843c9f9deb7471974762abb8da38087 Mon Sep 17 00:00:00 2001
From: Yueying Lu <lyueying@amazon.de>
Date: Thu, 19 Jan 2023 18:32:04 +0100
Subject: [PATCH] fix: Invalid html markup div as child element span

---
 src/text-filter/__tests__/text-filter.test.tsx | 6 ++++++
 src/text-filter/internal.tsx                   | 4 ++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/text-filter/__tests__/text-filter.test.tsx b/src/text-filter/__tests__/text-filter.test.tsx
index 8df7088982..c0c7d652b0 100644
--- a/src/text-filter/__tests__/text-filter.test.tsx
+++ b/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();
+});
diff --git a/src/text-filter/internal.tsx b/src/text-filter/internal.tsx
index 610fc73b54..0ffe0ce7b4 100644
--- a/src/text-filter/internal.tsx
+++ b/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>
     );
   }
 );