From c2eefb8bbfba3cc5563563708cd11a20e535bf67 Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Thu, 3 Apr 2025 19:47:13 +0530
Subject: [PATCH 1/8] chore(page): updated examples to provide a11y labels

---
 .../Page/examples/PageCenteredSection.tsx          |  2 +-
 .../components/Page/examples/PageGroupSection.tsx  |  6 +++---
 .../components/Page/examples/PageHorizontalNav.tsx |  8 +++++---
 .../Page/examples/PageMainSectionPadding.tsx       | 14 ++++++++++----
 .../Page/examples/PageMainSectionVariations.tsx    | 12 ++++++------
 .../Page/examples/PageMultipleSidebarBody.tsx      |  6 +++---
 .../Page/examples/PageUncontrolledNav.tsx          |  6 +++---
 .../components/Page/examples/PageVerticalNav.tsx   |  8 +++++---
 .../Page/examples/PageWithOrWithoutFill.tsx        |  6 +++---
 9 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx b/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx
index b475f1da08d..113ac60fff2 100644
--- a/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx
+++ b/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx
@@ -68,7 +68,7 @@ export const PageCenteredSection: React.FunctionComponent = () => {
 
   return (
     <Page masthead={masthead} sidebar={sidebar}>
-      <PageSection isWidthLimited isCenterAligned>
+      <PageSection isWidthLimited isCenterAligned aria-label="width limited page section">
         <Card>
           <CardBody>
             When a width limited page section is wider than the value of
diff --git a/packages/react-core/src/components/Page/examples/PageGroupSection.tsx b/packages/react-core/src/components/Page/examples/PageGroupSection.tsx
index 4c113527085..11f4fe0e11f 100644
--- a/packages/react-core/src/components/Page/examples/PageGroupSection.tsx
+++ b/packages/react-core/src/components/Page/examples/PageGroupSection.tsx
@@ -101,10 +101,10 @@ export const PageGroupSection: React.FunctionComponent = () => {
             </BreadcrumbItem>
           </Breadcrumb>
         </PageBreadcrumb>
-        <PageSection>Grouped section</PageSection>
+        <PageSection aria-label="Grouped Section">Grouped section</PageSection>
       </PageGroup>
-      <PageSection>Section 1</PageSection>
-      <PageSection>Section 2</PageSection>
+      <PageSection aria-label="Section 1">Section 1</PageSection>
+      <PageSection aria-label="Section 2">Section 2</PageSection>
     </Page>
   );
 };
diff --git a/packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx b/packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx
index bb3b4b44d42..eb31781a76a 100644
--- a/packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx
+++ b/packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx
@@ -36,9 +36,11 @@ export const PageHorizontalNav: React.FunctionComponent = () => {
 
   return (
     <Page masthead={masthead}>
-      <PageSection>Section 1</PageSection>
-      <PageSection variant="secondary">Section 2 with secondary variant styling</PageSection>
-      <PageSection>Section 3</PageSection>
+      <PageSection aria-label="Section 1">Section 1</PageSection>
+      <PageSection variant="secondary" aria-label="Section 2 with secondary variant styling">
+        Section 2 with secondary variant styling
+      </PageSection>
+      <PageSection aria-label="Section 3">Section 3</PageSection>
     </Page>
   );
 };
diff --git a/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx b/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx
index 96eabf69958..b91a1daa9f3 100644
--- a/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx
+++ b/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx
@@ -64,10 +64,16 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
 
   return (
     <Page masthead={masthead} sidebar={sidebar}>
-      <PageSection>Section with default padding</PageSection>
-      <PageSection padding={{ default: 'noPadding' }}>Section with no padding</PageSection>
-      <PageSection padding={{ default: 'noPadding', md: 'padding' }}>Section with padding on medium</PageSection>
-      <PageSection padding={{ md: 'noPadding' }}>Section with no padding on medium</PageSection>
+      <PageSection aria-label="Section with default padding">Section with default padding</PageSection>
+      <PageSection padding={{ default: 'noPadding' }} aria-label="Section with no padding">
+        Section with no padding
+      </PageSection>
+      <PageSection padding={{ default: 'noPadding', md: 'padding' }} aria-label="Section with padding on medium">
+        Section with padding on medium
+      </PageSection>
+      <PageSection padding={{ md: 'noPadding' }} aria-label="Section with no padding on medium">
+        Section with no padding on medium
+      </PageSection>
     </Page>
   );
 };
diff --git a/packages/react-core/src/components/Page/examples/PageMainSectionVariations.tsx b/packages/react-core/src/components/Page/examples/PageMainSectionVariations.tsx
index a510177e9d3..f3829fb2e57 100644
--- a/packages/react-core/src/components/Page/examples/PageMainSectionVariations.tsx
+++ b/packages/react-core/src/components/Page/examples/PageMainSectionVariations.tsx
@@ -64,22 +64,22 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
 
   return (
     <Page header={header} sidebar={sidebar}>
-      <PageSection type="subnav">
+      <PageSection type="subnav" aria-label="Horizontal subnavigation">
         Section with <code>type="subnav"</code> for horizontal subnav navigation
       </PageSection>
-      <PageSection type="nav">
+      <PageSection type="nav" aria-label="Tertiary navigation">
         Section with <code>type="nav"</code> for tertiary navigation
       </PageSection>
-      <PageSection type="tabs">
+      <PageSection type="tabs" aria-label="Tab navigation">
         Section with <code>type="tabs"</code> for tabs
       </PageSection>
-      <PageSection type="breadcrumb">
+      <PageSection type="breadcrumb" aria-label="Breadcrumb navigation">
         Section with <code>type="breadcrumb"</code> for breadcrumbs
       </PageSection>
-      <PageSection>
+      <PageSection aria-label="Default navigation">
         Section without <code>type</code> prop or <code>type="default"</code> for main sections
       </PageSection>
-      <PageSection type="wizard">
+      <PageSection type="wizard" aria-label="Wizard navigation">
         Section with <code>type="wizard"</code> for wizards
       </PageSection>
     </Page>
diff --git a/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx b/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx
index 9b4943792bb..df750e53384 100644
--- a/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx
+++ b/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx
@@ -71,9 +71,9 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
 
   return (
     <Page masthead={masthead} sidebar={sidebar}>
-      <PageSection>Section 1</PageSection>
-      <PageSection>Section 2</PageSection>
-      <PageSection>Section 3</PageSection>
+      <PageSection aria-label="Section 1">Section 1</PageSection>
+      <PageSection aria-label="Section 2">Section 2</PageSection>
+      <PageSection aria-label="Section 3">Section 3</PageSection>
     </Page>
   );
 };
diff --git a/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx b/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx
index 716246d5302..438dbc530a3 100644
--- a/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx
+++ b/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx
@@ -51,9 +51,9 @@ export const PageUncontrolledNav: React.FunctionComponent = () => {
 
   return (
     <Page isManagedSidebar masthead={masthead} sidebar={sidebar}>
-      <PageSection>Section 1</PageSection>
-      <PageSection>Section 2</PageSection>
-      <PageSection>Section 3</PageSection>
+      <PageSection aria-label="Section 1">Section 1</PageSection>
+      <PageSection aria-label="Section 2">Section 2</PageSection>
+      <PageSection aria-label="Section 3">Section 3</PageSection>
     </Page>
   );
 };
