@patternfly/react-core 6.3.0-prerelease.6 → 6.3.0-prerelease.8

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.3.0-prerelease.5","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.3.0-prerelease.7","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.3.0-prerelease.5","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.3.0-prerelease.7","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.3.0-prerelease.5","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.3.0-prerelease.7","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.3.0-prerelease.6",
+  "version": "6.3.0-prerelease.8",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "026f3f2ef440ff4e14e9543c4f533e7a4c991a0d"
+  "gitHead": "5c654c5c04c99feba948aee5ad8da7bae39c476f"
 }

package/src/components/Page/examples/PageCenteredSection.tsx

@@ -68,7 +68,7 @@ export const PageCenteredSection: React.FunctionComponent = () => {
 
   return (
     <Page masthead={masthead} sidebar={sidebar}>
-      <PageSection isWidthLimited isCenterAligned>
+      <PageSection isWidthLimited isCenterAligned aria-label="width limited page section">
         <Card>
           <CardBody>
             When a width limited page section is wider than the value of

package/src/components/Page/examples/PageGroupSection.tsx

@@ -101,10 +101,16 @@ export const PageGroupSection: React.FunctionComponent = () => {
             </BreadcrumbItem>
           </Breadcrumb>
         </PageBreadcrumb>
-        <PageSection>Grouped section</PageSection>
+        <PageSection aria-labelledby="grouped-section">
+          <h2 id="grouped-section">Grouped section</h2>
+        </PageSection>
       </PageGroup>
-      <PageSection>Section 1</PageSection>
-      <PageSection>Section 2</PageSection>
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Grouped example section 1</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-2">
+        <h2 id="section-2">Grouped example section 2</h2>
+      </PageSection>
     </Page>
   );
 };

package/src/components/Page/examples/PageHorizontalNav.tsx

@@ -36,9 +36,15 @@ export const PageHorizontalNav: React.FunctionComponent = () => {
 
   return (
     <Page masthead={masthead}>
-      <PageSection>Section 1</PageSection>
-      <PageSection variant="secondary">Section 2 with secondary variant styling</PageSection>
-      <PageSection>Section 3</PageSection>
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Horizontal nav example section 1</h2>
+      </PageSection>
+      <PageSection variant="secondary" aria-labelledby="section-2">
+        <h2 id="section-2">Horizontal nav example section 2 with secondary variant styling</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-3">
+        <h2 id="section-3">Horizontal nav example section 3</h2>
+      </PageSection>
     </Page>
   );
 };

package/src/components/Page/examples/PageMainSectionPadding.tsx

@@ -64,10 +64,18 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
 
   return (
     <Page masthead={masthead} sidebar={sidebar}>
-      <PageSection>Section with default padding</PageSection>
-      <PageSection padding={{ default: 'noPadding' }}>Section with no padding</PageSection>
-      <PageSection padding={{ default: 'noPadding', md: 'padding' }}>Section with padding on medium</PageSection>
-      <PageSection padding={{ md: 'noPadding' }}>Section with no padding on medium</PageSection>
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Section with default padding</h2>
+      </PageSection>
+      <PageSection padding={{ default: 'noPadding' }} aria-labelledby="section-2">
+        <h2 id="section-2">Section with no padding</h2>
+      </PageSection>
+      <PageSection padding={{ default: 'noPadding', md: 'padding' }} aria-labelledby="section-3">
+        <h2 id="section-3">Section with padding on medium</h2>
+      </PageSection>
+      <PageSection padding={{ md: 'noPadding' }} aria-labelledby="section-4">
+        <h2 id="section-4">Section with no padding on medium</h2>
+      </PageSection>
     </Page>
   );
 };

package/src/components/Page/examples/PageMainSectionVariations.tsx

