improved the usage of aria tags

Author: Mash707

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>
   );

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>
   );

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>

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>

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">

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}>