diff --git a/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx b/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx
index f14baa5cc15..93484377423 100644
--- a/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx
+++ b/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx
@@ -64,9 +64,11 @@ export const PageVerticalNav: React.FunctionComponent = () => {
 
   return (
     <Page masthead={masthead} sidebar={sidebar}>
-      <PageSection>Section 1</PageSection>
-      <PageSection variant="secondary">Section 2 with secondary variant styling</PageSection>
-      <PageSection>Section 3</PageSection>
+      <PageSection aria-label="Section 1">Section 1</PageSection>
+      <PageSection variant="secondary" aria-label="Section 2 with secondary variant styling">
+        Section 2 with secondary variant styling
+      </PageSection>
+      <PageSection aria-label="Section 3">Section 3</PageSection>
     </Page>
   );
 };
diff --git a/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx b/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx
index 10286dc1fc5..2c0c9bb23a5 100644
--- a/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx
+++ b/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx
@@ -64,11 +64,11 @@ export const PageWithOrWithoutFill: React.FunctionComponent = () => {
 
   return (
     <Page isContentFilled masthead={masthead} sidebar={sidebar}>
-      <PageSection>A default page section</PageSection>
-      <PageSection isFilled={true} variant="secondary">
+      <PageSection aria-label="Default page section">A default page section</PageSection>
+      <PageSection isFilled={true} variant="secondary" aria-label="Section fills the available space">
         This section fills the available space.
       </PageSection>
-      <PageSection>A default page section</PageSection>
+      <PageSection aria-label="Default page section">A default page section</PageSection>
     </Page>
   );
 };

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

---
 packages/react-core/src/demos/Banner.md             | 12 ++++++------
 .../src/demos/CardView/examples/CardView.tsx        | 13 +++++++++----
 .../demos/DataList/examples/DataListActionable.tsx  |  4 ++--
 .../src/demos/DataList/examples/DataListBasic.tsx   |  4 ++--
 .../examples/DataListExpandableControlInToolbar.tsx |  4 ++--
 .../examples/DataListStaticBottomPagination.tsx     |  2 +-
 .../examples/DescriptionListBasic.tsx               |  4 ++--
 .../examples/DescriptionListInDrawer.tsx            |  4 ++--
 packages/react-core/src/demos/JumpLinks.md          |  8 ++++----
 packages/react-core/src/demos/Tabs.md               | 12 ++++++------
 .../src/demos/examples/Tabs/ModalTabs.tsx           |  6 +++---
 .../src/demos/examples/Tabs/NestedTabs.tsx          |  4 ++--
 .../demos/examples/Tabs/NestedUnindentedTabs.tsx    |  4 ++--
 .../src/demos/examples/Tabs/TabsAndTable.tsx        |  4 ++--
 14 files changed, 45 insertions(+), 40 deletions(-)

