added a11y labels to examples

Author: Mash707

packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -535,16 +535,16 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
         breadcrumb={PageBreadcrumb}
         mainContainerId={pageId}
       >
-        <PageSection>
+        <PageSection aria-labelledby="main-title">
           <Content>
-            <h1>Main title</h1>
+            <h1 id="main-title">Main title</h1>
             <p>
               Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
               of its relative line height of 1.5.
             </p>
           </Content>
         </PageSection>
-        <PageSection>Panel section content</PageSection>
+        <PageSection aria-label="Panel section content">Panel section content</PageSection>
       </Page>
     </Fragment>
   );

packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx

@@ -770,16 +770,16 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
         breadcrumb={PageBreadcrumb}
         mainContainerId={pageId}
       >
-        <PageSection>
+        <PageSection aria-labelledby="main-title">
           <Content>
-            <h1>Main title</h1>
+            <h1 id="main-title">Main title</h1>
             <p>
               Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
               of its relative line height of 1.5.
             </p>
           </Content>
         </PageSection>
-        <PageSection>Panel section content</PageSection>
+        <PageSection aria-label="Panel section content">Panel section content</PageSection>
       </Page>
     </Fragment>
   );

packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx

@@ -444,9 +444,9 @@ export const PaginatedTableAction = () => {
             ))}
           </Breadcrumb>
         </PageBreadcrumb>
-        <PageSection variant="light">
+        <PageSection variant="light" aria-labelledby='main-title' >
           <Content>
-            <h1>{translation.title}</h1>
+            <h1 id='main-title'>{translation.title}</h1>
             <p>{translation.body}</p>
           </Content>
         </PageSection>

packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx

@@ -470,9 +470,9 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
             ))}
           </Breadcrumb>
         </PageBreadcrumb>
-        <PageSection variant="light">
+        <PageSection variant="light" aria-labelledby="main-title">
           <Content>
-            <h1>{translation.title}</h1>
+            <h1 id="main-title">{translation.title}</h1>
             <p>{translation.body}</p>
           </Content>
         </PageSection>

packages/react-core/src/demos/examples/Wizard/InModal.tsx

@@ -15,7 +15,7 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 export const WizardInModalDemo: React.FunctionComponent = () => (
   <>
     <DashboardWrapper hasPageTemplateTitle>
-      <PageSection isWidthLimited>
+      <PageSection isWidthLimited aria-label="Card gallery section">
         <Gallery hasGutter>
           {Array.from({ length: 10 }).map((_value, index) => (
             <GalleryItem key={index}>

packages/react-core/src/demos/examples/Wizard/InPage.tsx

@@ -5,7 +5,7 @@ import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrap
 export const WizardFullPage: React.FunctionComponent = () => (
   <Fragment>
     <DashboardWrapper hasPageTemplateTitle>
-      <PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard}>
+      <PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard} aria-label="Wizard container">
         <Wizard>
           <WizardStep name="Information" id="wizard-step-1">
             <p>Step 1 content</p>

packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx

@@ -173,13 +173,13 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
         breadcrumb={PageBreadcrumb}
         mainContainerId={pageId}
       >
-        <PageSection>
+        <PageSection aria-labelledby="main-title">
           <Content>
-            <h1>Main title</h1>
+            <h1 id="main-title">Main title</h1>
             <p>A demo of a wizard in a page.</p>
           </Content>
         </PageSection>
-        <PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard}>
+        <PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard} aria-label="Wizard container">
           <Wizard>
             <WizardStep body={{ hasNoPadding: true }} name="Information" id="wizard-step-1">
               {createStepContentWithDrawer('Information step')}

packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx

@@ -177,13 +177,13 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
         breadcrumb={PageBreadcrumb}
         mainContainerId={pageId}
       >
-        <PageSection>
+        <PageSection aria-labelledby="main-title">
           <Content>
-            <h1>Main title</h1>
+            <h1 id="main-title">Main title</h1>
             <p>A demo of a wizard in a page.</p>
           </Content>
         </PageSection>
-        <PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard} ß>
+        <PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard} ß aria-label="Wizard container">
           <Wizard>
             <WizardStep body={{ hasNoPadding: true }} name="Information" id="wizard-step-1">
               {createStepContentWithDrawer('Information step')}

packages/react-table/src/demos/DashboardWrapper.tsx

@@ -107,9 +107,9 @@ export const DashboardBreadcrumb = (
 );
 
 const PageTemplateTitle = (
-  <PageSection>
+  <PageSection aria-labelledby="main-title">
     <Content>
-      <h1>Main title</h1>
+      <h1 id="main-title">Main title</h1>
       <p>This is a full page demo.</p>
     </Content>
   </PageSection>

packages/react-table/src/demos/examples/TableSortableResponsive.tsx

@@ -229,9 +229,9 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
   return (
     <Fragment>
       <DashboardWrapper>
-        <PageSection isWidthLimited variant={PageSectionVariants.light}>
+        <PageSection isWidthLimited variant={PageSectionVariants.light} aria-labelledby="table-title">
           <Content>
-            <h1>Table demos</h1>
+            <h1 id="table-title">Table demos</h1>
             <p>
               Below is an example of a responsive sortable table. When the screen size shrinks the table into a compact
               form, the toolbar will display a dropdown menu containing sorting options.