updated react-table demos

Mash707 · Mash707 · commit 8d8bc598803a · 2025-04-22T00:24:17.000+05:30
diff --git a/packages/react-table/src/demos/examples/TableBulkSelect.tsx b/packages/react-table/src/demos/examples/TableBulkSelect.tsx
@@ -146,7 +146,7 @@ export const TableBulkSelect: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper hasPageTemplateTitle>
-      <PageSection isWidthLimited>
+      <PageSection isWidthLimited aria-label="Bulk select table data">
         {toolbar}
         <Table aria-label="Selectable table">
           <Thead>
diff --git a/packages/react-table/src/demos/examples/TableColumnManagement.tsx b/packages/react-table/src/demos/examples/TableColumnManagement.tsx
@@ -437,7 +437,7 @@ export const TableColumnManagement: React.FunctionComponent = () => {
   return (
     <Fragment>
       <DashboardWrapper hasPageTemplateTitle>
-        <PageSection isFilled>
+        <PageSection isFilled aria-label="Column management table data">
           {toolbarItems}
           <Table variant="compact" aria-label="Column Management Table">
             <Thead>
diff --git a/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx b/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx
@@ -336,7 +336,7 @@ export const TableColumnManagement: React.FunctionComponent = () => {
   return (
     <Fragment>
       <DashboardWrapper hasPageTemplateTitle>
-        <PageSection isFilled>
+        <PageSection isFilled aria-label="Draggable Column Management table data">
           {toolbarItems}
           <Table variant="compact" aria-label="Column Management Table">
             <Thead>
diff --git a/packages/react-table/src/demos/examples/TableCompact.tsx b/packages/react-table/src/demos/examples/TableCompact.tsx
@@ -129,7 +129,7 @@ export const TableCompact: React.FunctionComponent = () => {
   return (
     <Fragment>
       <DashboardWrapper hasPageTemplateTitle>
-        <PageSection isFilled>
+        <PageSection isFilled aria-label="Compact table data">
           <Card>
             {tableToolbar}
             <Table variant="compact" aria-label="Compact Table">
diff --git a/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx b/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx
@@ -199,7 +199,7 @@ export const TableCompoundExpansion: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper hasPageTemplateTitle>
-      <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
+      <PageSection padding={{ default: 'noPadding', xl: 'padding' }} aria-label="Compound expandable table data ">
         <Card>
           {tableToolbar}
           <Table aria-label="Compound expandable table">
diff --git a/packages/react-table/src/demos/examples/TableEmptyStateDefault.tsx b/packages/react-table/src/demos/examples/TableEmptyStateDefault.tsx
@@ -15,7 +15,7 @@ import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/Dashboa
 
 export const TableEmptyStateDefault: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>
-    <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
+    <PageSection padding={{ default: 'noPadding', xl: 'padding' }} aria-label="Empty state table data">
       <Card component="div">
         <Table aria-label="Empty state table">
           <Thead>
diff --git a/packages/react-table/src/demos/examples/TableEmptyStateError.tsx b/packages/react-table/src/demos/examples/TableEmptyStateError.tsx
@@ -5,7 +5,7 @@ import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/Dashboa
 
 export const TableEmptyStateError: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>
-    <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
+    <PageSection padding={{ default: 'noPadding', xl: 'padding' }} aria-label="Empty state table with error">
       <Card component="div">
         <Table aria-label="Loading table demo">
           <Thead>
diff --git a/packages/react-table/src/demos/examples/TableEmptyStateLoading.tsx b/packages/react-table/src/demos/examples/TableEmptyStateLoading.tsx
@@ -4,7 +4,7 @@ import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/Dashboa
 
 export const TableEmptyStateLoading: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>
-    <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
+    <PageSection padding={{ default: 'noPadding', xl: 'padding' }} aria-label="Empty state table loading">
       <Card component="div">
         <Table aria-label="Loading table demo">
           <Thead>
diff --git a/packages/react-table/src/demos/examples/TableExpandCollapseAll.tsx b/packages/react-table/src/demos/examples/TableExpandCollapseAll.tsx
@@ -153,6 +153,7 @@ export const TableExpandCollapseAll: React.FunctionComponent = () => {
             default: 'noPadding',
             xl: 'padding'
           }}
+          aria-label="Collapsible table data"
         >
           <Card component="div">
             <Table aria-label="Collapsible table">
diff --git a/packages/react-table/src/demos/examples/TableSortableResponsive.tsx b/packages/react-table/src/demos/examples/TableSortableResponsive.tsx
@@ -243,6 +243,7 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
             default: 'noPadding',
             xl: 'padding'
           }}
+          aria-label="Sortable table data"
         >
           <Card component="div">
             {tableToolbar}
diff --git a/packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx b/packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx
@@ -142,7 +142,7 @@ export const TableStaticBottomPagination: React.FunctionComponent = () => {
   return (
     <Fragment>
       <DashboardWrapper hasPageTemplateTitle>
-        <PageSection isFilled>
+        <PageSection isFilled aria-label="Paginated table data">
           <Card>
             {tableToolbar}
             <Table variant="compact" aria-label="Paginated Table">
diff --git a/packages/react-table/src/demos/examples/TableStickyFirstColumn.tsx b/packages/react-table/src/demos/examples/TableStickyFirstColumn.tsx
@@ -135,7 +135,11 @@ export const TableStickyFirstColumn = () => {
   });
   return (
     <DashboardWrapper hasPageTemplateTitle>
-      <PageSection isWidthLimited padding={{ default: 'noPadding', xl: 'padding' }}>
+      <PageSection
+        isWidthLimited
+        padding={{ default: 'noPadding', xl: 'padding' }}
+        aria-label="Sticky column table data"
+      >
         <Card component="div">
           <InnerScrollContainer>
             <Table aria-label="Sticky column table" gridBreakPoint="">
diff --git a/packages/react-table/src/demos/examples/TableStickyHeader.tsx b/packages/react-table/src/demos/examples/TableStickyHeader.tsx
@@ -19,7 +19,7 @@ export const TableStickyHeader: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper hasPageTemplateTitle>
-      <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
+      <PageSection padding={{ default: 'noPadding', xl: 'padding' }} aria-label="Sticky header table data">
         <Card component="div">
           <Table aria-label="Sticky Header Table Demo" isStickyHeader>
             <Thead>

Original file line number	Diff line number	Diff line change
`@@ -153,6 +153,7 @@ export const TableExpandCollapseAll: React.FunctionComponent = () => {`
`153`	`153`	`default: 'noPadding',`
`154`	`154`	`xl: 'padding'`
`155`	`155`	`}}`
	`156`	`+ aria-label="Collapsible table data"`
`156`	`157`	`>`
`157`	`158`	`<Card component="div">`
`158`	`159`	`<Table aria-label="Collapsible table">`
Original file line number	Diff line number	Diff line change
`@@ -243,6 +243,7 @@ export const TableSortableResponsive: React.FunctionComponent = () => {`
`243`	`243`	`default: 'noPadding',`
`244`	`244`	`xl: 'padding'`
`245`	`245`	`}}`
	`246`	`+ aria-label="Sortable table data"`
`246`	`247`	`>`
`247`	`248`	`<Card component="div">`
`248`	`249`	`{tableToolbar}`