From bfa54e79c92af629d364f8cebef2f8b332991592 Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Fri, 4 Apr 2025 20:09:01 +0530
Subject: [PATCH 1/5] chore(page): updated examples to provide a11y labels

---
 .../src/demos/examples/Page/PageContextSelector.tsx      | 4 ++--
 .../demos/examples/Page/PageStickySectionBreadcrumb.tsx  | 6 +++---
 .../src/demos/examples/Page/PageStickySectionGroup.tsx   | 6 +++---
 .../examples/Page/PageStickySectionGroupAlternate.tsx    | 6 +++---
 .../examples/PrimaryDetail/PrimaryDetailCardView.tsx     | 9 +++++----
 .../PrimaryDetail/PrimaryDetailContentPadding.tsx        | 6 +++---
 6 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx b/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx
index 287944bb03e..8d70cc7590d 100644
--- a/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx
@@ -325,13 +325,13 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
       mainContainerId={mainContainerId}
       isBreadcrumbWidthLimited
     >
-      <PageSection isWidthLimited>
+      <PageSection isWidthLimited aria-label="Main title">
         <Content>
           <Content component="h1">Main title</Content>
           <Content component="p">This is a full page demo.</Content>
         </Content>
       </PageSection>
-      <PageSection isWidthLimited>
+      <PageSection isWidthLimited aria-label="Card gallery">
         <Gallery hasGutter>
           {Array.from({ length: 50 }).map((_value, index) => (
             <GalleryItem key={index}>
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
index 8e47b5bcfab..9960c899738 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
@@ -282,13 +282,13 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
         }
       }}
     >
-      <PageSection isWidthLimited>
+      <PageSection isWidthLimited aria-labelledby="main-title">
         <Content>
-          <h1>Main title</h1>
+          <h1 id="main-title">Main title</h1>
           <p>This is a full page demo.</p>
         </Content>
       </PageSection>
