From dec20b4cef7f8d475ebbf02089f746173f7c2553 Mon Sep 17 00:00:00 2001
From: faisne <166654065+sheila-semrush@users.noreply.github.com>
Date: Thu, 9 Jan 2025 20:34:46 +0100
Subject: [PATCH 1/3] [docs] Fixed table examples aria labels

---
 .../data-table/docs/examples/access-to-cells.tsx           | 2 +-
 .../data-table/docs/examples/access-to-set-of-cells.tsx    | 2 +-
 .../data-table/docs/examples/accordion-inside-table.tsx    | 2 +-
 .../examples/adding-additional-elements-to-table-body.tsx  | 2 +-
 .../docs/examples/additional-elements-in-header.tsx        | 2 +-
 stories/components/data-table/docs/examples/borders.tsx    | 2 +-
 .../data-table/docs/examples/column-alignment.tsx          | 2 +-
 .../components/data-table/docs/examples/column-expand.tsx  | 2 +-
 .../components/data-table/docs/examples/column-sizes.tsx   | 2 +-
 .../data-table/docs/examples/columns-merging.tsx           | 2 +-
 stories/components/data-table/docs/examples/compact.tsx    | 2 +-
 .../data-table/docs/examples/custom-rows-rendering.tsx     | 2 +-
 .../docs/examples/custom-view-for-table-body.tsx           | 2 +-
 .../data-table/docs/examples/customizing-header.tsx        | 2 +-
 .../data-table/docs/examples/export-in-image.tsx           | 2 +-
 .../components/data-table/docs/examples/fixed-columns.tsx  | 2 +-
 .../docs/examples/fixed-header-with-spin-overlay.tsx       | 2 +-
 .../components/data-table/docs/examples/fixed-header.tsx   | 4 ++--
 .../data-table/docs/examples/multi-level-header.tsx        | 2 +-
 stories/components/data-table/docs/examples/pagination.tsx | 2 +-
 .../components/data-table/docs/examples/rows-merging.tsx   | 2 +-
 .../data-table/docs/examples/scroll-in-table.tsx           | 2 +-
 .../data-table/docs/examples/secondary-table.tsx           | 7 +------
 .../docs/examples/sorting-changing-size-by-columns.tsx     | 2 +-
 .../data-table/docs/examples/sorting-changing-size.tsx     | 2 +-
 stories/components/data-table/docs/examples/sorting.tsx    | 7 +------
 .../docs/examples/table-in-table-with-fixed-column.tsx     | 4 ++--
 .../components/data-table/docs/examples/table-in-table.tsx | 4 ++--
 .../data-table/docs/examples/virtual-scroll-in-table.tsx   | 2 +-
 29 files changed, 32 insertions(+), 42 deletions(-)

