From 415b5bfe83134414489a888ccf46ddaec775cdb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20=C4=8Curda?= <jakub.curda@almacareer.com>
Date: Thu, 9 May 2024 11:21:22 +0200
Subject: [PATCH] fixup! Feat: Add alert role for ValidationText #DS-1175

---
 .../src/components/Field/ValidationText.tsx   | 12 +++++-----
 .../Field/__tests__/ValidationText.test.tsx   | 22 ++++++++++++-------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/packages/web-react/src/components/Field/ValidationText.tsx b/packages/web-react/src/components/Field/ValidationText.tsx
index 4354093ce7..c2e334053d 100644
--- a/packages/web-react/src/components/Field/ValidationText.tsx
+++ b/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}
diff --git a/packages/web-react/src/components/Field/__tests__/ValidationText.test.tsx b/packages/web-react/src/components/Field/__tests__/ValidationText.test.tsx
index 716d2fabdf..bfbe9fc6be 100644
--- a/packages/web-react/src/components/Field/__tests__/ValidationText.test.tsx
+++ b/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');
   });
 });