diff --git a/packages/react-core/src/demos/Banner.md b/packages/react-core/src/demos/Banner.md
index 7bf37f2dbef..7f716f08e44 100644
--- a/packages/react-core/src/demos/Banner.md
+++ b/packages/react-core/src/demos/Banner.md
@@ -39,16 +39,16 @@ class BannerDemo extends React.Component {
     return (
       <Fragment>
         <DashboardWrapper banner={banner} breadcrumb={null}>
-          <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.
               </p>
             </Content>
           </PageSection>
-          <PageSection>
+          <PageSection aria-label = 'Cards section'>
             <Gallery hasGutter>
               {Array.from({ length: 30 }).map((_value, index) => (
                 <GalleryItem key={index}>
@@ -112,9 +112,9 @@ class BannerDemo extends React.Component {
           </FlexItem>
           <FlexItem grow={{ default: 'grow' }} style={{ minHeight: 0 }}>
             <DashboardWrapper breadcrumb={null}>
-              <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 />
@@ -122,7 +122,7 @@ class BannerDemo extends React.Component {
                   </p>
                 </Content>
               </PageSection>
-              <PageSection>
+              <PageSection aria-label = 'Cards section'>
                 <Gallery hasGutter>
                   {Array.from({ length: 30 }).map((_value, index) => (
                     <GalleryItem key={index}>
diff --git a/packages/react-core/src/demos/CardView/examples/CardView.tsx b/packages/react-core/src/demos/CardView/examples/CardView.tsx
index d28cf150a52..f2843ab059d 100644
--- a/packages/react-core/src/demos/CardView/examples/CardView.tsx
+++ b/packages/react-core/src/demos/CardView/examples/CardView.tsx
@@ -465,16 +465,16 @@ export const CardViewBasic: React.FunctionComponent = () => {
   return (
     <Fragment>
       <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>
           <Toolbar id="toolbar-group-types" clearAllFilters={onDelete}>
             <ToolbarContent>{toolbarItems}</ToolbarContent>
           </Toolbar>
         </PageSection>
-        <PageSection isFilled>
+        <PageSection isFilled aria-label="Selectable card container">
           <Gallery hasGutter aria-label="Selectable card container">
             <Card isCompact>
               <Bullseye>
@@ -546,7 +546,12 @@ export const CardViewBasic: React.FunctionComponent = () => {
             ))}
           </Gallery>
         </PageSection>
-        <PageSection isFilled={false} stickyOnBreakpoint={{ default: 'bottom' }} padding={{ default: 'noPadding' }}>
+        <PageSection
+          isFilled={false}
+          stickyOnBreakpoint={{ default: 'bottom' }}
+          padding={{ default: 'noPadding' }}
+          aria-label="Pagination controls"
+        >
           <Pagination
             itemCount={totalItemCount}
             page={page}
diff --git a/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx b/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx
index 23793746390..10845514f06 100644
--- a/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx
+++ b/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx
@@ -33,13 +33,13 @@ export const DataListActionable: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper mainContainerId="main-content-datalist-view-actions" breadcrumb={null}>
-      <PageSection>
+      <PageSection aria-label="Projects">
         <Content>
           <Title headingLevel="h1">Projects</Title>
           <Content component="p">This is a demo that showcases PatternFly Data List</Content>
         </Content>
       </PageSection>
-      <PageSection>
+      <PageSection aria-label="Data list of projects">
         <DataList aria-label="single action data list example ">
           {!isDeleted && (
             <DataListItem aria-labelledby="single-action-item1">
diff --git a/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx b/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx
index cd9cf0594e8..c1029caa57f 100644
--- a/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx
+++ b/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx
@@ -69,9 +69,9 @@ export const DataListBasic: React.FunctionComponent = () => {
   return (
     <Fragment>
       <DashboardWrapper mainContainerId="main-content-datalist-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 data list</p>
           </Content>
         </PageSection>
diff --git a/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx b/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx
index 503d731bdd1..7f41c17781b 100644
--- a/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx
+++ b/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx
@@ -133,9 +133,9 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
   return (
     <Fragment>
       <DashboardWrapper mainContainerId="main-content-datalist-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 data list</p>
           </Content>
         </PageSection>
diff --git a/packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx b/packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx
index df6916d24c6..bf187b61acc 100644
--- a/packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx
+++ b/packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx
@@ -113,7 +113,7 @@ export const DataListStaticBottomPagination: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper mainContainerId="main-content-datalist-view-pagination" breadcrumb={null}>
-      <PageSection>
+      <PageSection aria-label="Projects">
         <Content>
           <Content component="h1">Projects</Content>
           <Content component="p">This is a demo that showcases PatternFly Data List</Content>
diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx
index eb8b8e29bd8..d7ded15e739 100644
--- a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx
+++ b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx
@@ -18,13 +18,13 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 export const DescriptionListBasic: React.FunctionComponent = () => (
   <DashboardWrapper>
-    <PageSection>
+    <PageSection aria-label="Projects">
       <Content>
         <Content component="h1">Projects</Content>
         <Content component="p">This is a full page demo</Content>
       </Content>
     </PageSection>
-    <PageSection>
+    <PageSection aria-label="Details">
       <Card>
         <CardHeader>
           <Title headingLevel="h2" size="lg">
diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx
index 11986bea3e2..d54bd5e1024 100644
--- a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx
+++ b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx
@@ -150,13 +150,13 @@ export const DescriptionListInDrawer: React.FunctionComponent = () => {
       isNotificationDrawerExpanded={isExpanded}
       onNotificationDrawerExpand={onExpand}
     >
-      <PageSection>
+      <PageSection aria-label="Main Title">
         <Content>
           <Content component="h1">Main title</Content>
           <Content component="p">This is a full page demo.</Content>
         </Content>
       </PageSection>
-      <PageSection>{drawerContent}</PageSection>
+      <PageSection aria-label="Drawer Content">{drawerContent}</PageSection>
     </DashboardWrapper>
   );
 };
diff --git a/packages/react-core/src/demos/JumpLinks.md b/packages/react-core/src/demos/JumpLinks.md
index 5213798b16e..dde057252d2 100644
--- a/packages/react-core/src/demos/JumpLinks.md
+++ b/packages/react-core/src/demos/JumpLinks.md
@@ -79,7 +79,7 @@ ScrollspyH2 = () => {
 
   return (
     <DashboardWrapper breadcrumb={null} mainContainerId="scrollable-element">
-      <PageSection>
+      <PageSection aria-label = 'Main title'>
         <Title headingLevel="h1" size="2xl">
           Main title
         </Title>
@@ -90,10 +90,10 @@ ScrollspyH2 = () => {
           onChange={(_event, check) => setIsVertical(check)}
         />
       </PageSection>
-      <PageSection padding={{ default: 'noPadding' }}>
+      <PageSection padding={{ default: 'noPadding' }} >
         <Sidebar hasGutter orientation={!isVertical && 'stack'}>
           <SidebarPanel variant="sticky">
-            <PageSection>
+            <PageSection aria-label = 'Jump links navigation'>
               <JumpLinks
                 isVertical={isVertical}
                 isCentered={!isVertical}
@@ -113,7 +113,7 @@ ScrollspyH2 = () => {
             </PageSection>
           </SidebarPanel>
           <SidebarContent hasNoBackground>
-            <PageSection>
+            <PageSection aria-label = 'Main content'>
               <Content>
                 {headings.map(i => (
                   <div key={i} style={{ maxWidth: '800px', marginBottom: '32px' }}>
diff --git a/packages/react-core/src/demos/Tabs.md b/packages/react-core/src/demos/Tabs.md
index 846321906e0..2948a848b37 100644
--- a/packages/react-core/src/demos/Tabs.md
+++ b/packages/react-core/src/demos/Tabs.md
@@ -159,7 +159,7 @@ TabsOpenDemo = () => {
   return (
     <DashboardWrapper hasNoBreadcrumb>
       {tabsBreadcrumb}
-      <PageSection isWidthLimited>
+      <PageSection isWidthLimited aria-label='Pod header'>
         <Flex
           spaceItems={{ default: 'spaceItemsMd' }}
           alignItems={{ default: 'alignItemsFlexStart' }}
@@ -178,7 +178,7 @@ TabsOpenDemo = () => {
           </FlexItem>
         </Flex>
       </PageSection>
-      <PageSection type="tabs" isWidthLimited>
+      <PageSection type="tabs" isWidthLimited aria-label='Pod navigation tabs'>
         <Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="open-tabs-example-tabs-list">
           <Tab eventKey={0} title={<TabTitleText>Details</TabTitleText>} tabContentId={`tabContent${0}`} />
           <Tab eventKey={1} title={<TabTitleText>YAML</TabTitleText>} tabContentId={`tabContent${1}`} />
@@ -187,7 +187,7 @@ TabsOpenDemo = () => {
           <Tab eventKey={4} title={<TabTitleText>Terminal</TabTitleText>} tabContentId={`tabContent${4}`} />
         </Tabs>
       </PageSection>
-      <PageSection isWidthLimited>
+      <PageSection isWidthLimited aria-label='Pod content'>
         <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
           <TabContentBody>{tabContent}</TabContentBody>
         </TabContent>
@@ -355,7 +355,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
   return (
     <DashboardWrapper hasNoBreadcrumb>
       {tabsBreadcrumb}
-      <PageSection isWidthLimited>
+      <PageSection isWidthLimited aria-label = 'Pod header'>
         <Flex
           spaceItems={{ default: 'spaceItemsMd' }}
           alignItems={{ default: 'alignItemsFlexStart' }}
@@ -374,7 +374,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
           </FlexItem>
         </Flex>
       </PageSection>
-      <PageSection type="tabs" isWidthLimited>
+      <PageSection type="tabs" isWidthLimited aria-label='Pod navigation tabs'>
         <Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="open-tabs-example-tabs-list">
           <Tab eventKey={0} title={<TabTitleText>Details</TabTitleText>} tabContentId={`tabContent${0}`} />
           <Tab eventKey={1} title={<TabTitleText>YAML</TabTitleText>} tabContentId={`tabContent${1}`} />
@@ -383,7 +383,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
           <Tab eventKey={4} title={<TabTitleText>Terminal</TabTitleText>} tabContentId={`tabContent${4}`} />
         </Tabs>
       </PageSection>
-      <PageSection isWidthLimited padding={{ default: 'noPadding' }}>
+      <PageSection isWidthLimited padding={{ default: 'noPadding' }} aria-label='Pod content'>
         <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
           <TabContentBody>
             <Tabs
diff --git a/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx b/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx
index e6060a85566..f99fb5a7389 100644
--- a/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx
+++ b/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx
@@ -73,13 +73,13 @@ export const ModalTabs: React.FunctionComponent = () => {
   return (
     <Fragment>
       <DashboardWrapper mainContainerId="main-content-card-view-default-nav">
-        <PageSection>
+        <PageSection aria-labelledby="projects-heading">
           <Content>
-            <h1>Projects</h1>
+            <h1 id="projects-heading">Projects</h1>
             <p>Click any project card to view tabs within modals.</p>
           </Content>
         </PageSection>
-        <PageSection isFilled>
+        <PageSection isFilled aria-label="Selectable card container">
           <Gallery hasGutter aria-label="Selectable card container">
             {products.map((product) => (
               <Card
diff --git a/packages/react-core/src/demos/examples/Tabs/NestedTabs.tsx b/packages/react-core/src/demos/examples/Tabs/NestedTabs.tsx
index 52247356beb..b48c541a853 100644
--- a/packages/react-core/src/demos/examples/Tabs/NestedTabs.tsx
+++ b/packages/react-core/src/demos/examples/Tabs/NestedTabs.tsx
@@ -133,7 +133,7 @@ export const NestedTabs: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper hasPageTemplateTitle>
-      <PageSection type="tabs" isWidthLimited>
+      <PageSection type="tabs" isWidthLimited aria-label="Cluster navigation tabs">
         <Tabs
           activeKey={activeTabKey}
           onSelect={(_event, tabIndex) => handleTabClick(Number(tabIndex))}
@@ -144,7 +144,7 @@ export const NestedTabs: React.FunctionComponent = () => {
           <Tab eventKey={1} title={<TabTitleText>Cluster 2</TabTitleText>} tabContentId={`tabContent${1}`} />
         </Tabs>
       </PageSection>
-      <PageSection isWidthLimited>
+      <PageSection isWidthLimited aria-label="Cluster tab panel content">
         <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
           <TabContentBody>{tabContent}</TabContentBody>
         </TabContent>
diff --git a/packages/react-core/src/demos/examples/Tabs/NestedUnindentedTabs.tsx b/packages/react-core/src/demos/examples/Tabs/NestedUnindentedTabs.tsx
index c38caab0cd7..45d7d6121bd 100644
--- a/packages/react-core/src/demos/examples/Tabs/NestedUnindentedTabs.tsx
+++ b/packages/react-core/src/demos/examples/Tabs/NestedUnindentedTabs.tsx
@@ -124,7 +124,7 @@ export const NestedUnindentedTabs: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper hasPageTemplateTitle>
-      <PageSection type="tabs" isWidthLimited>
+      <PageSection type="tabs" isWidthLimited aria-label="Primary navigation tabs">
         <Tabs
           activeKey={activeTabKey}
           onSelect={(_event, tabIndex) => handleTabClick(Number(tabIndex))}
@@ -137,7 +137,7 @@ export const NestedUnindentedTabs: React.FunctionComponent = () => {
           <Tab eventKey={3} title={<TabTitleText>Support</TabTitleText>} tabContentId={`tabContent${3}`} />
         </Tabs>
       </PageSection>
-      <PageSection isWidthLimited>
+      <PageSection isWidthLimited aria-label="Primary tab content">
         <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
           <TabContentBody>What's new panel</TabContentBody>
         </TabContent>
diff --git a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
index 36edd58e7ff..4d527a230bf 100644
--- a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
+++ b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
@@ -385,12 +385,12 @@ export const TablesAndTabs = () => {
   return (
     <DashboardWrapper>
       <Fragment>
-        <PageSection>
+        <PageSection aria-label="Nodes">
           <Title headingLevel="h1" size="2xl">
             Nodes
           </Title>
         </PageSection>
-        <PageSection padding={{ default: 'noPadding' }}>
+        <PageSection padding={{ default: 'noPadding' }} aria-label="Nodes toolbar and content">
           {toolbar}
           <Divider />
           {tabContent}

From 53066724bec779b3ed8df6309417961dd11ca9d2 Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Fri, 4 Apr 2025 16:45:34 +0530
Subject: [PATCH 3/8] added a11y labels to examples

---
 .../AlertGroupToastWithNotificationDrawer.tsx        | 12 ++++++------
 .../demos/examples/BackToTop/BackToTopNameDemo.tsx   |  4 ++--
 .../examples/Masthead/MastheadWithHorizontalNav.tsx  |  4 ++--
 .../MastheadWithUtilitiesAndUserDropdownMenu.tsx     |  6 +++---
 .../react-core/src/demos/examples/Nav/NavDefault.tsx |  6 +++---
 .../src/demos/examples/Nav/NavDrilldown.tsx          |  2 +-
 .../src/demos/examples/Nav/NavExpandable.tsx         |  6 +++---
 .../react-core/src/demos/examples/Nav/NavFlyout.tsx  |  6 +++---
 .../react-core/src/demos/examples/Nav/NavGrouped.tsx | 12 ++++++------
 .../src/demos/examples/Nav/NavHorizontal.tsx         |  6 +++---
 .../demos/examples/Nav/NavHorizontalWithSubnav.tsx   | 10 +++++-----
 .../react-core/src/demos/examples/Nav/NavManual.tsx  |  6 +++---
 .../src/demos/examples/Nav/NavWithSubnav.tsx         | 10 +++++-----
 13 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
index 43538c2449d..cc12d8266f8 100644
--- a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
+++ b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
@@ -312,9 +312,9 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
       notificationDrawer={notificationDrawer}
       isNotificationDrawerExpanded={isDrawerExpanded}
     >
-      <PageSection>
+      <PageSection aria-labelledby="alert-group-title">
         <Content>
-          <h1>Alert group with notification drawer demo</h1>
+          <h1 id="alert-group-title">Alert group with notification drawer demo</h1>
           <p>
             New alerts can be added with the following buttons. Each alert has a timeout of 7 seconds, however, even
             after the timeout expires, all alerts are still visible in the notification drawer. By default, only 3
@@ -324,7 +324,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
         </Content>
       </PageSection>
 
-      <PageSection>
+      <PageSection aria-label="Alert Buttons">
         <Button variant="secondary" onClick={() => addNewNotification('success')} style={alertButtonStyle}>
           Add toast success alert
         </Button>
@@ -344,10 +344,10 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
         </Button>
       </PageSection>
 
-      <PageSection>
+      <PageSection aria-labelledby="max-displayed-alerts-title">
         <Content>
           <br />
-          <h2>Max displayed alerts</h2>
+          <h2 id="max-displayed-alerts-title">Max displayed alerts</h2>
           <p>Adjust the maximum number of displayed alerts.</p>
         </Content>
         <NumberInput
@@ -364,7 +364,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
           style={{ margin: '12px 0' }}
         />
       </PageSection>
-      <PageSection>
+      <PageSection aria-label="Alert Group">
         <AlertGroup
           hasAnimations
           isToast
diff --git a/packages/react-core/src/demos/examples/BackToTop/BackToTopNameDemo.tsx b/packages/react-core/src/demos/examples/BackToTop/BackToTopNameDemo.tsx
index 3f79e35f544..f8467925d03 100644
--- a/packages/react-core/src/demos/examples/BackToTop/BackToTopNameDemo.tsx
+++ b/packages/react-core/src/demos/examples/BackToTop/BackToTopNameDemo.tsx
@@ -11,9 +11,9 @@ export const Name = () => {
 
   return (
     <DashboardWrapper breadcrumb={null}>
-      <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.
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
index 17e783f7ed5..f926ed541de 100644
--- a/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
+++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
@@ -308,7 +308,7 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
       isBreadcrumbWidthLimited
       isBreadcrumbGrouped
       additionalGroupedContent={
-        <PageSection>
+        <PageSection aria-label="Main Title">
           <Content>
             <Content component="h1">Main title</Content>
             <Content component="p">This is a full page demo.</Content>
@@ -316,7 +316,7 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
         </PageSection>
       }
     >
-      <PageSection>
+      <PageSection aria-label="Card gallery">
         <Gallery hasGutter>
           {Array.from({ length: 10 }).map((_value, index) => (
             <GalleryItem key={index}>
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
index b1a705abf0a..48bb3b42bab 100644
--- a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
+++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
@@ -544,15 +544,15 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
       isBreadcrumbWidthLimited
       isBreadcrumbGrouped
       additionalGroupedContent={
-        <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>
       }
     >
-      <PageSection>
+      <PageSection aria-label="Card gallery">
         <Gallery hasGutter>
           {Array.from({ length: 10 }).map((_value, index) => (
             <GalleryItem key={index}>
diff --git a/packages/react-core/src/demos/examples/Nav/NavDefault.tsx b/packages/react-core/src/demos/examples/Nav/NavDefault.tsx
index 5817f9e1bff..3b33823db4c 100644
--- a/packages/react-core/src/demos/examples/Nav/NavDefault.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavDefault.tsx
@@ -84,16 +84,16 @@ export const NavDefault: React.FunctionComponent = () => {
         breadcrumb={DashboardBreadcrumb}
         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>
+        <PageSection aria-label="Card gallery">
           <Gallery hasGutter>
             {Array.from({ length: 10 }).map((_value, index) => (
               <GalleryItem key={index}>
diff --git a/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx b/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx
index e9000dfc679..af1f2c5a4b1 100644
--- a/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx
@@ -129,7 +129,7 @@ export const NavDrilldown: React.FunctionComponent = () => {
 
   return (
     <Page masthead={<DashboardHeader />} sidebar={sidebar}>
-      <PageSection>
+      <PageSection aria-label="Navigation layer">
         <strong>Nav Layer: </strong>
         {navLayer}
       </PageSection>
diff --git a/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx b/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx
index 6bad93ef126..9f4ebfb8702 100644
--- a/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx
@@ -110,16 +110,16 @@ export const NavExpandableDemo: React.FunctionComponent = () => {
         breadcrumb={DashboardBreadcrumb}
         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>
+        <PageSection aria-label="Card gallery">
           <Gallery hasGutter>
             {Array.from({ length: 10 }).map((_value, index) => (
               <GalleryItem key={index}>
diff --git a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
index d15b479163d..3c976f76912 100644
--- a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
@@ -284,9 +284,9 @@ export const NavFlyout: React.FunctionComponent = () => {
       skipToContent={PageSkipToContent}
       mainContainerId={pageId}
     >
-      <PageSection>Section 1</PageSection>
-      <PageSection>Section 2</PageSection>
-      <PageSection>Section 3</PageSection>
+      <PageSection aria-label="Section 1">Section 1</PageSection>
+      <PageSection aria-label="Section 2">Section 2</PageSection>
+      <PageSection aria-label="Section 3">Section 3</PageSection>
     </Page>
   );
 };
diff --git a/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx b/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx
index c2e23680e18..b94dd1ba374 100644
--- a/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx
@@ -92,19 +92,19 @@ export const NavGrouped: React.FunctionComponent = () => {
         skipToContent={PageSkipToContent}
         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>Section 1</PageSection>
-        <PageSection>Section 2</PageSection>
-        <PageSection>Section 3</PageSection>
-        <PageSection>Content</PageSection>
+        <PageSection aria-label="Section 1">Section 1</PageSection>
+        <PageSection aria-label="Section 2">Section 2</PageSection>
+        <PageSection aria-label="Section 3">Section 3</PageSection>
+        <PageSection aria-label="Content">Content</PageSection>
       </Page>
     </>
   );
diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
index ff4e71e9714..7240dca718b 100644
--- a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
@@ -229,16 +229,16 @@ export const NavHorizontal: React.FunctionComponent = () => {
         breadcrumb={DashboardBreadcrumb}
         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>
+        <PageSection aria-label="Card gallery">
           <Gallery hasGutter>
             {Array.from({ length: 10 }).map((_value, index) => (
               <GalleryItem key={index}>
diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
index 5cdfab5b77a..2f967182330 100644
--- a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
@@ -278,22 +278,22 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
   return (
     <Fragment>
       <Page masthead={masthead} skipToContent={PageSkipToContent} mainContainerId={pageId}>
-        <PageSection type={PageSectionTypes.subNav} isWidthLimited>
+        <PageSection type={PageSectionTypes.subNav} isWidthLimited aria-label="Subnav">
           {SubNav}
         </PageSection>
-        <PageSection type={PageSectionTypes.breadcrumb} isWidthLimited>
+        <PageSection type={PageSectionTypes.breadcrumb} isWidthLimited aria-label="Breadcrumb">
           {DashboardBreadcrumb}
         </PageSection>
-        <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.
             </p>
           </Content>
         </PageSection>
-        <PageSection>
+        <PageSection aria-label="Card gallery">
           <Gallery hasGutter>
             {Array.from({ length: 10 }).map((_value, index) => (
               <GalleryItem key={index}>
diff --git a/packages/react-core/src/demos/examples/Nav/NavManual.tsx b/packages/react-core/src/demos/examples/Nav/NavManual.tsx
index f6b5aba16d4..1a8297823fe 100644
--- a/packages/react-core/src/demos/examples/Nav/NavManual.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavManual.tsx
@@ -260,16 +260,16 @@ export const NavManual: React.FunctionComponent = () => {
         skipToContent={PageSkipToContent}
         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>
+        <PageSection aria-label="Card gallery">
           <Gallery hasGutter>
             {Array.from({ length: 10 }).map((_value, index) => (
               <GalleryItem key={index}>
diff --git a/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx b/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx
index c4ec34cdf8e..aaad6d9388d 100644
--- a/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx
@@ -122,22 +122,22 @@ export const NavWithSubnav: React.FunctionComponent = () => {
         skipToContent={PageSkipToContent}
         mainContainerId={pageId}
       >
-        <PageSection type={PageSectionTypes.subNav} isWidthLimited>
+        <PageSection type={PageSectionTypes.subNav} isWidthLimited aria-label="Subnav">
           {SubNav}
         </PageSection>
-        <PageSection type={PageSectionTypes.breadcrumb} isWidthLimited>
+        <PageSection type={PageSectionTypes.breadcrumb} isWidthLimited aria-label="Breadcrumb">
           {DashboardBreadcrumb}
         </PageSection>
-        <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.
             </p>
           </Content>
         </PageSection>
-        <PageSection>
+        <PageSection aria-label="Card gallery">
           <Gallery hasGutter>
             {Array.from({ length: 10 }).map((_value, index) => (
               <GalleryItem key={index}>

From 1bdfff24f0a95efeeb950342e68c836eb49b1326 Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Tue, 22 Apr 2025 02:05:20 +0530
Subject: [PATCH 4/8] improved the usage of aria tags

---
 .../Page/examples/PageGroupSection.tsx           | 12 +++++++++---
 .../Page/examples/PageHorizontalNav.tsx          | 12 ++++++++----
 .../Page/examples/PageMainSectionPadding.tsx     | 16 +++++++++-------
 .../Page/examples/PageMainSectionVariations.tsx  | 12 ++++++------
 .../Page/examples/PageMultipleSidebarBody.tsx    | 12 +++++++++---
 .../Page/examples/PageUncontrolledNav.tsx        | 12 +++++++++---
 .../components/Page/examples/PageVerticalNav.tsx | 13 +++++++++----
 .../Page/examples/PageWithOrWithoutFill.tsx      | 12 ++++++++----
 .../DataList/examples/DataListActionable.tsx     |  6 ++++--
 .../examples/DataListStaticBottomPagination.tsx  |  6 ++++--
 .../examples/DescriptionListBasic.tsx            |  8 ++++----
 .../examples/DescriptionListInDrawer.tsx         |  6 ++++--
 packages/react-core/src/demos/JumpLinks.md       |  4 ++--
 .../Masthead/MastheadWithHorizontalNav.tsx       |  6 ++++--
 .../src/demos/examples/Nav/NavFlyout.tsx         | 12 +++++++++---
 .../src/demos/examples/Nav/NavGrouped.tsx        | 16 ++++++++++++----
 .../src/demos/examples/Tabs/ModalTabs.tsx        |  2 +-
 .../src/demos/examples/Tabs/TabsAndTable.tsx     |  4 ++--
 18 files changed, 113 insertions(+), 58 deletions(-)

diff --git a/packages/react-core/src/components/Page/examples/PageGroupSection.tsx b/packages/react-core/src/components/Page/examples/PageGroupSection.tsx
index 11f4fe0e11f..2afbef70a96 100644
--- a/packages/react-core/src/components/Page/examples/PageGroupSection.tsx
+++ b/packages/react-core/src/components/Page/examples/PageGroupSection.tsx
@@ -101,10 +101,16 @@ export const PageGroupSection: React.FunctionComponent = () => {
             </BreadcrumbItem>
           </Breadcrumb>
         </PageBreadcrumb>
-        <PageSection aria-label="Grouped Section">Grouped section</PageSection>
+        <PageSection aria-labelledby="grouped-section">
+          <h2 id="grouped-section">Grouped section</h2>
+        </PageSection>
       </PageGroup>
-      <PageSection aria-label="Section 1">Section 1</PageSection>
-      <PageSection aria-label="Section 2">Section 2</PageSection>
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Grouped example section 1</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-2">
+        <h2 id="section-2">Grouped example section 2</h2>
+      </PageSection>
     </Page>
   );
 };
diff --git a/packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx b/packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx
index eb31781a76a..d711dcc6797 100644
--- a/packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx
+++ b/packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx
@@ -36,11 +36,15 @@ export const PageHorizontalNav: React.FunctionComponent = () => {
 
   return (
     <Page masthead={masthead}>
-      <PageSection aria-label="Section 1">Section 1</PageSection>
-      <PageSection variant="secondary" aria-label="Section 2 with secondary variant styling">
-        Section 2 with secondary variant styling
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Horizontal nav example section 1</h2>
+      </PageSection>
+      <PageSection variant="secondary" aria-labelledby="section-2">
+        <h2 id="section-2">Horizontal nav example section 2 with secondary variant styling</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-3">
+        <h2 id="section-3">Horizontal nav example section 3</h2>
       </PageSection>
-      <PageSection aria-label="Section 3">Section 3</PageSection>
     </Page>
   );
 };
diff --git a/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx b/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx
index b91a1daa9f3..d3b8459bafb 100644
--- a/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx
+++ b/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx
@@ -64,15 +64,17 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
 
   return (
     <Page masthead={masthead} sidebar={sidebar}>
-      <PageSection aria-label="Section with default padding">Section with default padding</PageSection>
-      <PageSection padding={{ default: 'noPadding' }} aria-label="Section with no padding">
-        Section with no padding
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Section with default padding</h2>
       </PageSection>
-      <PageSection padding={{ default: 'noPadding', md: 'padding' }} aria-label="Section with padding on medium">
-        Section with padding on medium
+      <PageSection padding={{ default: 'noPadding' }} aria-labelledby="section-2">
+        <h2 id="section-2">Section with no padding</h2>
       </PageSection>
-      <PageSection padding={{ md: 'noPadding' }} aria-label="Section with no padding on medium">
-        Section with no padding on medium
+      <PageSection padding={{ default: 'noPadding', md: 'padding' }} aria-labelledby="section-3">
+        <h2 id="section-3">Section with padding on medium</h2>
+      </PageSection>
+      <PageSection padding={{ md: 'noPadding' }} aria-labelledby="section-4">
+        <h2 id="section-4">Section with no padding on medium</h2>
       </PageSection>
     </Page>
   );
diff --git a/packages/react-core/src/components/Page/examples/PageMainSectionVariations.tsx b/packages/react-core/src/components/Page/examples/PageMainSectionVariations.tsx
index f3829fb2e57..24e90688458 100644
--- a/packages/react-core/src/components/Page/examples/PageMainSectionVariations.tsx
+++ b/packages/react-core/src/components/Page/examples/PageMainSectionVariations.tsx
@@ -64,22 +64,22 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
 
   return (
     <Page header={header} sidebar={sidebar}>
-      <PageSection type="subnav" aria-label="Horizontal subnavigation">
+      <PageSection type="subnav" aria-label="With subnav type">
         Section with <code>type="subnav"</code> for horizontal subnav navigation
       </PageSection>
-      <PageSection type="nav" aria-label="Tertiary navigation">
+      <PageSection type="nav" aria-label="With nav type">
         Section with <code>type="nav"</code> for tertiary navigation
       </PageSection>
-      <PageSection type="tabs" aria-label="Tab navigation">
+      <PageSection type="tabs" aria-label="With tabs type">
         Section with <code>type="tabs"</code> for tabs
       </PageSection>
-      <PageSection type="breadcrumb" aria-label="Breadcrumb navigation">
+      <PageSection type="breadcrumb" aria-label="With breadcrumb type">
         Section with <code>type="breadcrumb"</code> for breadcrumbs
       </PageSection>
-      <PageSection aria-label="Default navigation">
+      <PageSection aria-label="With default type">
         Section without <code>type</code> prop or <code>type="default"</code> for main sections
       </PageSection>
-      <PageSection type="wizard" aria-label="Wizard navigation">
+      <PageSection type="wizard" aria-label="With wizard type">
         Section with <code>type="wizard"</code> for wizards
       </PageSection>
     </Page>
diff --git a/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx b/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx
index df750e53384..8d9ef03a760 100644
--- a/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx
+++ b/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx
@@ -71,9 +71,15 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
 
   return (
     <Page masthead={masthead} sidebar={sidebar}>
-      <PageSection aria-label="Section 1">Section 1</PageSection>
-      <PageSection aria-label="Section 2">Section 2</PageSection>
-      <PageSection aria-label="Section 3">Section 3</PageSection>
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Multiple sidebar body example section 1</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-2">
+        <h2 id="section-2">Multiple sidebar body example section 2</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-3">
+        <h2 id="section-3">Multiple sidebar body example section 3</h2>
+      </PageSection>
     </Page>
   );
 };
diff --git a/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx b/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx
index 438dbc530a3..229d3282ed3 100644
--- a/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx
+++ b/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx
@@ -51,9 +51,15 @@ export const PageUncontrolledNav: React.FunctionComponent = () => {
 
   return (
     <Page isManagedSidebar masthead={masthead} sidebar={sidebar}>
-      <PageSection aria-label="Section 1">Section 1</PageSection>
-      <PageSection aria-label="Section 2">Section 2</PageSection>
-      <PageSection aria-label="Section 3">Section 3</PageSection>
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Uncontrolled nav example section 1</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-2">
+        <h2 id="section-2">Uncontrolled nav example section 2</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-3">
+        <h2 id="section-3">Uncontrolled nav example section 3</h2>
+      </PageSection>
     </Page>
   );
 };
diff --git a/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx b/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx
index 93484377423..52bc20bb18a 100644
--- a/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx
+++ b/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx
@@ -64,11 +64,16 @@ export const PageVerticalNav: React.FunctionComponent = () => {
 
   return (
     <Page masthead={masthead} sidebar={sidebar}>
-      <PageSection aria-label="Section 1">Section 1</PageSection>
-      <PageSection variant="secondary" aria-label="Section 2 with secondary variant styling">
-        Section 2 with secondary variant styling
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1"></h2>Vertical nav example section 1
+      </PageSection>
+      <PageSection variant="secondary" aria-labelledby="section-2">
+        <h2 id="section-2"></h2>
+        Vertical nav example section 2 with secondary variant styling
+      </PageSection>
+      <PageSection aria-labelledby="section-3">
+        <h2 id="section-3"></h2>Vertical nav example section 3
       </PageSection>
-      <PageSection aria-label="Section 3">Section 3</PageSection>
     </Page>
   );
 };
diff --git a/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx b/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx
index 2c0c9bb23a5..e1ed070a173 100644
--- a/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx
+++ b/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx
@@ -64,11 +64,15 @@ export const PageWithOrWithoutFill: React.FunctionComponent = () => {
 
   return (
     <Page isContentFilled masthead={masthead} sidebar={sidebar}>
-      <PageSection aria-label="Default page section">A default page section</PageSection>
-      <PageSection isFilled={true} variant="secondary" aria-label="Section fills the available space">
-        This section fills the available space.
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Section without fill</h2>
+      </PageSection>
+      <PageSection isFilled={true} variant="secondary" aria-labelledby="section-2">
+        <h2 id="section-2">Section with fill</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-3">
+        <h2 id="section-3">Another section without fill</h2>
       </PageSection>
-      <PageSection aria-label="Default page section">A default page section</PageSection>
     </Page>
   );
 };
diff --git a/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx b/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx
index 10845514f06..3e08e1656fe 100644
--- a/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx
+++ b/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx
@@ -33,9 +33,11 @@ export const DataListActionable: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper mainContainerId="main-content-datalist-view-actions" breadcrumb={null}>
-      <PageSection aria-label="Projects">
+      <PageSection aria-labelledby="projects">
         <Content>
-          <Title headingLevel="h1">Projects</Title>
+          <Title headingLevel="h1" id="projects">
+            Projects
+          </Title>
           <Content component="p">This is a demo that showcases PatternFly Data List</Content>
         </Content>
       </PageSection>
diff --git a/packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx b/packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx
index bf187b61acc..229aa2e6b8c 100644
--- a/packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx
+++ b/packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx
@@ -113,9 +113,11 @@ export const DataListStaticBottomPagination: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper mainContainerId="main-content-datalist-view-pagination" breadcrumb={null}>
-      <PageSection aria-label="Projects">
+      <PageSection aria-labelledby="projects">
         <Content>
-          <Content component="h1">Projects</Content>
+          <Content component="h1" id="projects">
+            Projects
+          </Content>
           <Content component="p">This is a demo that showcases PatternFly Data List</Content>
         </Content>
       </PageSection>
diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx
index d7ded15e739..6e5c7d8d246 100644
--- a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx
+++ b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsx
@@ -18,16 +18,16 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 export const DescriptionListBasic: React.FunctionComponent = () => (
   <DashboardWrapper>
-    <PageSection aria-label="Projects">
+    <PageSection aria-labelledby="projects">
       <Content>
-        <Content component="h1">Projects</Content>
+        <h1 id="projects">Projects</h1>
         <Content component="p">This is a full page demo</Content>
       </Content>
     </PageSection>
-    <PageSection aria-label="Details">
+    <PageSection aria-labelledby="details">
       <Card>
         <CardHeader>
-          <Title headingLevel="h2" size="lg">
+          <Title headingLevel="h2" size="lg" id="details">
             Details
           </Title>
         </CardHeader>
diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx
index d54bd5e1024..186468edcd2 100644
--- a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx
+++ b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx
@@ -150,9 +150,11 @@ export const DescriptionListInDrawer: React.FunctionComponent = () => {
       isNotificationDrawerExpanded={isExpanded}
       onNotificationDrawerExpand={onExpand}
     >
-      <PageSection aria-label="Main Title">
+      <PageSection 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/JumpLinks.md b/packages/react-core/src/demos/JumpLinks.md
index dde057252d2..b04ef4d0d0f 100644
--- a/packages/react-core/src/demos/JumpLinks.md
+++ b/packages/react-core/src/demos/JumpLinks.md
@@ -79,8 +79,8 @@ ScrollspyH2 = () => {
 
   return (
     <DashboardWrapper breadcrumb={null} mainContainerId="scrollable-element">
-      <PageSection aria-label = 'Main title'>
-        <Title headingLevel="h1" size="2xl">
+      <PageSection aria-labelledby = 'main-title'>
+        <Title headingLevel="h1" size="2xl" id='main-title'>
           Main title
         </Title>
         <Switch
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
index f926ed541de..a12e4d27ffd 100644
--- a/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
+++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
@@ -308,9 +308,11 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
       isBreadcrumbWidthLimited
       isBreadcrumbGrouped
       additionalGroupedContent={
-        <PageSection aria-label="Main Title">
+        <PageSection 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/Nav/NavFlyout.tsx b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
index 3c976f76912..2c10bf99193 100644
--- a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
@@ -284,9 +284,15 @@ export const NavFlyout: React.FunctionComponent = () => {
       skipToContent={PageSkipToContent}
       mainContainerId={pageId}
     >
-      <PageSection aria-label="Section 1">Section 1</PageSection>
-      <PageSection aria-label="Section 2">Section 2</PageSection>
-      <PageSection aria-label="Section 3">Section 3</PageSection>
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Section 1</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-2">
+        <h2 id="section-2">Section 2</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-3">
+        <h2 id="section-3">Section 3</h2>
+      </PageSection>
     </Page>
   );
 };
diff --git a/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx b/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx
index b94dd1ba374..186f81e5bde 100644
--- a/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx
@@ -101,10 +101,18 @@ export const NavGrouped: React.FunctionComponent = () => {
             </p>
           </Content>
         </PageSection>
-        <PageSection aria-label="Section 1">Section 1</PageSection>
-        <PageSection aria-label="Section 2">Section 2</PageSection>
-        <PageSection aria-label="Section 3">Section 3</PageSection>
-        <PageSection aria-label="Content">Content</PageSection>
+        <PageSection aria-labelledby="section-1">
+          <h2 id="section-1">Section 1</h2>
+        </PageSection>
+        <PageSection aria-labelledby="section-2">
+          <h2 id="section-2">Section 2</h2>
+        </PageSection>
+        <PageSection aria-labelledby="section-3">
+          <h2 id="section-3">Section 3</h2>
+        </PageSection>
+        <PageSection aria-labelledby="content">
+          <h2 id="content">Content</h2>
+        </PageSection>
       </Page>
     </>
   );
diff --git a/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx b/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx
index f99fb5a7389..7295fca94b8 100644
--- a/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx
+++ b/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx
@@ -79,7 +79,7 @@ export const ModalTabs: React.FunctionComponent = () => {
             <p>Click any project card to view tabs within modals.</p>
           </Content>
         </PageSection>
-        <PageSection isFilled aria-label="Selectable card container">
+        <PageSection isFilled aria-label="Selectable card gallery">
           <Gallery hasGutter aria-label="Selectable card container">
             {products.map((product) => (
               <Card
diff --git a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
index 4d527a230bf..ff61ad82ead 100644
--- a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
+++ b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
@@ -385,8 +385,8 @@ export const TablesAndTabs = () => {
   return (
     <DashboardWrapper>
       <Fragment>
-        <PageSection aria-label="Nodes">
-          <Title headingLevel="h1" size="2xl">
+        <PageSection aria-labelledby="nodes">
+          <Title headingLevel="h1" size="2xl" id="nodes">
             Nodes
           </Title>
         </PageSection>

From 24e068a2770ddb3b80dfc98c2aa8f106f8636b44 Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Tue, 22 Apr 2025 02:15:29 +0530
Subject: [PATCH 5/8] minor changes to maintain consistency across examples

---
 packages/react-core/src/demos/Banner.md                     | 4 ++--
 .../react-core/src/demos/CardView/examples/CardView.tsx     | 6 +++---
 .../src/demos/DataList/examples/DataListBasic.tsx           | 4 ++--
 .../examples/DataListExpandableControlInToolbar.tsx         | 4 ++--
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/react-core/src/demos/Banner.md b/packages/react-core/src/demos/Banner.md
index 7f716f08e44..50193831605 100644
--- a/packages/react-core/src/demos/Banner.md
+++ b/packages/react-core/src/demos/Banner.md
@@ -48,7 +48,7 @@ class BannerDemo extends React.Component {
               </p>
             </Content>
           </PageSection>
-          <PageSection aria-label = 'Cards section'>
+          <PageSection aria-label = 'Cards gallery'>
             <Gallery hasGutter>
               {Array.from({ length: 30 }).map((_value, index) => (
                 <GalleryItem key={index}>
@@ -122,7 +122,7 @@ class BannerDemo extends React.Component {
                   </p>
                 </Content>
               </PageSection>
-              <PageSection aria-label = 'Cards section'>
+              <PageSection aria-label = 'Cards gallery'>
                 <Gallery hasGutter>
                   {Array.from({ length: 30 }).map((_value, index) => (
                     <GalleryItem key={index}>
diff --git a/packages/react-core/src/demos/CardView/examples/CardView.tsx b/packages/react-core/src/demos/CardView/examples/CardView.tsx
index f2843ab059d..2ebb1370775 100644
--- a/packages/react-core/src/demos/CardView/examples/CardView.tsx
+++ b/packages/react-core/src/demos/CardView/examples/CardView.tsx
@@ -465,16 +465,16 @@ export const CardViewBasic: React.FunctionComponent = () => {
   return (
     <Fragment>
       <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>
           <Toolbar id="toolbar-group-types" clearAllFilters={onDelete}>
             <ToolbarContent>{toolbarItems}</ToolbarContent>
           </Toolbar>
         </PageSection>
-        <PageSection isFilled aria-label="Selectable card container">
+        <PageSection isFilled aria-label="Selectable card gallery">
           <Gallery hasGutter aria-label="Selectable card container">
             <Card isCompact>
               <Bullseye>
diff --git a/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx b/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx
index c1029caa57f..1452fa1837c 100644
--- a/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx
+++ b/packages/react-core/src/demos/DataList/examples/DataListBasic.tsx
@@ -69,9 +69,9 @@ export const DataListBasic: React.FunctionComponent = () => {
   return (
     <Fragment>
       <DashboardWrapper mainContainerId="main-content-datalist-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 data list</p>
           </Content>
         </PageSection>
diff --git a/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx b/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx
index 7f41c17781b..371720dfbce 100644
--- a/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx
+++ b/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx
@@ -133,9 +133,9 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
   return (
     <Fragment>
       <DashboardWrapper mainContainerId="main-content-datalist-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 data list</p>
           </Content>
         </PageSection>

From 41da6ff15fa835d6c8f89bc0d38948e315e1213c Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Tue, 29 Apr 2025 00:36:06 +0530
Subject: [PATCH 6/8] minor changes

---
 .../src/components/Page/examples/PageVerticalNav.tsx       | 7 +++----
 packages/react-core/src/demos/Banner.md                    | 2 +-
 .../AlertGroup/AlertGroupToastWithNotificationDrawer.tsx   | 2 +-
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx b/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx
index 52bc20bb18a..40a8bec260a 100644
--- a/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx
+++ b/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx
@@ -65,14 +65,13 @@ export const PageVerticalNav: React.FunctionComponent = () => {
   return (
     <Page masthead={masthead} sidebar={sidebar}>
       <PageSection aria-labelledby="section-1">
-        <h2 id="section-1"></h2>Vertical nav example section 1
+        <h2 id="section-1">Vertical nav example section 1</h2>
       </PageSection>
       <PageSection variant="secondary" aria-labelledby="section-2">
-        <h2 id="section-2"></h2>
-        Vertical nav example section 2 with secondary variant styling
+        <h2 id="section-2">Vertical nav example section 2 with secondary variant styling</h2>
       </PageSection>
       <PageSection aria-labelledby="section-3">
-        <h2 id="section-3"></h2>Vertical nav example section 3
+        <h2 id="section-3">Vertical nav example section 3</h2>
       </PageSection>
     </Page>
   );
diff --git a/packages/react-core/src/demos/Banner.md b/packages/react-core/src/demos/Banner.md
index 50193831605..b060414b4c3 100644
--- a/packages/react-core/src/demos/Banner.md
+++ b/packages/react-core/src/demos/Banner.md
@@ -48,7 +48,7 @@ class BannerDemo extends React.Component {
               </p>
             </Content>
           </PageSection>
-          <PageSection aria-label = 'Cards gallery'>
+          <PageSection aria-label='Cards gallery'>
             <Gallery hasGutter>
               {Array.from({ length: 30 }).map((_value, index) => (
                 <GalleryItem key={index}>
diff --git a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
index cc12d8266f8..358cf207b96 100644
--- a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
+++ b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
@@ -364,7 +364,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
           style={{ margin: '12px 0' }}
         />
       </PageSection>
-      <PageSection aria-label="Alert Group">
+      <PageSection component="div">
         <AlertGroup
           hasAnimations
           isToast

From ed56d5f7bc51561355f0f672711b117070351079 Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Tue, 29 Apr 2025 00:44:15 +0530
Subject: [PATCH 7/8] minor changes

---
 packages/react-core/src/demos/Banner.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-core/src/demos/Banner.md b/packages/react-core/src/demos/Banner.md
index b060414b4c3..f933f6ff7db 100644
--- a/packages/react-core/src/demos/Banner.md
+++ b/packages/react-core/src/demos/Banner.md
@@ -41,7 +41,7 @@ class BannerDemo extends React.Component {
         <DashboardWrapper banner={banner} breadcrumb={null}>
           <PageSection aria-labelledby="main-title">
             <Content>
-              <h1 id ="main-title">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.
@@ -114,7 +114,7 @@ class BannerDemo extends React.Component {
             <DashboardWrapper breadcrumb={null}>
               <PageSection aria-labelledby="main-title">
                 <Content>
-                  <h1 id = 'main-title'>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 />
@@ -122,7 +122,7 @@ class BannerDemo extends React.Component {
                   </p>
                 </Content>
               </PageSection>
-              <PageSection aria-label = 'Cards gallery'>
+              <PageSection aria-label='Cards gallery'>
                 <Gallery hasGutter>
                   {Array.from({ length: 30 }).map((_value, index) => (
                     <GalleryItem key={index}>

From 4e9dbe9abc23cffe42b1a24fd11da85134d0728b Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Tue, 29 Apr 2025 22:14:29 +0530
Subject: [PATCH 8/8] removed extra spaces

---
 packages/react-core/src/demos/JumpLinks.md | 6 +++---
 packages/react-core/src/demos/Tabs.md      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-core/src/demos/JumpLinks.md b/packages/react-core/src/demos/JumpLinks.md
index b04ef4d0d0f..9a84154de56 100644
--- a/packages/react-core/src/demos/JumpLinks.md
+++ b/packages/react-core/src/demos/JumpLinks.md
@@ -79,7 +79,7 @@ ScrollspyH2 = () => {
 
   return (
     <DashboardWrapper breadcrumb={null} mainContainerId="scrollable-element">
-      <PageSection aria-labelledby = 'main-title'>
+      <PageSection aria-labelledby='main-title'>
         <Title headingLevel="h1" size="2xl" id='main-title'>
           Main title
         </Title>
@@ -93,7 +93,7 @@ ScrollspyH2 = () => {
       <PageSection padding={{ default: 'noPadding' }} >
         <Sidebar hasGutter orientation={!isVertical && 'stack'}>
           <SidebarPanel variant="sticky">
-            <PageSection aria-label = 'Jump links navigation'>
+            <PageSection aria-label='Jump links navigation'>
               <JumpLinks
                 isVertical={isVertical}
                 isCentered={!isVertical}
@@ -113,7 +113,7 @@ ScrollspyH2 = () => {
             </PageSection>
           </SidebarPanel>
           <SidebarContent hasNoBackground>
-            <PageSection aria-label = 'Main content'>
+            <PageSection aria-label='Main content'>
               <Content>
                 {headings.map(i => (
                   <div key={i} style={{ maxWidth: '800px', marginBottom: '32px' }}>
diff --git a/packages/react-core/src/demos/Tabs.md b/packages/react-core/src/demos/Tabs.md
index 2948a848b37..aae416129a4 100644
--- a/packages/react-core/src/demos/Tabs.md
+++ b/packages/react-core/src/demos/Tabs.md
@@ -355,7 +355,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
   return (
     <DashboardWrapper hasNoBreadcrumb>
       {tabsBreadcrumb}
-      <PageSection isWidthLimited aria-label = 'Pod header'>
+      <PageSection isWidthLimited aria-label='Pod header'>
         <Flex
           spaceItems={{ default: 'spaceItemsMd' }}
           alignItems={{ default: 'alignItemsFlexStart' }}