diff --git a/stories/components/data-table/docs/examples/access-to-cells.tsx b/stories/components/data-table/docs/examples/access-to-cells.tsx
index 7efacbb23b..cc2322d87f 100644
--- a/stories/components/data-table/docs/examples/access-to-cells.tsx
+++ b/stories/components/data-table/docs/examples/access-to-cells.tsx
@@ -4,7 +4,7 @@ import { ButtonLink } from '@semcore/button';
 
 const Demo = () => {
   return (
-    <DataTable data={data} aria-label={'Table title. Access to cells'}>
+    <DataTable data={data} aria-label={'Access to cells'}>
       <DataTable.Head>
         <DataTable.Column name='keyword' children='Keyword' />
         <DataTable.Column name='kd' children='KD,%' />
diff --git a/stories/components/data-table/docs/examples/access-to-set-of-cells.tsx b/stories/components/data-table/docs/examples/access-to-set-of-cells.tsx
index 4644f7bbfa..6094d504e5 100644
--- a/stories/components/data-table/docs/examples/access-to-set-of-cells.tsx
+++ b/stories/components/data-table/docs/examples/access-to-set-of-cells.tsx
@@ -4,7 +4,7 @@ import Spin from '@semcore/spin';
 
 const Demo = () => {
   return (
-    <DataTable data={data} aria-label={'Table title. Access to set of cells'}>
+    <DataTable data={data} aria-label={'Access to set of cells'}>
       <DataTable.Head>
         <DataTable.Column name='keyword' children='Keyword' />
         <DataTable.Column name='kd' children='KD,%' />
diff --git a/stories/components/data-table/docs/examples/accordion-inside-table.tsx b/stories/components/data-table/docs/examples/accordion-inside-table.tsx
index c840225c40..9fac7772d2 100644
--- a/stories/components/data-table/docs/examples/accordion-inside-table.tsx
+++ b/stories/components/data-table/docs/examples/accordion-inside-table.tsx
@@ -23,7 +23,7 @@ const Demo = () => {
   return (
     /* [1] Wrapping the table in the Accordion control component; */
     <Accordion value={exapnded} onChange={setExapnded}>
-      <DataTable data={data} aria-label={'Table title. Accordion inside table'}>
+      <DataTable data={data} aria-label={'Accordion inside table'}>
         <DataTable.Head>
           <DataTable.Column name='keyword' children='Keyword' />
           <DataTable.Column name='kd' children='KD,%' />
diff --git a/stories/components/data-table/docs/examples/adding-additional-elements-to-table-body.tsx b/stories/components/data-table/docs/examples/adding-additional-elements-to-table-body.tsx
index d49eb4801b..fe86bbce78 100644
--- a/stories/components/data-table/docs/examples/adding-additional-elements-to-table-body.tsx
+++ b/stories/components/data-table/docs/examples/adding-additional-elements-to-table-body.tsx
@@ -3,7 +3,7 @@ import DataTable from '@semcore/data-table';
 
 const Demo = () => {
   return (
-    <DataTable data={data} aria-label={'Table title. Additional elements'}>
+    <DataTable data={data} aria-label={'Additional elements'}>
       <DataTable.Head>
         <DataTable.Column name='keyword' children='Keyword' />
         <DataTable.Column name='kd' children='KD,%' />
diff --git a/stories/components/data-table/docs/examples/additional-elements-in-header.tsx b/stories/components/data-table/docs/examples/additional-elements-in-header.tsx
index 18130d0ea9..045a0d2723 100644
--- a/stories/components/data-table/docs/examples/additional-elements-in-header.tsx
+++ b/stories/components/data-table/docs/examples/additional-elements-in-header.tsx
@@ -36,7 +36,7 @@ const Demo = () => {
           }
         `}
       </style>
-      <DataTable data={data} aria-label={'Table title. Additional elements in header'}>
+      <DataTable data={data} aria-label={'Additional elements in header'}>
         <DataTable.Head>
           <DataTable.Column name='keyword' children='Keyword' />
           <DataTable.Column name='kd' children='KD,%' />
diff --git a/stories/components/data-table/docs/examples/borders.tsx b/stories/components/data-table/docs/examples/borders.tsx
index 8b3715bc07..f4bd9ade9b 100644
--- a/stories/components/data-table/docs/examples/borders.tsx
+++ b/stories/components/data-table/docs/examples/borders.tsx
@@ -3,7 +3,7 @@ import DataTable from '@semcore/data-table';
 
 const Demo = () => {
   return (
-    <DataTable data={data} aria-label={'Table title. Borders'}>
+    <DataTable data={data} aria-label={'Borders'}>
       <DataTable.Head>
         <DataTable.Column name='keyword' children='Keyword' />
         <DataTable.Column vBorders>
diff --git a/stories/components/data-table/docs/examples/column-alignment.tsx b/stories/components/data-table/docs/examples/column-alignment.tsx
index cec50f7d0f..2e21a6cd41 100644
--- a/stories/components/data-table/docs/examples/column-alignment.tsx
+++ b/stories/components/data-table/docs/examples/column-alignment.tsx
@@ -3,7 +3,7 @@ import DataTable from '@semcore/data-table';
 
 const Demo = () => {
   return (
-    <DataTable data={data} aria-label={'Table title. Column alignment'}>
+    <DataTable data={data} aria-label={'Column alignment'}>
       <DataTable.Head>
         <DataTable.Column name='keyword' children='Keyword' />
         <DataTable.Column name='kd' children='KD,%' justifyContent='flex-end' />
diff --git a/stories/components/data-table/docs/examples/column-expand.tsx b/stories/components/data-table/docs/examples/column-expand.tsx
index a7373f4974..c7df15b6ea 100644
--- a/stories/components/data-table/docs/examples/column-expand.tsx
+++ b/stories/components/data-table/docs/examples/column-expand.tsx
@@ -3,7 +3,7 @@ import DataTable from '@semcore/data-table';
 
 const Demo = () => {
   return (
-    <DataTable data={data} aria-label={'Table title. Column expanded'}>
+    <DataTable data={data} aria-label={'Column expanded'}>
       <DataTable.Head>
         <DataTable.Column name='keyword' children='Keyword' wMax={'300px'} />
         <DataTable.Column name='kd' children='Difficulty Difficulty' wMax={'85px'} />
diff --git a/stories/components/data-table/docs/examples/column-sizes.tsx b/stories/components/data-table/docs/examples/column-sizes.tsx
index caeb1eec1f..87a8417f86 100644
--- a/stories/components/data-table/docs/examples/column-sizes.tsx
+++ b/stories/components/data-table/docs/examples/column-sizes.tsx
@@ -3,7 +3,7 @@ import DataTable from '@semcore/data-table';
 
 const Demo = () => {
   return (
-    <DataTable data={data} aria-label={'Table title. Column size'}>
+    <DataTable data={data} aria-label={'Column size'}>
       <DataTable.Head>
         <DataTable.Column name='keyword' children='Keyword' wMin={100} flex='1 0 auto' />
         <DataTable.Column name='kd' children='KD,%' flex='0' wMin={100} />
diff --git a/stories/components/data-table/docs/examples/columns-merging.tsx b/stories/components/data-table/docs/examples/columns-merging.tsx
index c713848632..db74275fb2 100644
--- a/stories/components/data-table/docs/examples/columns-merging.tsx
+++ b/stories/components/data-table/docs/examples/columns-merging.tsx
@@ -34,7 +34,7 @@ const data = [
 
 const Demo = () => {
   return (
-    <DataTable data={data} aria-label={'Table title. Columns merging'}>
+    <DataTable data={data} aria-label={'Columns merging'}>
       <DataTable.Head>
         <DataTable.Column name='keyword' children='Keyword' />
         <DataTable.Column name='kd' children='KD,%' />
diff --git a/stories/components/data-table/docs/examples/compact.tsx b/stories/components/data-table/docs/examples/compact.tsx
index e53663eebb..0556155ac3 100644
--- a/stories/components/data-table/docs/examples/compact.tsx
+++ b/stories/components/data-table/docs/examples/compact.tsx
@@ -3,7 +3,7 @@ import DataTable from '@semcore/data-table';
 
 const Demo = () => {
   return (
-    <DataTable data={data} compact aria-label={'Table title. Compact'}>
+    <DataTable data={data} compact aria-label={'Compact'}>
       <DataTable.Head>
         <DataTable.Column name='keyword' children='Keyword' />
         <DataTable.Column name='kd' children='KD,%' />
diff --git a/stories/components/data-table/docs/examples/custom-rows-rendering.tsx b/stories/components/data-table/docs/examples/custom-rows-rendering.tsx
index 8e99e8bfa9..36df8a73c5 100644
--- a/stories/components/data-table/docs/examples/custom-rows-rendering.tsx
+++ b/stories/components/data-table/docs/examples/custom-rows-rendering.tsx
@@ -9,7 +9,7 @@ const cache = new CellMeasurerCache({
 
 const Demo = () => {
   return (
-    <DataTable data={data} aria-label={'Table title. Custom rows rendering'}>
+    <DataTable data={data} aria-label={'Custom rows rendering'}>
       <DataTable.Head>
         <DataTable.Column name='keyword' children='Keyword' />
         <DataTable.Column name='tags' children='Tags' />
diff --git a/stories/components/data-table/docs/examples/custom-view-for-table-body.tsx b/stories/components/data-table/docs/examples/custom-view-for-table-body.tsx
index 1fdc9d965c..d5c6e17bef 100644
--- a/stories/components/data-table/docs/examples/custom-view-for-table-body.tsx
+++ b/stories/components/data-table/docs/examples/custom-view-for-table-body.tsx
@@ -4,7 +4,7 @@ import { Box, Flex } from '@semcore/flex-box';
 
 const Demo = () => {
   return (
-    <DataTable data={data} aria-label={'Table title. Custom footer cells'}>
+    <DataTable data={data} aria-label={'Custom footer cells'}>
       <DataTable.Head>
         <DataTable.Column name='keyword' children='Keyword' />
         <DataTable.Column name='kd' children='KD,%' />
diff --git a/stories/components/data-table/docs/examples/customizing-header.tsx b/stories/components/data-table/docs/examples/customizing-header.tsx
index 1fe72a587c..bc5e7da331 100644
--- a/stories/components/data-table/docs/examples/customizing-header.tsx
+++ b/stories/components/data-table/docs/examples/customizing-header.tsx
@@ -7,7 +7,7 @@ import { LinkTrigger } from '@semcore/base-trigger';
 
 const Demo = () => {
   return (
-    <DataTable data={data} aria-label={'Table title. Customizing header'}>
+    <DataTable data={data} aria-label={'Customizing header'}>
       <DataTable.Head>
         <DataTable.Column
           name='keyword'
diff --git a/stories/components/data-table/docs/examples/export-in-image.tsx b/stories/components/data-table/docs/examples/export-in-image.tsx
index 8572a28017..e66b37c0b9 100644
--- a/stories/components/data-table/docs/examples/export-in-image.tsx
+++ b/stories/components/data-table/docs/examples/export-in-image.tsx
@@ -57,7 +57,7 @@ const Demo = () => {
         </svg>
       </div>
 
-      <DataTable data={data} aria-label={'Table title. Export in image'} ref={tableRef} w={500}>
+      <DataTable data={data} aria-label={'Export in image'} ref={tableRef} w={500}>
         <DataTable.Head>
           <DataTable.Column name='keyword' children='Keyword' />
           <DataTable.Column name='kd' children='KD,%' />
diff --git a/stories/components/data-table/docs/examples/fixed-columns.tsx b/stories/components/data-table/docs/examples/fixed-columns.tsx
index d45cd4e31e..175f93ac58 100644
--- a/stories/components/data-table/docs/examples/fixed-columns.tsx
+++ b/stories/components/data-table/docs/examples/fixed-columns.tsx
@@ -3,7 +3,7 @@ import DataTable from '@semcore/data-table';
 
 const Demo = () => {
   return (
-    <DataTable data={data} aria-label={'Table title. Fixed columns'}>
+    <DataTable data={data} aria-label={'Fixed columns'}>
       <DataTable.Head wMin={1000}>
         <DataTable.Column name='keyword' children='Keyword' fixed='left' />
         <DataTable.Column name='kd' children='KD,%' />
diff --git a/stories/components/data-table/docs/examples/fixed-header-with-spin-overlay.tsx b/stories/components/data-table/docs/examples/fixed-header-with-spin-overlay.tsx
index eaae3c2e7f..962344f460 100644
--- a/stories/components/data-table/docs/examples/fixed-header-with-spin-overlay.tsx
+++ b/stories/components/data-table/docs/examples/fixed-header-with-spin-overlay.tsx
@@ -14,7 +14,7 @@ const Demo = () => {
     };
   }, [loading]);
   return (
-    <DataTable data={data} aria-label={'Table title. Fixed header with spin overlay'}>
+    <DataTable data={data} aria-label={'Fixed header with spin overlay'}>
       <Box position='sticky' top={0} zIndex={2}>
         <DataTable.Head>
           <DataTable.Column name='keyword' children='Keyword' />
diff --git a/stories/components/data-table/docs/examples/fixed-header.tsx b/stories/components/data-table/docs/examples/fixed-header.tsx
index e472970c06..5de6ddadd5 100644
--- a/stories/components/data-table/docs/examples/fixed-header.tsx
+++ b/stories/components/data-table/docs/examples/fixed-header.tsx
@@ -7,7 +7,7 @@ const Demo = () => {
 
   return (
     <>
-      <DataTable data={data} aria-label={'Table title. Fixed header'}>
+      <DataTable data={data} aria-label={'Fixed header'}>
         <Box position='sticky' top={top} zIndex={2}>
           <DataTable.Head wMin={1000}>
             <DataTable.Column name='keyword' children='Keyword' />
@@ -19,7 +19,7 @@ const Demo = () => {
         <DataTable.Body />
       </DataTable>
       <h3>with Scroll.Bar in Header</h3>
-      <DataTable data={data} aria-label={'Table title. Fixed header'}>
+      <DataTable data={data} aria-label={'Fixed header with scroll'}>
         <Box position='sticky' top={top} zIndex={2}>
           <DataTable.Head wMin={1000} withScrollBar>
             <DataTable.Column name='keyword' children='Keyword' />
diff --git a/stories/components/data-table/docs/examples/multi-level-header.tsx b/stories/components/data-table/docs/examples/multi-level-header.tsx
index 7b07db2b78..9f8661fc20 100644
--- a/stories/components/data-table/docs/examples/multi-level-header.tsx
+++ b/stories/components/data-table/docs/examples/multi-level-header.tsx
@@ -3,7 +3,7 @@ import DataTable from '@semcore/data-table';
 
 const Demo = () => {
   return (
-    <DataTable data={data} aria-label={'Table title. Multi level header'}>
+    <DataTable data={data} aria-label={'Multi level header'}>
       <DataTable.Head>
         <DataTable.Column name='keyword' children='Keyword' />
         <DataTable.Column vBorders wMax={'40%'}>
diff --git a/stories/components/data-table/docs/examples/pagination.tsx b/stories/components/data-table/docs/examples/pagination.tsx
index 33b47812f5..677388107b 100644
--- a/stories/components/data-table/docs/examples/pagination.tsx
+++ b/stories/components/data-table/docs/examples/pagination.tsx
@@ -15,7 +15,7 @@ const Demo = () => {
 
   return (
     <>
-      <DataTable data={tableData} aria-label={'Table title. Pagination'}>
+      <DataTable data={tableData} aria-label={'Pagination'}>
         <DataTable.Head>
           <DataTable.Column name='keyword' children='Keyword' justifyContent='left' />
           <DataTable.Column name='kd' children='KD,%' justifyContent='right' wMax={68} />
diff --git a/stories/components/data-table/docs/examples/rows-merging.tsx b/stories/components/data-table/docs/examples/rows-merging.tsx
index 33fa2191b7..9598ddf663 100644
--- a/stories/components/data-table/docs/examples/rows-merging.tsx
+++ b/stories/components/data-table/docs/examples/rows-merging.tsx
@@ -41,7 +41,7 @@ const data = [
 
 const Demo = () => {
   return (
-    <DataTable data={data} aria-label={'Table title. Rows grouping'}>
+    <DataTable data={data} aria-label={'Rows grouping'}>
       <DataTable.Head>
         <DataTable.Column name='keyword' children='Keyword' />
         <DataTable.Column name='kd' children='KD,%' />
diff --git a/stories/components/data-table/docs/examples/scroll-in-table.tsx b/stories/components/data-table/docs/examples/scroll-in-table.tsx
index 5047c52f0b..61549567c8 100644
--- a/stories/components/data-table/docs/examples/scroll-in-table.tsx
+++ b/stories/components/data-table/docs/examples/scroll-in-table.tsx
@@ -3,7 +3,7 @@ import DataTable from '@semcore/data-table';
 
 const Demo = () => {
   return (
-    <DataTable data={data} aria-label={'Table title. Scroll inside'}>
+    <DataTable data={data} aria-label={'Scroll inside'}>
       <DataTable.Head wMin={1000}>
         <DataTable.Column name='keyword' children='Keyword' />
         <DataTable.Column name='kd' children='KD,%' />
diff --git a/stories/components/data-table/docs/examples/secondary-table.tsx b/stories/components/data-table/docs/examples/secondary-table.tsx
index 2470e91d13..cd746ffcef 100644
--- a/stories/components/data-table/docs/examples/secondary-table.tsx
+++ b/stories/components/data-table/docs/examples/secondary-table.tsx
@@ -3,12 +3,7 @@ import DataTable from '@semcore/data-table';
 
 const Demo = () => {
   return (
-    <DataTable
-      data={data}
-      use='secondary'
-      sort={['kd', 'desc']}
-      aria-label={'Table title. Secondary'}
-    >
+    <DataTable data={data} use='secondary' sort={['kd', 'desc']} aria-label={'Secondary'}>
       <DataTable.Head>
         <DataTable.Column name='keyword' children='Keyword' />
         <DataTable.Column name='kd' children='KD,%' />
diff --git a/stories/components/data-table/docs/examples/sorting-changing-size-by-columns.tsx b/stories/components/data-table/docs/examples/sorting-changing-size-by-columns.tsx
index b88bc4c6cd..be0071afd8 100644
--- a/stories/components/data-table/docs/examples/sorting-changing-size-by-columns.tsx
+++ b/stories/components/data-table/docs/examples/sorting-changing-size-by-columns.tsx
@@ -28,7 +28,7 @@ const Demo = () => {
       data={sortedData}
       sort={sort}
       onSortChange={setSort}
-      aria-label={'Table title. With columns marked to recalculate'}
+      aria-label={'Sorting with columns marked to recalculate'}
     >
       <DataTable.Head>
         <DataTable.Column name='keyword' children='Keyword' justifyContent='left' sortable />
diff --git a/stories/components/data-table/docs/examples/sorting-changing-size.tsx b/stories/components/data-table/docs/examples/sorting-changing-size.tsx
index 7871ae3ce9..afa2f51833 100644
--- a/stories/components/data-table/docs/examples/sorting-changing-size.tsx
+++ b/stories/components/data-table/docs/examples/sorting-changing-size.tsx
@@ -28,7 +28,7 @@ const Demo = () => {
       data={sortedData}
       sort={sort}
       onSortChange={setSort}
-      aria-label={'Table title. Sorting with change sortable column size'}
+      aria-label={'Sorting with change sortable column size'}
     >
       <DataTable.Head>
         <DataTable.Column name='keyword' children='Keyword' justifyContent='left' sortable />
diff --git a/stories/components/data-table/docs/examples/sorting.tsx b/stories/components/data-table/docs/examples/sorting.tsx
index 9c477589f4..f5d8876383 100644
--- a/stories/components/data-table/docs/examples/sorting.tsx
+++ b/stories/components/data-table/docs/examples/sorting.tsx
@@ -24,12 +24,7 @@ const Demo = () => {
   );
 
   return (
-    <DataTable
-      data={sortedData}
-      sort={sort}
-      onSortChange={setSort}
-      aria-label={'Table title. Sorting'}
-    >
+    <DataTable data={sortedData} sort={sort} onSortChange={setSort} aria-label={'Sorting'}>
       <DataTable.Head>
         <DataTable.Column name='keyword' children='Keyword' justifyContent='left' sortable />
         <DataTable.Column name='kd' children='KD,%' justifyContent='right' wMax={68} sortable />
diff --git a/stories/components/data-table/docs/examples/table-in-table-with-fixed-column.tsx b/stories/components/data-table/docs/examples/table-in-table-with-fixed-column.tsx
index 65350d88f5..441d8f4304 100644
--- a/stories/components/data-table/docs/examples/table-in-table-with-fixed-column.tsx
+++ b/stories/components/data-table/docs/examples/table-in-table-with-fixed-column.tsx
@@ -18,7 +18,7 @@ const Demo = () => {
   const [value, setValue] = React.useState<number[]>([]);
   return (
     <Accordion value={value} onChange={setValue}>
-      <DataTable data={data} aria-label={'Table title. Table in table'}>
+      <DataTable data={data} aria-label={'Parent with fixed column'}>
         <DataTable.Head wMin={1000}>
           <DataTable.Column name='keyword' children='Keyword' fixed='left' />
           <DataTable.Column name='kd' children='KD,%' />
@@ -33,7 +33,7 @@ const Demo = () => {
                 active: value.includes(index),
                 collapse: {
                   children: (
-                    <DataTable data={data} aria-label={'Table title. In accordion'}>
+                    <DataTable data={data} aria-label={'Nested'}>
                       {/* [1] Set the desired z-index */}
                       <DataTable.Head hidden z-index={1}>
                         <DataTable.Column name='keyword' flex='inherit' fixed='left' />
diff --git a/stories/components/data-table/docs/examples/table-in-table.tsx b/stories/components/data-table/docs/examples/table-in-table.tsx
index 76fadd6128..f7865d4825 100644
--- a/stories/components/data-table/docs/examples/table-in-table.tsx
+++ b/stories/components/data-table/docs/examples/table-in-table.tsx
@@ -19,7 +19,7 @@ const Demo = () => {
 
   return (
     <Accordion value={value} onChange={setValue}>
-      <DataTable data={data} aria-label={'Table title. In table'}>
+      <DataTable data={data} aria-label={'Parent'}>
         <DataTable.Head>
           <DataTable.Column name='keyword' children='Keyword' />
           <DataTable.Column name='kd' children='KD,%' />
@@ -34,7 +34,7 @@ const Demo = () => {
                 active: value.includes(index),
                 collapse: {
                   children: (
-                    <DataTable data={data} aria-label={'Table title. In table'}>
+                    <DataTable data={data} aria-label={'Nested'}>
                       {/* [1] Hide the table header */}
                       <DataTable.Head hidden>
                         {/* [2] Set "inherit" to use the size from the top table for each column. */}
diff --git a/stories/components/data-table/docs/examples/virtual-scroll-in-table.tsx b/stories/components/data-table/docs/examples/virtual-scroll-in-table.tsx
index ef36b3ddd0..636018bda3 100644
--- a/stories/components/data-table/docs/examples/virtual-scroll-in-table.tsx
+++ b/stories/components/data-table/docs/examples/virtual-scroll-in-table.tsx
@@ -22,7 +22,7 @@ const data = Array(10000)
 
 const Demo = () => {
   return (
-    <DataTable data={data} totalRows={10000} aria-label={'Table title. Virtual scroll:x::'}>
+    <DataTable data={data} totalRows={10000} aria-label={'Virtual scroll'}>
       <DataTable.Head>
         <DataTable.Column name='id' children='ID' />
         <DataTable.Column name='keyword' children='Keyword' />

From fe96b1dfa00702bb296672272b570c08fac3705a Mon Sep 17 00:00:00 2001
From: faisne <166654065+sheila-semrush@users.noreply.github.com>
Date: Thu, 9 Jan 2025 20:35:18 +0100
Subject: [PATCH 2/3] [docs] Added start/stop button and live messages to Spin,
 SpinContainer, Skeleton examples

---
 .../docs/examples/download-status.tsx         | 70 ---------------
 .../docs/examples/skeleton-in-table.tsx       | 50 +++++++----
 .../docs/examples/spin-container-in-table.tsx | 87 +++++++++++++++++++
 .../examples/loading_state_in_the_input.tsx   | 35 +++++---
 .../examples/text_initial_loading.tsx         | 21 +++--
 .../examples/usage_in_content.tsx             | 42 +++------
 .../examples/usage_in_dropdown_lists.tsx      | 48 ----------
 .../examples/usage_in_dropdowns.tsx           | 51 +++++++++++
 .../spin-container/spin-container-api.md      |  2 +-
 .../spin-container/spin-container-code.md     |  6 +-
 .../spin/examples/basic_example.tsx           | 16 ++--
 .../table-group/data-table/data-table-code.md | 18 +---
 12 files changed, 234 insertions(+), 212 deletions(-)
 delete mode 100644 stories/components/data-table/docs/examples/download-status.tsx
 create mode 100644 stories/components/data-table/docs/examples/spin-container-in-table.tsx
 delete mode 100644 website/docs/components/spin-container/examples/usage_in_dropdown_lists.tsx
 create mode 100644 website/docs/components/spin-container/examples/usage_in_dropdowns.tsx

diff --git a/stories/components/data-table/docs/examples/download-status.tsx b/stories/components/data-table/docs/examples/download-status.tsx
deleted file mode 100644
index 515030158f..0000000000
--- a/stories/components/data-table/docs/examples/download-status.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-import DataTable from '@semcore/data-table';
-import SpinContainer from '@semcore/spin-container';
-
-const Demo = (): any => {
-  const [loading, setLoading] = React.useState(true);
-  React.useEffect(() => {
-    const timer = setInterval(() => {
-      setLoading(!loading);
-    }, 1500);
-    return () => {
-      clearInterval(timer);
-    };
-  }, [loading]);
-  return (
-    <DataTable data={data} aria-label={'Table title. Download status'}>
-      <DataTable.Head>
-        <DataTable.Column name='keyword' children='Keyword' />
-        <DataTable.Column name='kd' children='KD,%' />
-        <DataTable.Column name='cpc' children='CPC' />
-        <DataTable.Column name='vol' children='Vol.' />
-      </DataTable.Head>
-      <SpinContainer
-        loading={loading}
-        style={{ overflow: 'initial' }}
-        use:aria-busy={undefined}
-        // @ts-ignore
-        inert={loading ? '' : undefined}
-      >
-        <DataTable.Body aria-busy={loading} />
-        <SpinContainer.Overlay />
-      </SpinContainer>
-    </DataTable>
-  );
-};
-
-const data = [
-  {
-    keyword: 'ebay buy',
-    kd: '77.8',
-    cpc: '$1.25',
-    vol: '32,500,000',
-  },
-  {
-    keyword: 'www.ebay.com',
-    kd: '11.2',
-    cpc: '$3.4',
-    vol: '65,457,920',
-  },
-  {
-    keyword: 'www.ebay.com',
-    kd: '10',
-    cpc: '$0.65',
-    vol: '47,354,640',
-  },
-  {
-    keyword: 'ebay buy',
-    kd: '-',
-    cpc: '$0',
-    vol: 'n/a',
-  },
-  {
-    keyword: 'ebay buy',
-    kd: '75.89',
-    cpc: '$0',
-    vol: '21,644,290',
-  },
-];
-
-export default Demo;
diff --git a/stories/components/data-table/docs/examples/skeleton-in-table.tsx b/stories/components/data-table/docs/examples/skeleton-in-table.tsx
index 0b926e4218..53a8787fc2 100644
--- a/stories/components/data-table/docs/examples/skeleton-in-table.tsx
+++ b/stories/components/data-table/docs/examples/skeleton-in-table.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import DataTable from '@semcore/data-table';
 import Skeleton from '@semcore/skeleton';
+import Button from '@semcore/ui/button';
+import { ScreenReaderOnly } from '@semcore/ui/flex-box';
 
 function getSkeleton() {
   return ['keyword', 'kd', 'cpc', 'vol'].map((c) => ({
@@ -16,26 +18,42 @@ function getSkeleton() {
 
 const Demo = () => {
   const [loading, setLoading] = React.useState(true);
+  const [message, setMessage] = React.useState('');
+
   React.useEffect(() => {
-    const timer = setInterval(() => {
-      setLoading(!loading);
-    }, 2000);
+    const timer = setTimeout(() => {
+      setMessage('');
+    }, 300);
     return () => {
-      clearInterval(timer);
+      clearTimeout(timer);
     };
-  }, [loading]);
+  }, [message]);
+
+  const handleLoading = () => {
+    setLoading(!loading);
+    setMessage(loading ? 'Data loaded' : 'Loading started');
+  };
+
   return (
-    <DataTable data={data} aria-label={'Table title. Skeleton'}>
-      <DataTable.Head>
-        <DataTable.Column name='keyword' children='Keyword' />
-        <DataTable.Column name='kd' children='KD,%' />
-        <DataTable.Column name='cpc' children='CPC' />
-        <DataTable.Column name='vol' children='Vol.' />
-      </DataTable.Head>
-      <DataTable.Body
-        {...(loading ? { rows: [getSkeleton(), getSkeleton(), getSkeleton()] } : {})}
-      />
-    </DataTable>
+    <>
+      <ScreenReaderOnly role='status' aria-live='polite'>
+        {message}
+      </ScreenReaderOnly>
+      <DataTable data={data} aria-label={'Loading using Skeleton'}>
+        <DataTable.Head>
+          <DataTable.Column name='keyword' children='Keyword' />
+          <DataTable.Column name='kd' children='KD,%' />
+          <DataTable.Column name='cpc' children='CPC' />
+          <DataTable.Column name='vol' children='Vol.' />
+        </DataTable.Head>
+        <DataTable.Body
+          {...(loading ? { rows: [getSkeleton(), getSkeleton(), getSkeleton()] } : {})}
+        />
+      </DataTable>
+      <Button onClick={handleLoading} mt={3}>
+        {loading ? 'Stop loading' : 'Start loading'}
+      </Button>
+    </>
   );
 };
 
diff --git a/stories/components/data-table/docs/examples/spin-container-in-table.tsx b/stories/components/data-table/docs/examples/spin-container-in-table.tsx
new file mode 100644
index 0000000000..b43c8090aa
--- /dev/null
+++ b/stories/components/data-table/docs/examples/spin-container-in-table.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import DataTable from '@semcore/data-table';
+import SpinContainer from '@semcore/spin-container';
+import Button from '@semcore/ui/button';
+import { ScreenReaderOnly } from '@semcore/ui/flex-box';
+
+const Demo = (): any => {
+  const [loading, setLoading] = React.useState(true);
+  const [message, setMessage] = React.useState('');
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      setMessage('');
+    }, 300);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [message]);
+
+  const handleLoading = () => {
+    setLoading(!loading);
+    setMessage(loading ? 'Data loaded' : 'Loading started');
+  };
+
+  return (
+    <>
+      <ScreenReaderOnly role='status' aria-live='polite'>
+        {message}
+      </ScreenReaderOnly>
+      <DataTable data={data} aria-label={'Loading using SpinContainer'}>
+        <DataTable.Head>
+          <DataTable.Column name='keyword' children='Keyword' />
+          <DataTable.Column name='kd' children='KD,%' />
+          <DataTable.Column name='cpc' children='CPC' />
+          <DataTable.Column name='vol' children='Vol.' />
+        </DataTable.Head>
+        <SpinContainer
+          loading={loading}
+          style={{ overflow: 'initial' }}
+          // @ts-ignore
+          inert={loading ? '' : undefined}
+        >
+          <DataTable.Body />
+          <SpinContainer.Overlay />
+        </SpinContainer>
+      </DataTable>
+      <Button onClick={handleLoading} mt={3}>
+        {loading ? 'Stop loading' : 'Start loading'}
+      </Button>
+    </>
+  );
+};
+
+const data = [
+  {
+    keyword: 'ebay buy',
+    kd: '77.8',
+    cpc: '$1.25',
+    vol: '32,500,000',
+  },
+  {
+    keyword: 'www.ebay.com',
+    kd: '11.2',
+    cpc: '$3.4',
+    vol: '65,457,920',
+  },
+  {
+    keyword: 'www.ebay.com',
+    kd: '10',
+    cpc: '$0.65',
+    vol: '47,354,640',
+  },
+  {
+    keyword: 'ebay buy',
+    kd: '-',
+    cpc: '$0',
+    vol: 'n/a',
+  },
+  {
+    keyword: 'ebay buy',
+    kd: '75.89',
+    cpc: '$0',
+    vol: '21,644,290',
+  },
+];
+
+export default Demo;
diff --git a/website/docs/components/input/examples/loading_state_in_the_input.tsx b/website/docs/components/input/examples/loading_state_in_the_input.tsx
index 8e8f652532..f0c1a4003e 100644
--- a/website/docs/components/input/examples/loading_state_in_the_input.tsx
+++ b/website/docs/components/input/examples/loading_state_in_the_input.tsx
@@ -1,21 +1,36 @@
 import React from 'react';
-import Input from 'intergalactic/input';
-import Spin from 'intergalactic/spin';
-import { Text } from 'intergalactic/typography';
-import { Box } from 'intergalactic/flex-box';
+import Input from '@semcore/input';
+import Spin from '@semcore/spin';
+import { Text } from '@semcore/typography';
+import { Box, ScreenReaderOnly } from '@semcore/flex-box';
 
 const Demo = () => {
   const [value, setValue] = React.useState('');
   const [loading, setLoading] = React.useState(false);
+  const [loadingStatus, setLoadingStatus] = React.useState(null);
 
   React.useEffect(() => {
-    const timer = setTimeout(() => setLoading(false), 1000);
+    const timer = setTimeout(() => {
+      setLoadingStatus(<ScreenReaderOnly>Loaded</ScreenReaderOnly>);
+      setLoading(false);
+    }, 2000);
     return () => clearTimeout(timer);
   }, [value]);
 
+  React.useEffect(() => {
+    if (loading) {
+      setLoadingStatus(<Spin size='xs' />);
+    } else {
+      const timer = setTimeout(() => {
+        setLoadingStatus(null);
+      }, 300);
+      return () => clearTimeout(timer);
+    }
+  }, [loading]);
+
   function handlerInput(v) {
-    setLoading(true);
     setValue(v);
+    setLoading(true);
   }
 
   return (
@@ -31,11 +46,9 @@ const Demo = () => {
             value={value}
             onChange={handlerInput}
           />
-          {loading && (
-            <Input.Addon>
-              <Spin size='xs' />
-            </Input.Addon>
-          )}
+          <Input.Addon role='status' aria-live='polite'>
+            {loadingStatus}
+          </Input.Addon>
         </Input>
       </Box>
     </>
diff --git a/website/docs/components/skeleton/examples/text_initial_loading.tsx b/website/docs/components/skeleton/examples/text_initial_loading.tsx
index d8dbe2fd9a..6172f81ba8 100644
--- a/website/docs/components/skeleton/examples/text_initial_loading.tsx
+++ b/website/docs/components/skeleton/examples/text_initial_loading.tsx
@@ -1,19 +1,15 @@
 import React from 'react';
-import { Text } from 'intergalactic/typography';
-import { Flex } from 'intergalactic/flex-box';
-import Button from 'intergalactic/button';
-import Skeleton from 'intergalactic/skeleton';
+import { Text } from '@semcore/typography';
+import { Flex } from '@semcore/flex-box';
+import Button from '@semcore/button';
+import Skeleton from '@semcore/skeleton';
 
 const Demo = () => {
-  const [loading, setLoading] = React.useState(false);
+  const [loading, setLoading] = React.useState(true);
 
   return (
     <>
-      <Flex gap={2} mb={3}>
-        <Button onClick={() => setLoading(true)}>Load data</Button>
-        <Button onClick={() => setLoading(false)}>Stop loading</Button>
-      </Flex>
-      <Flex role='status' aria-live='polite' h={80}>
+      <Flex role='status' aria-live='polite'>
         {!loading && (
           <Text size={200}>
             The Egyptian pyramids are ancient masonry structures located in Egypt. Sources cite at
@@ -21,11 +17,14 @@ const Demo = () => {
             the Kingdom of Kush, now located in the modern country of Sudan.
           </Text>
         )}
-        <Skeleton hidden={!loading}>
+        <Skeleton hidden={!loading} h={60}>
           <Skeleton.Text amount={2} />
           <Skeleton.Text y='40' width='60%' />
         </Skeleton>
       </Flex>
+      <Button onClick={() => setLoading(!loading)} mt={3}>
+        {loading ? 'Stop loading' : 'Start loading'}
+      </Button>
     </>
   );
 };
diff --git a/website/docs/components/spin-container/examples/usage_in_content.tsx b/website/docs/components/spin-container/examples/usage_in_content.tsx
index 21052c7c5c..9187667179 100644
--- a/website/docs/components/spin-container/examples/usage_in_content.tsx
+++ b/website/docs/components/spin-container/examples/usage_in_content.tsx
@@ -1,41 +1,27 @@
 import React from 'react';
-import { Text } from 'intergalactic/typography';
-import SpinContainer from 'intergalactic/spin-container';
+import { Text } from '@semcore/typography';
+import SpinContainer from '@semcore/spin-container';
+import Button from '@semcore/button';
 
 class Demo extends React.PureComponent {
   state = { loading: true };
-  timerFetch: any;
-  timer: any;
-
-  componentDidMount() {
-    this.timerFetch = setInterval(this.fetchData, 3000);
-  }
-
-  componentWillUnmount() {
-    clearInterval(this.timerFetch);
-    clearInterval(this.timer);
-  }
-
-  fetchData = () => {
-    this.setState({ loading: false });
-    setTimeout(() => {
-      this.timer = this.setState({ loading: true });
-    }, 1000);
-  };
 
   render() {
     const { loading } = this.state;
 
     return (
-      <SpinContainer loading={loading} size='l' h={81}>
-        {!loading && (
-          <Text size={100}>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam atque beatae
-            distinctio doloremque, et id quae reiciendis repellat saepe sapiente sequi veritatis.
-            Adipisci, consequuntur excepturi nobis porro quas recusandae?
+      <>
+        <SpinContainer loading={loading} size='l' aria-live='polite' role='status'>
+          <Text size={200} tag='div'>
+            The Intergalactic Design System uses two sets of design tokens: basic and semantic.
+            Basic tokens set the main colors, while semantic tokens build on them. Changing the
+            basic tokens lets you create new themes.
           </Text>
-        )}
-      </SpinContainer>
+        </SpinContainer>
+        <Button onClick={() => this.setState({ loading: !loading })} mt={3}>
+          {loading ? 'Stop loading' : 'Start loading'}
+        </Button>
+      </>
     );
   }
 }
diff --git a/website/docs/components/spin-container/examples/usage_in_dropdown_lists.tsx b/website/docs/components/spin-container/examples/usage_in_dropdown_lists.tsx
deleted file mode 100644
index 8d510142bb..0000000000
--- a/website/docs/components/spin-container/examples/usage_in_dropdown_lists.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import SpinContainer from 'intergalactic/spin-container';
-import { Text } from 'intergalactic/typography';
-import Dropdown from 'intergalactic/dropdown';
-import Button from 'intergalactic/button';
-
-class Demo extends React.PureComponent {
-  state = { loading: true };
-  timerFetch: any;
-  timer: any;
-
-  componentDidMount() {
-    this.timerFetch = setInterval(this.fetchData, 3000);
-  }
-
-  componentWillUnmount() {
-    clearInterval(this.timerFetch);
-    clearInterval(this.timer);
-  }
-
-  fetchData = () => {
-    this.setState({ loading: false });
-    setTimeout(() => {
-      this.timer = this.setState({ loading: true });
-    }, 1000);
-  };
-
-  render() {
-    const { loading } = this.state;
-
-    return (
-      <Dropdown>
-        <Dropdown.Trigger tag={Button}>Help me</Dropdown.Trigger>
-        <Dropdown.Popper w={290} p={4} aria-label='Dropdown popper description'>
-          <SpinContainer loading={loading} size={'l'}>
-            <Text size={100}>
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam atque beatae
-              distinctio doloremque, et id quae reiciendis repellat saepe sapiente sequi veritatis.
-              Adipisci, consequuntur excepturi nobis porro quas recusandae?
-            </Text>
-          </SpinContainer>
-        </Dropdown.Popper>
-      </Dropdown>
-    );
-  }
-}
-
-export default Demo;
diff --git a/website/docs/components/spin-container/examples/usage_in_dropdowns.tsx b/website/docs/components/spin-container/examples/usage_in_dropdowns.tsx
new file mode 100644
index 0000000000..fad353261b
--- /dev/null
+++ b/website/docs/components/spin-container/examples/usage_in_dropdowns.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import SpinContainer from '@semcore/spin-container';
+import { Text } from '@semcore/typography';
+import Dropdown from '@semcore/dropdown';
+import Button from '@semcore/button';
+
+class Demo extends React.PureComponent {
+  state = { loading: true };
+  timer: any;
+  textRef = React.createRef<HTMLDivElement>();
+
+  componentWillUnmount() {
+    clearTimeout(this.timer);
+  }
+
+  fetchData = () => {
+    clearTimeout(this.timer);
+    this.setState({ loading: true });
+    this.timer = setTimeout(() => {
+      this.setState({ loading: false }, () => this.textRef.current?.focus());
+    }, 1500);
+  };
+
+  render() {
+    const { loading } = this.state;
+
+    return (
+      <Dropdown onVisibleChange={this.fetchData}>
+        <Dropdown.Trigger tag={Button} id='dropdown-trigger'>
+          Dropdown with SpinContainer
+        </Dropdown.Trigger>
+        <Dropdown.Popper
+          w={290}
+          p={4}
+          aria-labelledby='dropdown-trigger'
+          tabIndex={loading ? 0 : -1}
+        >
+          <SpinContainer loading={loading} size={'xl'}>
+            <Text size={200} ref={this.textRef} tabIndex={0} style={{ outline: '0' }}>
+              The Intergalactic Design System uses two sets of design tokens: basic and semantic.
+              Basic tokens set the main colors, while semantic tokens build on them. Changing the
+              basic tokens lets you create new themes.
+            </Text>
+          </SpinContainer>
+        </Dropdown.Popper>
+      </Dropdown>
+    );
+  }
+}
+
+export default Demo;
diff --git a/website/docs/components/spin-container/spin-container-api.md b/website/docs/components/spin-container/spin-container-api.md
index 386ff59cf0..94b89fa5b1 100644
--- a/website/docs/components/spin-container/spin-container-api.md
+++ b/website/docs/components/spin-container/spin-container-api.md
@@ -24,7 +24,7 @@ import SpinContainer from '@semcore/ui/spin-container';
 
 ## SpinContainer.Overlay
 
-By default, it is a UI component and a base that closes the content under `Spin`.
+A semitransparent box with a [Spin](../spin/spin.md) displayed over the content.
 
 ```jsx
 import SpinContainer from '@semcore/ui/spin-container';
diff --git a/website/docs/components/spin-container/spin-container-code.md b/website/docs/components/spin-container/spin-container-code.md
index 915b261bd0..1937f58708 100644
--- a/website/docs/components/spin-container/spin-container-code.md
+++ b/website/docs/components/spin-container/spin-container-code.md
@@ -14,14 +14,14 @@ tabs: Design('spin-container'), A11y('spin-container-a11y'), API('spin-container
 
 :::
 
-## Usage in dropdown lists
+## Usage in dropdowns
 
-This example demonstrates how to resize and display content within the SpinContainer.
+This example demonstrates how to resize and display content within the `SpinContainer`.
 
 ::: sandbox
 
 <script lang="tsx">
-  export Demo from './examples/usage_in_dropdown_lists.tsx';
+  export Demo from './examples/usage_in_dropdowns.tsx';
 </script>
 
 :::
diff --git a/website/docs/components/spin/examples/basic_example.tsx b/website/docs/components/spin/examples/basic_example.tsx
index ed9fe5197a..1a9a84da56 100644
--- a/website/docs/components/spin/examples/basic_example.tsx
+++ b/website/docs/components/spin/examples/basic_example.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
-import { Flex } from 'intergalactic/flex-box';
-import DataTable from 'intergalactic/data-table';
-import Spin from 'intergalactic/spin';
-import Button from 'intergalactic/button';
+import DataTable from '@semcore/data-table';
+import Spin from '@semcore/spin';
+import Button from '@semcore/button';
 
 const Demo = () => {
-  const [loading, setLoading] = React.useState(false);
+  const [loading, setLoading] = React.useState(true);
 
   const data = [
     {
@@ -20,10 +19,6 @@ const Demo = () => {
 
   return (
     <>
-      <Flex gap={2} mb={3}>
-        <Button onClick={() => setLoading(true)}>Load data</Button>
-        <Button onClick={() => setLoading(false)}>Stop loading</Button>
-      </Flex>
       <DataTable data={data} aria-label={'Table title'}>
         <DataTable.Head>
           <DataTable.Column name='fruit' children='Fruit' />
@@ -43,6 +38,9 @@ const Demo = () => {
           </DataTable.Cell>
         </DataTable.Body>
       </DataTable>
+      <Button onClick={() => setLoading(!loading)} mt={3}>
+        {loading ? 'Stop loading' : 'Start loading'}
+      </Button>
     </>
   );
 };
diff --git a/website/docs/table-group/data-table/data-table-code.md b/website/docs/table-group/data-table/data-table-code.md
index a03ec839e1..40fce71cdb 100644
--- a/website/docs/table-group/data-table/data-table-code.md
+++ b/website/docs/table-group/data-table/data-table-code.md
@@ -80,18 +80,6 @@ Scroll in the table header is useful for very long tables with fixed columns, al
 
 :::
 
-### Fixed header with loading state in table
-
-For correct components overlapping, use the `SpinContainer` component with `SpinContainer.Overlay` but without `SpinContainer.Content` .
-
-::: sandbox
-
-<script lang="tsx">
-  export Demo from 'stories/components/data-table/docs/examples/fixed-header-with-spin-overlay.tsx';
-</script>
-
-:::
-
 ### Header customization
 
 You can insert tooltips, selects, and other components into the table header using the `children` property.
@@ -346,16 +334,16 @@ Avoid placing [Pagination](/components/pagination/pagination) inside the table,
 
 :::
 
-## Table states
+## Loading states
 
-### Loading data
+### SpinContainer
 
 Replace the `tag` property with `<DataTable.Body/>` on the `SpinContainer` to cover the table with a [Spin](/components/spin/spin).
 
 ::: sandbox
 
 <script lang="tsx">
-  export Demo from 'stories/components/data-table/docs/examples/download-status.tsx';
+  export Demo from 'stories/components/data-table/docs/examples/spin-container-in-table.tsx';
 </script>
 
 :::

From 69244e5792ea77d34519e7519293a5ae47a8fd66 Mon Sep 17 00:00:00 2001
From: faisne <166654065+sheila-semrush@users.noreply.github.com>
Date: Thu, 9 Jan 2025 20:56:47 +0100
Subject: [PATCH 3/3] [chore] fix example name in tests

---
 semcore/data-table/__tests__/data-table.axe-test.tsx | 12 ++++++------
 semcore/data-table/__tests__/index.test.tsx          |  2 +-
 .../data-table/docs/DataTable.docs.stories.tsx       | 12 ++++++------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/semcore/data-table/__tests__/data-table.axe-test.tsx b/semcore/data-table/__tests__/data-table.axe-test.tsx
index c54a65bf65..b43999c3d2 100644
--- a/semcore/data-table/__tests__/data-table.axe-test.tsx
+++ b/semcore/data-table/__tests__/data-table.axe-test.tsx
@@ -110,12 +110,6 @@ test.describe('DataTable', () => {
 
     expect(violations).toEqual([]);
   });
-  test('download status', async ({ page }) => {
-    const standPath = 'stories/components/data-table/docs/examples/download-status.tsx';
-    const violations = await checkAxe(page, standPath);
-
-    expect(violations).toEqual([]);
-  });
   test('export in image', async ({ page }) => {
     const standPath = 'stories/components/data-table/docs/examples/export-in-image.tsx';
     const violations = await checkAxe(page, standPath);
@@ -177,6 +171,12 @@ test.describe('DataTable', () => {
 
     expect(violations).toEqual([]);
   });
+  test('spin container in table', async ({ page }) => {
+    const standPath = 'stories/components/data-table/docs/examples/spin-container-in-table.tsx';
+    const violations = await checkAxe(page, standPath);
+
+    expect(violations).toEqual([]);
+  });
   test('sorting changing size by columns', async ({ page }) => {
     const standPath =
       'stories/components/data-table/docs/examples/sorting-changing-size-by-columns.tsx';
diff --git a/semcore/data-table/__tests__/index.test.tsx b/semcore/data-table/__tests__/index.test.tsx
index ae6ca75de8..6b35190f20 100644
--- a/semcore/data-table/__tests__/index.test.tsx
+++ b/semcore/data-table/__tests__/index.test.tsx
@@ -641,7 +641,7 @@ describe('DataTable', () => {
     await expect(await snapshot(component)).toMatchImageSnapshot(task);
   });
 
-  test.concurrent('Download status', async ({ task }) => {
+  test.concurrent('SpinContainer in table', async ({ task }) => {
     const component = (
       <div style={{ width: 800 }}>
         <DataTable data={data} aria-label={'table label'}>
diff --git a/stories/components/data-table/docs/DataTable.docs.stories.tsx b/stories/components/data-table/docs/DataTable.docs.stories.tsx
index 4d09fc8b0d..73b2608425 100644
--- a/stories/components/data-table/docs/DataTable.docs.stories.tsx
+++ b/stories/components/data-table/docs/DataTable.docs.stories.tsx
@@ -17,7 +17,6 @@ import CompactExample from './examples/compact';
 import CustomRowsRenderingExample from './examples/custom-rows-rendering';
 import CustomViewForTableBodyExample from './examples/custom-view-for-table-body';
 import CustomizingHeaderExample from './examples/customizing-header';
-import DownloadStatusExample from './examples/download-status';
 import ExportInImageExample from './examples/export-in-image';
 import FixedColumnsExample from './examples/fixed-columns';
 import FixedHeaderExample from './examples/fixed-header';
@@ -28,6 +27,7 @@ import RowsMergingExample from './examples/rows-merging';
 import ScrollInTableExample from './examples/scroll-in-table';
 import SecondaryTableExample from './examples/secondary-table';
 import SkeletonInTableExample from './examples/skeleton-in-table';
+import SpinContainerInTableExample from './examples/spin-container-in-table';
 import SortingExample from './examples/sorting';
 import SortingChangingSizeExample from './examples/sorting-changing-size';
 import SortingChangingSizeByColumnsExample from './examples/sorting-changing-size-by-columns';
@@ -103,10 +103,6 @@ export const CustomizingHeader: Story = {
   render: CustomizingHeaderExample,
 };
 
-export const DownloadStatus: Story = {
-  render: DownloadStatusExample,
-};
-
 export const ExportInImage: Story = {
   render: ExportInImageExample,
 };
@@ -147,6 +143,10 @@ export const SkeletonInTable: Story = {
   render: SkeletonInTableExample,
 };
 
+export const SpinContainerInTable: Story = {
+  render: SpinContainerInTableExample,
+};
+
 export const Sorting: Story = {
   render: SortingExample,
 };
@@ -169,4 +169,4 @@ export const TableInTableWithFixedColumn: Story = {
 
 export const VirtualScrollInTable: Story = {
   render: VirtualScrollInTableExample,
-};
\ No newline at end of file
+};