added a11y labels to examples

Author: Mash707

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

@@ -181,17 +181,17 @@ 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.
           </p>
         </Content>
       </PageSection>
       <Divider component="div" />
-      <PageSection>
+      <PageSection aria-label="Card with drawer content">
         <Card>
           <Drawer isStatic isExpanded={isExpanded}>
             <DrawerContent panelContent={panelContent}>

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

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

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

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

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

@@ -90,17 +90,17 @@ 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.
           </p>
         </Content>
       </PageSection>
       <Divider component="div" />
-      <PageSection>
+      <PageSection aria-label="Card with drawer content">
         <Card>
           <Drawer isStatic isExpanded={isExpanded}>
             <DrawerContent panelContent={panelContent}>

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>

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>