@@ -64,22 +64,22 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
 
   return (
     <Page header={header} sidebar={sidebar}>
-      <PageSection type="subnav">
+      <PageSection type="subnav" aria-label="With subnav type">
         Section with <code>type="subnav"</code> for horizontal subnav navigation
       </PageSection>
-      <PageSection type="nav">
+      <PageSection type="nav" aria-label="With nav type">
         Section with <code>type="nav"</code> for tertiary navigation
       </PageSection>
-      <PageSection type="tabs">
+      <PageSection type="tabs" aria-label="With tabs type">
         Section with <code>type="tabs"</code> for tabs
       </PageSection>
-      <PageSection type="breadcrumb">
+      <PageSection type="breadcrumb" aria-label="With breadcrumb type">
         Section with <code>type="breadcrumb"</code> for breadcrumbs
       </PageSection>
-      <PageSection>
+      <PageSection aria-label="With default type">
         Section without <code>type</code> prop or <code>type="default"</code> for main sections
       </PageSection>
-      <PageSection type="wizard">
+      <PageSection type="wizard" aria-label="With wizard type">
         Section with <code>type="wizard"</code> for wizards
       </PageSection>
     </Page>

package/src/components/Page/examples/PageMultipleSidebarBody.tsx

@@ -71,9 +71,15 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
 
   return (
     <Page masthead={masthead} sidebar={sidebar}>
-      <PageSection>Section 1</PageSection>
-      <PageSection>Section 2</PageSection>
-      <PageSection>Section 3</PageSection>
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Multiple sidebar body example section 1</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-2">
+        <h2 id="section-2">Multiple sidebar body example section 2</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-3">
+        <h2 id="section-3">Multiple sidebar body example section 3</h2>
+      </PageSection>
     </Page>
   );
 };

package/src/components/Page/examples/PageUncontrolledNav.tsx

@@ -51,9 +51,15 @@ export const PageUncontrolledNav: React.FunctionComponent = () => {
 
   return (
     <Page isManagedSidebar masthead={masthead} sidebar={sidebar}>
-      <PageSection>Section 1</PageSection>
-      <PageSection>Section 2</PageSection>
-      <PageSection>Section 3</PageSection>
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Uncontrolled nav example section 1</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-2">
+        <h2 id="section-2">Uncontrolled nav example section 2</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-3">
+        <h2 id="section-3">Uncontrolled nav example section 3</h2>
+      </PageSection>
     </Page>
   );
 };

package/src/components/Page/examples/PageVerticalNav.tsx

@@ -64,9 +64,15 @@ export const PageVerticalNav: React.FunctionComponent = () => {
 
   return (
     <Page masthead={masthead} sidebar={sidebar}>
-      <PageSection>Section 1</PageSection>
-      <PageSection variant="secondary">Section 2 with secondary variant styling</PageSection>
-      <PageSection>Section 3</PageSection>
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Vertical nav example section 1</h2>
+      </PageSection>
+      <PageSection variant="secondary" aria-labelledby="section-2">
+        <h2 id="section-2">Vertical nav example section 2 with secondary variant styling</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-3">
+        <h2 id="section-3">Vertical nav example section 3</h2>
+      </PageSection>
     </Page>
   );
 };

package/src/components/Page/examples/PageWithOrWithoutFill.tsx

@@ -64,11 +64,15 @@ export const PageWithOrWithoutFill: React.FunctionComponent = () => {
 
   return (
     <Page isContentFilled masthead={masthead} sidebar={sidebar}>
-      <PageSection>A default page section</PageSection>
-      <PageSection isFilled={true} variant="secondary">
-        This section fills the available space.
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Section without fill</h2>
+      </PageSection>
+      <PageSection isFilled={true} variant="secondary" aria-labelledby="section-2">
+        <h2 id="section-2">Section with fill</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-3">
+        <h2 id="section-3">Another section without fill</h2>
       </PageSection>
-      <PageSection>A default page section</PageSection>
     </Page>
   );
 };

package/src/components/Truncate/Truncate.tsx

@@ -142,13 +142,18 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
     setShouldRenderByMaxChars(maxCharsDisplayed > 0);
   }, [maxCharsDisplayed]);
 