-      <PageSection isWidthLimited>
+      <PageSection isWidthLimited aria-label="Card gallery">
         <Gallery hasGutter>
           {Array.from({ length: 50 }).map((_value, index) => (
             <GalleryItem key={index}>
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
index e48f5b63b7d..af59aec6768 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
@@ -278,9 +278,9 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
       isBreadcrumbWidthLimited
       isBreadcrumbGrouped
       additionalGroupedContent={
-        <PageSection isWidthLimited>
+        <PageSection isWidthLimited aria-labelledby="main-title">
           <Content>
-            <h1>Main title</h1>
+            <h1 id="main-title">Main title</h1>
             <p>This is a full page demo.</p>
           </Content>
         </PageSection>
@@ -289,7 +289,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
         stickyOnBreakpoint: { default: 'top' }
       }}
     >
-      <PageSection>
+      <PageSection aria-label="Card gallery">
         <Gallery hasGutter>
           {Array.from({ length: 50 }).map((_value, index) => (
             <GalleryItem key={index}>
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
index 0ee2e666e23..1c993fa4fd2 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
@@ -278,14 +278,14 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
             </BreadcrumbItem>
           </Breadcrumb>
         </PageBreadcrumb>
-        <PageSection isWidthLimited>
+        <PageSection isWidthLimited aria-labelledby="main-title">
           <Content>
-            <h1>Main title</h1>
+            <h1 id="main-title">Main title</h1>
             <p>This is a full page demo.</p>
           </Content>
         </PageSection>{' '}
       </PageGroup>
-      <PageSection>
+      <PageSection aria-label="Card gallery">
         <Gallery hasGutter>
           {Array.from({ length: 50 }).map((_value, index) => (
             <GalleryItem key={index}>
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx
index 33854cee367..1ea14f7db50 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx
@@ -612,19 +612,19 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper mainContainerId="main-content-card-view-default-nav" breadcrumb={null}>
-      <PageSection>
+      <PageSection aria-labelledby="projects-heading">
         <Content>
-          <h1>Projects</h1>
+          <h1 id="projects-heading">Projects</h1>
           <p>This is a demo that showcases Patternfly cards.</p>
         </Content>
       </PageSection>
-      <PageSection isFilled padding={{ default: 'noPadding' }}>
+      <PageSection isFilled padding={{ default: 'noPadding' }} aria-label="Card filtering toolbar">
         <Toolbar id="card-view-data-toolbar-group-types" clearAllFilters={onDelete}>
           <ToolbarContent>{toolbarItems}</ToolbarContent>
         </Toolbar>
         <Divider component="div" />
       </PageSection>
-      <PageSection isFilled padding={{ default: 'noPadding' }}>
+      <PageSection isFilled padding={{ default: 'noPadding' }} aria-label="Card content area">
         <Drawer isExpanded={isDrawerExpanded} className={'pf-m-inline-on-2xl'}>
           <DrawerContent panelContent={panelContent}>
             <DrawerContentBody hasPadding>{drawerContent}</DrawerContentBody>
@@ -636,6 +636,7 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {
         stickyOnBreakpoint={{ default: 'bottom' }}
         padding={{ default: 'noPadding' }}
         variant="light"
+        aria-label="Pagination controls"
       >
         <Pagination
           itemCount={filtered.length}
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx
index 116dc8a11c7..98c69eabcd8 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx
@@ -417,9 +417,9 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper>
-      <PageSection>
+      <PageSection aria-labelledby="main-title">
         <Content>
-          <h1>Main title</h1>
+          <h1 id="main-title">Main title</h1>
           <p>
             Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
             of it's relative line height of 1.5.
@@ -427,7 +427,7 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
         </Content>
       </PageSection>
       <Divider component="div" />
-      <PageSection padding={{ default: 'noPadding' }}>
+      <PageSection padding={{ default: 'noPadding' }} aria-label="Drawer content section">
         <Drawer isExpanded={isDrawerExpanded}>
           <DrawerContent panelContent={panelContent} colorVariant="no-background">
             <DrawerContentBody hasPadding>{drawerContent}</DrawerContentBody>

From e351dad2a6fc92fd012bb7281aed715d0bc95d73 Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Fri, 4 Apr 2025 23:52:16 +0530
Subject: [PATCH 2/5] added a11y labels to examples

---
 .../examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx  | 6 +++---
 .../demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx  | 6 +++---
 .../examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx  | 6 +++---
 .../PrimaryDetail/PrimaryDetailSimpleListInCard.tsx         | 6 +++---
 .../react-core/src/demos/examples/Skeleton/SkeletonCard.tsx | 4 ++--
 .../src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx  | 2 +-
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx
index 4421b582829..f578d16d15d 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx
@@ -181,9 +181,9 @@ export const PrimaryDetailDataListInCard: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper>
-      <PageSection>
+      <PageSection aria-labelledby="main-title">
         <Content>
-          <h1>Main title</h1>
+          <h1 id="main-title">Main title</h1>
           <p>
             Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
             of it’s relative line height of 1.5.
@@ -191,7 +191,7 @@ export const PrimaryDetailDataListInCard: React.FunctionComponent = () => {
         </Content>
       </PageSection>
       <Divider component="div" />
-      <PageSection>
+      <PageSection aria-label="Card with drawer content">
         <Card>
           <Drawer isStatic isExpanded={isExpanded}>
             <DrawerContent panelContent={panelContent}>
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx
index 57eed2f56e4..3990cac6806 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx
@@ -417,9 +417,9 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper mainContainerId="main-content-page-layout-default-nav">
-      <PageSection>
+      <PageSection aria-labelledby="main-title">
         <Content>
-          <h1>Main title</h1>
+          <h1 id="main-title">Main title</h1>
           <p>
             Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
             of it's relative line height of 1.5.
@@ -427,7 +427,7 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
         </Content>
       </PageSection>
       <Divider component="div" />
-      <PageSection padding={{ default: 'noPadding' }}>
+      <PageSection padding={{ default: 'noPadding' }} aria-label="Card with drawer content">
         <Drawer isExpanded={isDrawerExpanded}>
           <DrawerContent panelContent={panelContent}>
             <DrawerContentBody>{drawerContent}</DrawerContentBody>
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx
index 0bed1377fc2..037fa692f10 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx
@@ -417,9 +417,9 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper>
-      <PageSection>
+      <PageSection aria-labelledby="main-title">
         <Content>
-          <h1>Main title</h1>
+          <h1 id="main-title">Main title</h1>
           <p>
             Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
             of it's relative line height of 1.5.
@@ -427,7 +427,7 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
         </Content>
       </PageSection>
       <Divider component="div" />
-      <PageSection padding={{ default: 'noPadding' }}>
+      <PageSection padding={{ default: 'noPadding' }} aria-label="Card with drawer content">
         <Drawer isExpanded={isDrawerExpanded} isInline>
           <DrawerContent panelContent={panelContent}>
             <DrawerContentBody>{drawerContent}</DrawerContentBody>
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx
index 56d741b110e..941944d8372 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx
@@ -90,9 +90,9 @@ export const PrimaryDetailSimpleListInCard: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper>
-      <PageSection>
+      <PageSection aria-labelledby="main-title">
         <Content>
-          <h1>Main title</h1>
+          <h1 id="main-title">Main title</h1>
           <p>
             Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
             of it’s relative line height of 1.5.
@@ -100,7 +100,7 @@ export const PrimaryDetailSimpleListInCard: React.FunctionComponent = () => {
         </Content>
       </PageSection>
       <Divider component="div" />
-      <PageSection>
+      <PageSection aria-label="Card with drawer content">
         <Card>
           <Drawer isStatic isExpanded={isExpanded}>
             <DrawerContent panelContent={panelContent}>
diff --git a/packages/react-core/src/demos/examples/Skeleton/SkeletonCard.tsx b/packages/react-core/src/demos/examples/Skeleton/SkeletonCard.tsx
index da979911d12..52ff68d1643 100644
--- a/packages/react-core/src/demos/examples/Skeleton/SkeletonCard.tsx
+++ b/packages/react-core/src/demos/examples/Skeleton/SkeletonCard.tsx
@@ -27,11 +27,11 @@ export const SkeletonCard: React.FunctionComponent = () => {
   );
   return (
     <DashboardWrapper isBreadcrumbWidthLimited>
-      <PageSection isWidthLimited>
+      <PageSection isWidthLimited aria-label="Main title">
         <Content component="h1">Main title</Content>
         <Content component="p">This is a full page demo.</Content>
       </PageSection>
-      <PageSection>
+      <PageSection aria-label="Card gallery">
         <Gallery hasGutter>{Array.from({ length: 7 }).map((_value, index) => card(index))}</Gallery>
       </PageSection>
     </DashboardWrapper>
diff --git a/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx b/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx
index e384267cc76..2b273f40376 100644
--- a/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx
+++ b/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx
@@ -486,7 +486,7 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
 
   return (
     <DashboardWrapper sidebarNavOpen={!mobileView} onPageResize={onPageResize}>
-      <PageSection>
+      <PageSection aria-label="Log viewer controls">
         <Toolbar id="log-viewer-toolbar" inset={{ default: 'insetNone' }}>
           <ToolbarContent>{items}</ToolbarContent>
         </Toolbar>

From 03c1c52b90ddc9d17ede96a87aae04867fb818bd Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Sat, 5 Apr 2025 22:11:02 +0530
Subject: [PATCH 3/5] added a11y labels to examples

---
 .../NotificationDrawer/examples/NotificationDrawerBasic.tsx | 6 +++---
 .../examples/NotificationDrawerGrouped.tsx                  | 6 +++---
 .../react-core/src/demos/RTL/examples/PaginatedTable.jsx    | 4 ++--
 .../react-core/src/demos/RTL/examples/PaginatedTable.tsx    | 4 ++--
 packages/react-core/src/demos/examples/Wizard/InModal.tsx   | 2 +-
 packages/react-core/src/demos/examples/Wizard/InPage.tsx    | 2 +-
 .../src/demos/examples/Wizard/InPageWithDrawer.tsx          | 6 +++---
 .../examples/Wizard/InPageWithDrawerInformationalStep.tsx   | 6 +++---
 packages/react-table/src/demos/DashboardWrapper.tsx         | 4 ++--
 .../src/demos/examples/TableSortableResponsive.tsx          | 4 ++--
 10 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
index da7d3c1434d..63f4530b8b5 100644
--- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
+++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
@@ -535,16 +535,16 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
         breadcrumb={PageBreadcrumb}
         mainContainerId={pageId}
       >
-        <PageSection>
+        <PageSection aria-labelledby="main-title">
           <Content>
-            <h1>Main title</h1>
+            <h1 id="main-title">Main title</h1>
             <p>
               Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
               of its relative line height of 1.5.
             </p>
           </Content>
         </PageSection>
-        <PageSection>Panel section content</PageSection>
+        <PageSection aria-label="Panel section content">Panel section content</PageSection>
       </Page>
     </Fragment>
   );
diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
index 5015c1817ef..b7755b03156 100644
--- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
+++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
@@ -770,16 +770,16 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
         breadcrumb={PageBreadcrumb}
         mainContainerId={pageId}
       >
-        <PageSection>
+        <PageSection aria-labelledby="main-title">
           <Content>
-            <h1>Main title</h1>
+            <h1 id="main-title">Main title</h1>
             <p>
               Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
               of its relative line height of 1.5.
             </p>
           </Content>
         </PageSection>
-        <PageSection>Panel section content</PageSection>
+        <PageSection aria-label="Panel section content">Panel section content</PageSection>
       </Page>
     </Fragment>
   );
diff --git a/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx b/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx
index 338444a4d34..bbe8286d4b2 100644
--- a/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx
+++ b/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx
@@ -444,9 +444,9 @@ export const PaginatedTableAction = () => {
             ))}
           </Breadcrumb>
         </PageBreadcrumb>
-        <PageSection variant="light">
+        <PageSection variant="light" aria-labelledby='main-title' >
           <Content>
-            <h1>{translation.title}</h1>
+            <h1 id='main-title'>{translation.title}</h1>
             <p>{translation.body}</p>
           </Content>
         </PageSection>
diff --git a/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx b/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
index 77b658e0fb9..e3108a4e2cb 100644
--- a/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
+++ b/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
@@ -470,9 +470,9 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
             ))}
           </Breadcrumb>
         </PageBreadcrumb>
-        <PageSection variant="light">
+        <PageSection variant="light" aria-labelledby="main-title">
           <Content>
-            <h1>{translation.title}</h1>
+            <h1 id="main-title">{translation.title}</h1>
             <p>{translation.body}</p>
           </Content>
         </PageSection>
diff --git a/packages/react-core/src/demos/examples/Wizard/InModal.tsx b/packages/react-core/src/demos/examples/Wizard/InModal.tsx
index a5ebe5291e4..26eef732810 100644
--- a/packages/react-core/src/demos/examples/Wizard/InModal.tsx
+++ b/packages/react-core/src/demos/examples/Wizard/InModal.tsx
@@ -15,7 +15,7 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 export const WizardInModalDemo: React.FunctionComponent = () => (
   <>
     <DashboardWrapper hasPageTemplateTitle>
-      <PageSection isWidthLimited>
+      <PageSection isWidthLimited aria-label="Card gallery section">
         <Gallery hasGutter>
           {Array.from({ length: 10 }).map((_value, index) => (
             <GalleryItem key={index}>
diff --git a/packages/react-core/src/demos/examples/Wizard/InPage.tsx b/packages/react-core/src/demos/examples/Wizard/InPage.tsx
index 5c6c10a0d54..994a2c9c0ba 100644
--- a/packages/react-core/src/demos/examples/Wizard/InPage.tsx
+++ b/packages/react-core/src/demos/examples/Wizard/InPage.tsx
@@ -5,7 +5,7 @@ import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrap
 export const WizardFullPage: React.FunctionComponent = () => (
   <Fragment>
     <DashboardWrapper hasPageTemplateTitle>
-      <PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard}>
+      <PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard} aria-label="Wizard container">
         <Wizard>
           <WizardStep name="Information" id="wizard-step-1">
             <p>Step 1 content</p>
diff --git a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx
index 8426523dd9a..da730d29ae0 100644
--- a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx
+++ b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx
@@ -173,13 +173,13 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
         breadcrumb={PageBreadcrumb}
         mainContainerId={pageId}
       >
-        <PageSection>
+        <PageSection aria-labelledby="main-title">
           <Content>
-            <h1>Main title</h1>
+            <h1 id="main-title">Main title</h1>
             <p>A demo of a wizard in a page.</p>
           </Content>
         </PageSection>
-        <PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard}>
+        <PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard} aria-label="Wizard container">
           <Wizard>
             <WizardStep body={{ hasNoPadding: true }} name="Information" id="wizard-step-1">
               {createStepContentWithDrawer('Information step')}
diff --git a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx
index 226b6423a04..dc6cc8607fb 100644
--- a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx
+++ b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx
@@ -177,13 +177,13 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
         breadcrumb={PageBreadcrumb}
         mainContainerId={pageId}
       >
-        <PageSection>
+        <PageSection aria-labelledby="main-title">
           <Content>
-            <h1>Main title</h1>
+            <h1 id="main-title">Main title</h1>
             <p>A demo of a wizard in a page.</p>
           </Content>
         </PageSection>
-        <PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard} ß>
+        <PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard} ß aria-label="Wizard container">
           <Wizard>
             <WizardStep body={{ hasNoPadding: true }} name="Information" id="wizard-step-1">
               {createStepContentWithDrawer('Information step')}
diff --git a/packages/react-table/src/demos/DashboardWrapper.tsx b/packages/react-table/src/demos/DashboardWrapper.tsx
index b39388a99a7..42a1c2372bb 100644
--- a/packages/react-table/src/demos/DashboardWrapper.tsx
+++ b/packages/react-table/src/demos/DashboardWrapper.tsx
@@ -107,9 +107,9 @@ export const DashboardBreadcrumb = (
 );
 
 const PageTemplateTitle = (
-  <PageSection>
+  <PageSection aria-labelledby="main-title">
     <Content>
-      <h1>Main title</h1>
+      <h1 id="main-title">Main title</h1>
       <p>This is a full page demo.</p>
     </Content>
   </PageSection>
diff --git a/packages/react-table/src/demos/examples/TableSortableResponsive.tsx b/packages/react-table/src/demos/examples/TableSortableResponsive.tsx
index 90475c65c79..1b9c4a4f41d 100644
--- a/packages/react-table/src/demos/examples/TableSortableResponsive.tsx
+++ b/packages/react-table/src/demos/examples/TableSortableResponsive.tsx
@@ -229,9 +229,9 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
   return (
     <Fragment>
       <DashboardWrapper>
-        <PageSection isWidthLimited variant={PageSectionVariants.light}>
+        <PageSection isWidthLimited variant={PageSectionVariants.light} aria-labelledby="table-title">
           <Content>
-            <h1>Table demos</h1>
+            <h1 id="table-title">Table demos</h1>
             <p>
               Below is an example of a responsive sortable table. When the screen size shrinks the table into a compact
               form, the toolbar will display a dropdown menu containing sorting options.

From 8d8bc598803ad1d742fd5cd53081bfce1bf79e25 Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Tue, 8 Apr 2025 00:15:17 +0530
Subject: [PATCH 4/5] updated react-table demos

---
 packages/react-table/src/demos/examples/TableBulkSelect.tsx | 2 +-
 .../src/demos/examples/TableColumnManagement.tsx            | 2 +-
 .../demos/examples/TableColumnManagementWithDraggable.tsx   | 2 +-
 packages/react-table/src/demos/examples/TableCompact.tsx    | 2 +-
 .../src/demos/examples/TableCompoundExpansion.tsx           | 2 +-
 .../src/demos/examples/TableEmptyStateDefault.tsx           | 2 +-
 .../react-table/src/demos/examples/TableEmptyStateError.tsx | 2 +-
 .../src/demos/examples/TableEmptyStateLoading.tsx           | 2 +-
 .../src/demos/examples/TableExpandCollapseAll.tsx           | 1 +
 .../src/demos/examples/TableSortableResponsive.tsx          | 1 +
 .../src/demos/examples/TableStaticBottomPagination.tsx      | 2 +-
 .../src/demos/examples/TableStickyFirstColumn.tsx           | 6 +++++-
 .../react-table/src/demos/examples/TableStickyHeader.tsx    | 2 +-
 13 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/react-table/src/demos/examples/TableBulkSelect.tsx b/packages/react-table/src/demos/examples/TableBulkSelect.tsx
index ec142eb07de..01f842421b4 100644
--- 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
index 817b8e18058..f9b425bbf34 100644
--- 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
index 70f11aae8be..09c8c83147e 100644
--- 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
index 23452db0d12..6e7619aa3fa 100644
--- 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
index d831580cc7e..a36c13bda2d 100644
--- 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
index dd62de0d80c..967fd39a31d 100644
--- 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
index e3223eb3c2e..9caf9f1478c 100644
--- 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
index f0fd84d5f0e..5f62121f078 100644
--- 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
index ab0eb9e2123..f1dacfbfde6 100644
--- 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
index 1b9c4a4f41d..7ad123d250c 100644
--- 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
index 5462ff0a264..b67485b4e3a 100644
--- 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
index d78c8690b92..535316bf399 100644
--- 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
index 7408eea9823..3281b7bf492 100644
--- 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>

From 67fa302294183d28f2a174244304ba7f4f95d11f Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Tue, 22 Apr 2025 02:42:22 +0530
Subject: [PATCH 5/5] improved the usage of aria tags

---
 .../NotificationDrawer/examples/NotificationDrawerBasic.tsx | 2 +-
 .../examples/NotificationDrawerGrouped.tsx                  | 2 +-
 .../src/demos/examples/Page/PageContextSelector.tsx         | 6 ++++--
 .../demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx  | 4 ++--
 .../react-core/src/demos/examples/Skeleton/SkeletonCard.tsx | 6 ++++--
 packages/react-core/src/demos/examples/Wizard/InModal.tsx   | 2 +-
 6 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
index 63f4530b8b5..4de82c53b7b 100644
--- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
+++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
@@ -544,7 +544,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
             </p>
           </Content>
         </PageSection>
-        <PageSection aria-label="Panel section content">Panel section content</PageSection>
+        <PageSection aria-label="Panel section">Panel section content</PageSection>
       </Page>
     </Fragment>
   );
diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
index b7755b03156..fcbb21cfb1c 100644
--- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
+++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
@@ -779,7 +779,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
             </p>
           </Content>
         </PageSection>
-        <PageSection aria-label="Panel section content">Panel section content</PageSection>
+        <PageSection aria-label="Panel section">Panel section content</PageSection>
       </Page>
     </Fragment>
   );
diff --git a/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx b/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx
index 8d70cc7590d..5297092be3a 100644
--- a/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx
@@ -325,9 +325,11 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
       mainContainerId={mainContainerId}
       isBreadcrumbWidthLimited
     >
-      <PageSection isWidthLimited aria-label="Main title">
+      <PageSection isWidthLimited aria-labelledby="main-title">
         <Content>
-          <Content component="h1">Main title</Content>
+          <Content component="h1" id="main-title">
+            Main title
+          </Content>
           <Content component="p">This is a full page demo.</Content>
         </Content>
       </PageSection>
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx
index 1ea14f7db50..9d950c162fd 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx
@@ -612,9 +612,9 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper mainContainerId="main-content-card-view-default-nav" breadcrumb={null}>
-      <PageSection aria-labelledby="projects-heading">
+      <PageSection aria-labelledby="projects">
         <Content>
-          <h1 id="projects-heading">Projects</h1>
+          <h1 id="projects">Projects</h1>
           <p>This is a demo that showcases Patternfly cards.</p>
         </Content>
       </PageSection>
diff --git a/packages/react-core/src/demos/examples/Skeleton/SkeletonCard.tsx b/packages/react-core/src/demos/examples/Skeleton/SkeletonCard.tsx
index 52ff68d1643..56f54254feb 100644
--- a/packages/react-core/src/demos/examples/Skeleton/SkeletonCard.tsx
+++ b/packages/react-core/src/demos/examples/Skeleton/SkeletonCard.tsx
@@ -27,8 +27,10 @@ export const SkeletonCard: React.FunctionComponent = () => {
   );
   return (
     <DashboardWrapper isBreadcrumbWidthLimited>
-      <PageSection isWidthLimited aria-label="Main title">
-        <Content component="h1">Main title</Content>
+      <PageSection isWidthLimited aria-label="main-title">
+        <Content component="h1" id="main-title">
+          Main title
+        </Content>
         <Content component="p">This is a full page demo.</Content>
       </PageSection>
       <PageSection aria-label="Card gallery">
diff --git a/packages/react-core/src/demos/examples/Wizard/InModal.tsx b/packages/react-core/src/demos/examples/Wizard/InModal.tsx
index 26eef732810..386ddcd1da5 100644
--- a/packages/react-core/src/demos/examples/Wizard/InModal.tsx
+++ b/packages/react-core/src/demos/examples/Wizard/InModal.tsx
@@ -15,7 +15,7 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 export const WizardInModalDemo: React.FunctionComponent = () => (
   <>
     <DashboardWrapper hasPageTemplateTitle>
-      <PageSection isWidthLimited aria-label="Card gallery section">
+      <PageSection isWidthLimited aria-label="Card gallery">
         <Gallery hasGutter>
           {Array.from({ length: 10 }).map((_value, index) => (
             <GalleryItem key={index}>