fixup! Feat: Add alert role for ValidationText #DS-1175

packages/web-react/src/components/Field/ValidationText.tsx

@@ -28,11 +28,13 @@ export const ValidationText = <T extends ElementType = 'div'>(props: ValidationT
 
   if (validationText) {
     return Array.isArray(validationText) ? (
-      <ul className={className} id={id} role="alert">
-        {validationText.map((item) => (
-          <li key={`validationText_${item}`}>{item}</li>
-        ))}
-      </ul>
+      <div role="alert">
+        <ul className={className} id={id}>
+          {validationText.map((item) => (
+            <li key={`validationText_${item}`}>{item}</li>
+          ))}
+        </ul>
+      </div>
     ) : (
       <ElementTag className={className} id={id} role="alert">
         {validationText}

packages/web-react/src/components/Field/__tests__/ValidationText.test.tsx

@@ -1,26 +1,32 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import ValidationText from '../ValidationText';
 
 describe('ValidationText', () => {
   it('should render single validation text', () => {
-    const dom = render(<ValidationText className="ValidationText__validationText" validationText="validation text" />);
+    const { container } = render(
+      <ValidationText className="ValidationText__validationText" validationText="validation text" />,
+    );
 
-    const element = dom.container.querySelector('div') as HTMLElement;
-    expect(element.textContent).toBe('validation text');
+    expect(container.textContent).toBe('validation text');
+    expect(container.firstElementChild).toHaveAttribute('role', 'alert');
   });
 
   it('should render multiple validation texts', () => {
-    const dom = render(
+    render(
       <ValidationText
         className="ValidationText__validationText"
         validationText={['validation text', 'another validation text']}
       />,
     );
 
-    const elements = dom.container.querySelectorAll('li') as NodeListOf<HTMLLIElement>;
-    expect(elements[0].textContent).toBe('validation text');
-    expect(elements[1].textContent).toBe('another validation text');
+    const list = screen.getByRole('list');
+    const listItems = screen.getAllByRole('listitem');
+
+    expect(listItems[0].textContent).toBe('validation text');
+    expect(listItems[1].textContent).toBe('another validation text');
+
+    expect(list.parentElement).toHaveAttribute('role', 'alert');
   });
 });