+  const lrmEntity = <Fragment>&lrm;</Fragment>;
+  const isStartPosition = position === TruncatePosition.start;
+  const isEndPosition = position === TruncatePosition.end;
+
   const renderResizeObserverContent = () => {
-    if (position === TruncatePosition.end || position === TruncatePosition.start) {
+    if (isEndPosition || isStartPosition) {
       return (
         <>
           <span ref={textRef} className={truncateStyles[position]}>
+            {isStartPosition && lrmEntity}
             {content}
-            {position === TruncatePosition.start && <Fragment>&lrm;</Fragment>}
+            {isStartPosition && lrmEntity}
           </span>
         </>
       );
@@ -195,7 +200,7 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
         </>
       );
     }
-    if (position === TruncatePosition.end) {
+    if (isEndPosition) {
       return (
         <>
           {renderVisibleContent(content.slice(0, maxCharsDisplayed))}

package/src/components/Truncate/__tests__/Truncate.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen, within } from '@testing-library/react';
-import { Truncate } from '../Truncate';
+import { Truncate, TruncatePosition } from '../Truncate';
 import styles from '@patternfly/react-styles/css/components/Truncate/truncate';
 import '@testing-library/jest-dom';
 
@@ -67,7 +67,9 @@ test('renders default truncation', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('renders start truncation with ‎ at end', () => {
+// If this snapshot fails and the output text doesn't seem like it's changed, it most likely
+// is due to the ‎ HTML entity isn't rendering correctly.
+test('renders start truncation with ‎ at start and end', () => {
   const { asFragment } = render(
     <Truncate
       content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}

package/src/components/Truncate/__tests__/__snapshots__/Truncate.test.tsx.snap

@@ -65,7 +65,7 @@ exports[`renders default truncation 1`] = `
 </DocumentFragment>
 `;
 
-exports[`renders start truncation with &lrm; at end 1`] = `
+exports[`renders start truncation with &lrm; at start and end 1`] = `
 <DocumentFragment>
   <div
     data-testid="Tooltip-mock"
@@ -86,7 +86,7 @@ exports[`renders start truncation with &lrm; at end 1`] = `
     <span
       class="pf-v6-c-truncate__end"
     >
-      Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.‎
+      ‎Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.‎
     </span>
   </span>
 </DocumentFragment>

package/src/demos/Banner.md

@@ -39,16 +39,16 @@ class BannerDemo extends React.Component {
     return (
       <Fragment>
         <DashboardWrapper banner={banner} breadcrumb={null}>
-          <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>
-          <PageSection>
+          <PageSection aria-label='Cards gallery'>
             <Gallery hasGutter>
               {Array.from({ length: 30 }).map((_value, index) => (
                 <GalleryItem key={index}>
@@ -112,9 +112,9 @@ class BannerDemo extends React.Component {
           </FlexItem>
           <FlexItem grow={{ default: 'grow' }} style={{ minHeight: 0 }}>
             <DashboardWrapper breadcrumb={null}>
-              <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 />
@@ -122,7 +122,7 @@ class BannerDemo extends React.Component {
                   </p>
                 </Content>
               </PageSection>
-              <PageSection>
+              <PageSection aria-label='Cards gallery'>
                 <Gallery hasGutter>
                   {Array.from({ length: 30 }).map((_value, index) => (
                     <GalleryItem key={index}>

package/src/demos/CardView/examples/CardView.tsx

@@ -465,16 +465,16 @@ export const CardViewBasic: React.FunctionComponent = () => {
   return (
     <Fragment>
       <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>
           <Toolbar id="toolbar-group-types" clearAllFilters={onDelete}>
             <ToolbarContent>{toolbarItems}</ToolbarContent>
           </Toolbar>
         </PageSection>
-        <PageSection isFilled>
+        <PageSection isFilled aria-label="Selectable card gallery">
           <Gallery hasGutter aria-label="Selectable card container">
             <Card isCompact>
               <Bullseye>
@@ -546,7 +546,12 @@ export const CardViewBasic: React.FunctionComponent = () => {
             ))}
           </Gallery>
         </PageSection>
-        <PageSection isFilled={false} stickyOnBreakpoint={{ default: 'bottom' }} padding={{ default: 'noPadding' }}>
+        <PageSection
+          isFilled={false}
+          stickyOnBreakpoint={{ default: 'bottom' }}
+          padding={{ default: 'noPadding' }}
+          aria-label="Pagination controls"
+        >
           <Pagination
             itemCount={totalItemCount}
             page={page}

package/src/demos/DataList/examples/DataListActionable.tsx

@@ -33,13 +33,15 @@ export const DataListActionable: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper mainContainerId="main-content-datalist-view-actions" breadcrumb={null}>
-      <PageSection>
+      <PageSection aria-labelledby="projects">
         <Content>
-          <Title headingLevel="h1">Projects</Title>
+          <Title headingLevel="h1" id="projects">
+            Projects
+          </Title>
           <Content component="p">This is a demo that showcases PatternFly Data List</Content>
         </Content>
       </PageSection>
-      <PageSection>
+      <PageSection aria-label="Data list of projects">
         <DataList aria-label="single action data list example ">
           {!isDeleted && (
             <DataListItem aria-labelledby="single-action-item1">

package/src/demos/DataList/examples/DataListBasic.tsx

@@ -69,9 +69,9 @@ export const DataListBasic: React.FunctionComponent = () => {
   return (
     <Fragment>
       <DashboardWrapper mainContainerId="main-content-datalist-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 data list</p>
           </Content>
         </PageSection>

package/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx

@@ -133,9 +133,9 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
   return (
     <Fragment>
       <DashboardWrapper mainContainerId="main-content-datalist-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 data list</p>
           </Content>
         </PageSection>

package/src/demos/DataList/examples/DataListStaticBottomPagination.tsx

@@ -113,9 +113,11 @@ export const DataListStaticBottomPagination: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper mainContainerId="main-content-datalist-view-pagination" breadcrumb={null}>
-      <PageSection>
+      <PageSection aria-labelledby="projects">
         <Content>
-          <Content component="h1">Projects</Content>
+          <Content component="h1" id="projects">
+            Projects
+          </Content>
           <Content component="p">This is a demo that showcases PatternFly Data List</Content>
         </Content>
       </PageSection>

package/src/demos/DescriptionList/examples/DescriptionListBasic.tsx

@@ -18,16 +18,16 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 export const DescriptionListBasic: React.FunctionComponent = () => (
   <DashboardWrapper>
-    <PageSection>
+    <PageSection aria-labelledby="projects">
       <Content>
-        <Content component="h1">Projects</Content>
+        <h1 id="projects">Projects</h1>
         <Content component="p">This is a full page demo</Content>
       </Content>
     </PageSection>
-    <PageSection>
+    <PageSection aria-labelledby="details">
       <Card>
         <CardHeader>
-          <Title headingLevel="h2" size="lg">
+          <Title headingLevel="h2" size="lg" id="details">
             Details
           </Title>
         </CardHeader>

package/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx

@@ -150,13 +150,15 @@ export const DescriptionListInDrawer: React.FunctionComponent = () => {
       isNotificationDrawerExpanded={isExpanded}
       onNotificationDrawerExpand={onExpand}
     >
-      <PageSection>
+      <PageSection 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>{drawerContent}</PageSection>
+      <PageSection aria-label="Drawer Content">{drawerContent}</PageSection>
     </DashboardWrapper>
   );
 };

package/src/demos/JumpLinks.md

@@ -79,8 +79,8 @@ ScrollspyH2 = () => {
 
   return (
     <DashboardWrapper breadcrumb={null} mainContainerId="scrollable-element">
-      <PageSection>
-        <Title headingLevel="h1" size="2xl">
+      <PageSection aria-labelledby='main-title'>
+        <Title headingLevel="h1" size="2xl" id='main-title'>
           Main title
         </Title>
         <Switch
@@ -90,10 +90,10 @@ ScrollspyH2 = () => {
           onChange={(_event, check) => setIsVertical(check)}
         />
       </PageSection>
-      <PageSection padding={{ default: 'noPadding' }}>
+      <PageSection padding={{ default: 'noPadding' }} >
         <Sidebar hasGutter orientation={!isVertical && 'stack'}>
           <SidebarPanel variant="sticky">
-            <PageSection>
+            <PageSection aria-label='Jump links navigation'>
               <JumpLinks
                 isVertical={isVertical}
                 isCentered={!isVertical}
@@ -113,7 +113,7 @@ ScrollspyH2 = () => {
             </PageSection>
           </SidebarPanel>
           <SidebarContent hasNoBackground>
-            <PageSection>
+            <PageSection aria-label='Main content'>
               <Content>
                 {headings.map(i => (
                   <div key={i} style={{ maxWidth: '800px', marginBottom: '32px' }}>

package/src/demos/Tabs.md

@@ -159,7 +159,7 @@ TabsOpenDemo = () => {
   return (
     <DashboardWrapper hasNoBreadcrumb>
       {tabsBreadcrumb}
-      <PageSection isWidthLimited>
+      <PageSection isWidthLimited aria-label='Pod header'>
         <Flex
           spaceItems={{ default: 'spaceItemsMd' }}
           alignItems={{ default: 'alignItemsFlexStart' }}
@@ -178,7 +178,7 @@ TabsOpenDemo = () => {
           </FlexItem>
         </Flex>
       </PageSection>
-      <PageSection type="tabs" isWidthLimited>
+      <PageSection type="tabs" isWidthLimited aria-label='Pod navigation tabs'>
         <Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="open-tabs-example-tabs-list">
           <Tab eventKey={0} title={<TabTitleText>Details</TabTitleText>} tabContentId={`tabContent${0}`} />
           <Tab eventKey={1} title={<TabTitleText>YAML</TabTitleText>} tabContentId={`tabContent${1}`} />
@@ -187,7 +187,7 @@ TabsOpenDemo = () => {
           <Tab eventKey={4} title={<TabTitleText>Terminal</TabTitleText>} tabContentId={`tabContent${4}`} />
         </Tabs>
       </PageSection>
-      <PageSection isWidthLimited>
+      <PageSection isWidthLimited aria-label='Pod content'>
         <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
           <TabContentBody>{tabContent}</TabContentBody>
         </TabContent>
@@ -355,7 +355,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
   return (
     <DashboardWrapper hasNoBreadcrumb>
       {tabsBreadcrumb}
-      <PageSection isWidthLimited>
+      <PageSection isWidthLimited aria-label='Pod header'>
         <Flex
           spaceItems={{ default: 'spaceItemsMd' }}
           alignItems={{ default: 'alignItemsFlexStart' }}
@@ -374,7 +374,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
           </FlexItem>
         </Flex>
       </PageSection>
-      <PageSection type="tabs" isWidthLimited>
+      <PageSection type="tabs" isWidthLimited aria-label='Pod navigation tabs'>
         <Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="open-tabs-example-tabs-list">
           <Tab eventKey={0} title={<TabTitleText>Details</TabTitleText>} tabContentId={`tabContent${0}`} />
           <Tab eventKey={1} title={<TabTitleText>YAML</TabTitleText>} tabContentId={`tabContent${1}`} />
@@ -383,7 +383,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
           <Tab eventKey={4} title={<TabTitleText>Terminal</TabTitleText>} tabContentId={`tabContent${4}`} />
         </Tabs>
       </PageSection>
-      <PageSection isWidthLimited padding={{ default: 'noPadding' }}>
+      <PageSection isWidthLimited padding={{ default: 'noPadding' }} aria-label='Pod content'>
         <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
           <TabContentBody>
             <Tabs

package/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx

@@ -312,9 +312,9 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
       notificationDrawer={notificationDrawer}
       isNotificationDrawerExpanded={isDrawerExpanded}
     >
-      <PageSection>
+      <PageSection aria-labelledby="alert-group-title">
         <Content>
-          <h1>Alert group with notification drawer demo</h1>
+          <h1 id="alert-group-title">Alert group with notification drawer demo</h1>
           <p>
             New alerts can be added with the following buttons. Each alert has a timeout of 7 seconds, however, even
             after the timeout expires, all alerts are still visible in the notification drawer. By default, only 3
@@ -324,7 +324,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
         </Content>
       </PageSection>
 
-      <PageSection>
+      <PageSection aria-label="Alert Buttons">
         <Button variant="secondary" onClick={() => addNewNotification('success')} style={alertButtonStyle}>
           Add toast success alert
         </Button>
@@ -344,10 +344,10 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
         </Button>
       </PageSection>
 
-      <PageSection>
+      <PageSection aria-labelledby="max-displayed-alerts-title">
         <Content>
           <br />
-          <h2>Max displayed alerts</h2>
+          <h2 id="max-displayed-alerts-title">Max displayed alerts</h2>
           <p>Adjust the maximum number of displayed alerts.</p>
         </Content>
         <NumberInput
@@ -364,7 +364,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
           style={{ margin: '12px 0' }}
         />
       </PageSection>
-      <PageSection>
+      <PageSection component="div">
         <AlertGroup
           hasAnimations
           isToast

package/src/demos/examples/BackToTop/BackToTopNameDemo.tsx

@@ -11,9 +11,9 @@ export const Name = () => {
 
   return (
     <DashboardWrapper breadcrumb={null}>
-      <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.

package/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx

@@ -308,15 +308,17 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
       isBreadcrumbWidthLimited
       isBreadcrumbGrouped
       additionalGroupedContent={
-        <PageSection>
+        <PageSection 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>
+      <PageSection aria-label="Card gallery">
         <Gallery hasGutter>
           {Array.from({ length: 10 }).map((_value, index) => (
             <GalleryItem key={index}>