Fix DataTable missing role=table

changelog.md

@@ -9,6 +9,7 @@
 [PickerInput]: set `overflow: hidden;` on open for mobile
 [TextArea and TextInput]: fix maxLength for Android
 [PickerInput]: Disable select all button if options are empty and it has no selection
+[DataTable]: fixed missing `role=table`
 
 # 5.2.0 - 16.10.2023
 

uui/components/layout/VirtualList.tsx

@@ -66,6 +66,14 @@ export const VirtualList = React.forwardRef<ScrollbarsApi, VirtualListProps>((pr
             </div>
         );
 
+    const renderView = ({ style }: any) => (
+        <VirtualListView
+            isLoading={ props.isLoading }
+            style={ style }
+            rawProps={ props.rawProps }
+        />
+    );
+
     const scrollBarsRef = React.useCallback((scrollbars: ScrollbarsApi) => {
         if (!scrollbars?.container?.firstChild) return;
         scrollContainerRef.current = scrollbars.container.firstChild as HTMLDivElement;
@@ -79,7 +87,7 @@ export const VirtualList = React.forwardRef<ScrollbarsApi, VirtualListProps>((pr
                 [uuiMarkers.scrolledBottom]: scrollShadows.verticalBottom,
             }) }
             onScroll={ handleScroll }
-            renderView={ ({ style }: any) => <VirtualListView isLoading={ props.isLoading } style={ style } /> }
+            renderView={ renderView }
             ref={ scrollBarsRef }
         >
             {renderRows()}

uui/components/pickers/__tests__/__snapshots__/PickerInput.test.tsx.snap

@@ -57,6 +57,7 @@ exports[`PickerInput should open body 1`] = `
             style="position: relative; overflow: hidden; width: 100%; height: 100%; display: flex;"
           >
             <div
+              aria-orientation="vertical"
               style="position: relative; top: 0px; left: 0px; right: 0px; bottom: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px; flex: 1 1 auto; display: flex; flex-direction: column;"
             >
               <div

uui/components/tables/__tests__/DataTable.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
+import { renderSnapshotWithContextAsync, renderWithContextAsync, screen } from '@epam/uui-test-utils';
 import { DataTable } from '../DataTable';
 
 class ResizeObserverMock {
@@ -15,4 +15,9 @@ describe('DataTable', () => {
         const tree = await renderSnapshotWithContextAsync(<DataTable columns={ [] } getRows={ () => [] } value={ {} } onValueChange={ jest.fn } />);
         expect(tree).toMatchSnapshot();
     });
+
+    it('should have role=table', async () => {
+        await renderWithContextAsync(<DataTable columns={ [] } getRows={ () => [] } value={ {} } onValueChange={ jest.fn } />);
+        expect(screen.getByRole('table')).toBeInTheDocument();
+    });
 });

uui/components/tables/__tests__/__snapshots__/DataTable.test.tsx.snap

@@ -14,6 +14,8 @@ exports[`DataTable should be rendered correctly 1`] = `
   }
 >
   <div
+    aria-colcount={0}
+    role="table"
     style={
       Object {
         "WebkitOverflowScrolling": "touch",