chore(page): updated examples to provide a11y labels (#11741)

Mash707 · web-flow · commit 06256020b718 · 2025-04-28T13:39:52.000-04:00
* chore(page): updated examples to provide a11y labels

* added a11y labels to examples

* added a11y labels to examples

* updated react-table demos

* improved the usage of aria tags
diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/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">Panel section content</PageSection>
       </Page>
     </Fragment>
   );
diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx b/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">Panel section content</PageSection>
       </Page>
     </Fragment>
   );
diff --git a/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx b/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>
diff --git a/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx b/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>
diff --git a/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx b/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx
@@ -325,13 +325,15 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
       mainContainerId={mainContainerId}
       isBreadcrumbWidthLimited
     >
-      <PageSection isWidthLimited>
+      <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>
-      <PageSection isWidthLimited>
+      <PageSection isWidthLimited aria-label="Card gallery">
         <Gallery hasGutter>
           {Array.from({ length: 50 }).map((_value, index) => (
             <GalleryItem key={index}>
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx b/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}>
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx b/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}>
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx b/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}>
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx b/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">
         <Content>
-          <h1>Projects</h1>
+          <h1 id="projects">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}
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx b/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>
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx b/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}>
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx b/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>
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx b/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>
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx b/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}>
diff --git a/packages/react-core/src/demos/examples/Skeleton/SkeletonCard.tsx b/packages/react-core/src/demos/examples/Skeleton/SkeletonCard.tsx
@@ -27,11 +27,13 @@ export const SkeletonCard: React.FunctionComponent = () => {
   );
   return (
     <DashboardWrapper isBreadcrumbWidthLimited>
-      <PageSection isWidthLimited>
-        <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>
+      <PageSection aria-label="Card gallery">
         <Gallery hasGutter>{Array.from({ length: 7 }).map((_value, index) => card(index))}</Gallery>
       </PageSection>
     </DashboardWrapper>
diff --git a/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx b/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>
diff --git a/packages/react-core/src/demos/examples/Wizard/InModal.tsx b/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">
         <Gallery hasGutter>
           {Array.from({ length: 10 }).map((_value, index) => (
             <GalleryItem key={index}>
diff --git a/packages/react-core/src/demos/examples/Wizard/InPage.tsx b/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>
diff --git a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx b/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')}
diff --git a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx b/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')}
diff --git a/packages/react-table/src/demos/DashboardWrapper.tsx b/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>
diff --git a/packages/react-table/src/demos/examples/TableBulkSelect.tsx b/packages/react-table/src/demos/examples/TableBulkSelect.tsx
@@ -146,7 +146,7 @@ export const TableBulkSelect: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper hasPageTemplateTitle>
-      <PageSection isWidthLimited>
+      <PageSection isWidthLimited aria-label="Bulk select table data">
         {toolbar}
         <Table aria-label="Selectable table">
           <Thead>
diff --git a/packages/react-table/src/demos/examples/TableColumnManagement.tsx b/packages/react-table/src/demos/examples/TableColumnManagement.tsx
@@ -437,7 +437,7 @@ export const TableColumnManagement: React.FunctionComponent = () => {
   return (
     <Fragment>
       <DashboardWrapper hasPageTemplateTitle>
-        <PageSection isFilled>
+        <PageSection isFilled aria-label="Column management table data">
           {toolbarItems}
           <Table variant="compact" aria-label="Column Management Table">
             <Thead>
diff --git a/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx b/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx
@@ -336,7 +336,7 @@ export const TableColumnManagement: React.FunctionComponent = () => {
   return (
     <Fragment>
       <DashboardWrapper hasPageTemplateTitle>
-        <PageSection isFilled>
+        <PageSection isFilled aria-label="Draggable Column Management table data">
           {toolbarItems}
           <Table variant="compact" aria-label="Column Management Table">
             <Thead>
diff --git a/packages/react-table/src/demos/examples/TableCompact.tsx b/packages/react-table/src/demos/examples/TableCompact.tsx
diff --git a/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx b/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx
diff --git a/packages/react-table/src/demos/examples/TableEmptyStateDefault.tsx b/packages/react-table/src/demos/examples/TableEmptyStateDefault.tsx
diff --git a/packages/react-table/src/demos/examples/TableEmptyStateError.tsx b/packages/react-table/src/demos/examples/TableEmptyStateError.tsx
diff --git a/packages/react-table/src/demos/examples/TableEmptyStateLoading.tsx b/packages/react-table/src/demos/examples/TableEmptyStateLoading.tsx
diff --git a/packages/react-table/src/demos/examples/TableExpandCollapseAll.tsx b/packages/react-table/src/demos/examples/TableExpandCollapseAll.tsx
diff --git a/packages/react-table/src/demos/examples/TableSortableResponsive.tsx b/packages/react-table/src/demos/examples/TableSortableResponsive.tsx
diff --git a/packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx b/packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx
diff --git a/packages/react-table/src/demos/examples/TableStickyFirstColumn.tsx b/packages/react-table/src/demos/examples/TableStickyFirstColumn.tsx
diff --git a/packages/react-table/src/demos/examples/TableStickyHeader.tsx b/packages/react-table/src/demos/examples/TableStickyHeader.tsx
