chore(page): updated examples to provide a11y labels

Author: Mash707

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

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

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

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

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}

packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx

@@ -417,17 +417,17 @@ 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.
           </p>
         </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>