@patternfly/react-core 6.3.0-prerelease.1 → 6.3.0-prerelease.11

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/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>
   );

package/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>
   );

package/src/demos/PasswordGenerator.md

@@ -45,7 +45,7 @@ const PasswordGenerator: React.FunctionComponent = () => {
   const [isAutocompleteOpen, setIsAutocompleteOpen] = useState<boolean>(false);
   const [passwordHidden, setPasswordHidden] = useState<boolean>(true);
   const searchInputRef = useRef(null);
-  const autocompleteRef = .useRef(null);
+  const autocompleteRef = useRef(null);
 
   useEffect(() => {
     window.addEventListener('keydown', handleMenuKeys);

package/src/demos/RTL/RTL.md

@@ -18,6 +18,7 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import HandPaperIcon from '@patternfly/react-icons/dist/esm/icons/hand-paper-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+import { rows } from '@patternfly/react-core/dist/esm/demos/sampleDataRTL';
 
 import './examples/PaginatedTable.css';
 

package/src/demos/RTL/examples/PaginatedTable.tsx

@@ -55,6 +55,7 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import HandPaperIcon from '@patternfly/react-icons/dist/esm/icons/hand-paper-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+import { rows } from '@patternfly/react-core/dist/esm/demos/sampleDataRTL';
 
 interface Row {
   name: string;
@@ -81,45 +82,15 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
     translation.table.columns.url
   ];
 
-  const numRows: number = 25;
-  const getRandomInteger = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min;
-  const createRows = () => {
-    const rows: Row[] = [];
-    for (let i = 0; i < numRows; i++) {
-      const num = i + 1;
-      const rowObj: Row = {
-        name: translation.table.rows.node + num,
-        status: [
-          translation.table.rows.status.stopped,
-          translation.table.rows.status.running,
-          translation.table.rows.status.down,
-          translation.table.rows.status.needsMaintenance
-        ][getRandomInteger(0, 3)],
-        location: [
-          translation.table.rows.locations.raleigh,
-          translation.table.rows.locations.boston,
-          translation.table.rows.locations.atlanta,
-          translation.table.rows.locations.sanFrancisco
-        ][getRandomInteger(0, 3)],
-        lastModified: [
-          translation.table.rows.lastModified.oneHr,
-          translation.table.rows.lastModified.threeHrs,
-          translation.table.rows.lastModified.fiveHrs,
-          translation.table.rows.lastModified.sevenMins,
-          translation.table.rows.lastModified.fortyTwoMins,
-          translation.table.rows.lastModified.twoDays,
-          translation.table.rows.lastModified.oneMonth
-        ][getRandomInteger(0, 6)],
-        url: 'http://www.redhat.com/en/office-locations/node' + num
-      };
-      rows.push(rowObj);
-    }
-
-    return rows;
-  };
+  const generateRowsFromTranslation = (translation: Translation): Row[] =>
+    rows.map((row, index) => ({
+      name: `${translation.table.rows.node}${index + 1}`,
+      status: translation.table.rows.status[row.status],
+      location: translation.table.rows.locations[row.location],
+      lastModified: translation.table.rows.lastModified[row.lastModified],
+      url: `http://www.redhat.com/en/office-locations/node${index + 1}`
+    }));
 
-  const rows = createRows();
-  const [managedRows, setManagedRows] = useState(rows);
   const [paginatedRows, setPaginatedRows] = useState<Row[]>(rows.slice(0, 10));
   const [isDirRTL, setIsDirRTL] = useState<boolean>(false);
 
@@ -131,9 +102,8 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
   };
 
   useEffect(() => {
-    const newRows = createRows();
-    setManagedRows(newRows);
-    setPaginatedRows(newRows.slice((page - 1) * perPage, page * perPage));
+    const fullRows = generateRowsFromTranslation(translation);
+    setPaginatedRows(fullRows.slice((page - 1) * perPage, page * perPage));
   }, [translation]);
 
   useEffect(() => {
@@ -150,7 +120,8 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
     startIdx: number | undefined,
     endIdx: number | undefined
   ) => {
-    setPaginatedRows(managedRows.slice(startIdx, endIdx));
+    const fullRows = generateRowsFromTranslation(translation);
+    setPaginatedRows(fullRows.slice(startIdx, endIdx));
     setPage(newPage);
   };
 
@@ -161,7 +132,8 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
     startIdx: number | undefined,
     endIdx: number | undefined
   ) => {
-    setPaginatedRows(managedRows.slice(startIdx, endIdx));
+    const fullRows = generateRowsFromTranslation(translation);
+    setPaginatedRows(fullRows.slice(startIdx, endIdx));
     setPerPage(newPerPage);
   };
 
@@ -170,7 +142,7 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
 
     return (
       <Pagination
-        itemCount={managedRows.length}
+        itemCount={rows.length}
         page={page}
         perPage={perPage}
         onSetPage={handleSetPage}
@@ -470,9 +442,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>

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/Card/CardAggregateStatus.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
 import { Fragment } from 'react';
 import {
   Card,
@@ -16,7 +15,7 @@ import {
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
+import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
 
 interface ContentType {
   icon?: React.ReactNode;
@@ -283,10 +282,7 @@ export const CardAggregateStatus: React.FunctionComponent = () => {
         }
         return (
           <GridItem key={groupIndex}>
-            <Gallery
-              hasGutter
-              style={{ [l_gallery_GridTemplateColumns_min.name]: galleryWidth } as React.CSSProperties}
-            >
+            <Gallery hasGutter style={{ [cssGridTemplateColumnsMin.name]: galleryWidth } as React.CSSProperties}>
               {cardData[cardGroup].map(({ title, content, layout }, cardIndex: number) => (
                 <Card
                   style={{ textAlign: cardAlign } as React.CSSProperties}

package/src/demos/examples/Card/CardDetails.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
 import {
   Card,
   CardTitle,
@@ -12,10 +11,10 @@ import {
   DescriptionListDescription,
   Divider
 } from '@patternfly/react-core';
-import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
+import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
 
 export const CardDetailsDemo: React.FunctionComponent = () => (
-  <Gallery hasGutter style={{ [l_gallery_GridTemplateColumns_min.name]: '260px' } as React.CSSProperties}>
+  <Gallery hasGutter style={{ [cssGridTemplateColumnsMin.name]: '260px' } as React.CSSProperties}>
     <Card>
       <CardTitle>
         <Title headingLevel="h4" size="xl">

package/src/demos/examples/Card/CardEventsView.tsx

@@ -1,5 +1,4 @@
 import { Fragment, useState } from 'react';
-/* eslint-disable camelcase */
 import {
   Card,
   CardHeader,
@@ -26,7 +25,7 @@ import {
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
-import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
+import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
 
 export const CardEventsView: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -62,7 +61,7 @@ export const CardEventsView: React.FunctionComponent = () => {
       <code>baseline</code> alignment.
       <br />
       <br />
-      <Gallery hasGutter style={{ [l_gallery_GridTemplateColumns_min.name]: '360px' } as React.CSSProperties}>
+      <Gallery hasGutter style={{ [cssGridTemplateColumnsMin.name]: '360px' } as React.CSSProperties}>
         <Card id="card-events-view-example">
           <CardHeader className={flex.alignItemsFlexStart} actions={{ actions: headerActions, hasNoOffset: true }}>
             <CardTitle>

package/src/demos/examples/Card/CardLogView.tsx

@@ -1,5 +1,4 @@
 import { Fragment, useState } from 'react';
-/* eslint-disable camelcase */
 import {
   Card,
   CardHeader,
@@ -21,7 +20,7 @@ import {
   Title
 } from '@patternfly/react-core';
 import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
-import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
+import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
 
 export const CardLogView: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -61,7 +60,7 @@ export const CardLogView: React.FunctionComponent = () => {
       <code>baseline</code> alignment.
       <br />
       <br />
-      <Gallery hasGutter style={{ [l_gallery_GridTemplateColumns_min.name]: '360px' } as React.CSSProperties}>
+      <Gallery hasGutter style={{ [cssGridTemplateColumnsMin.name]: '360px' } as React.CSSProperties}>
         <Card id="card-log-view-example">
           <CardHeader className={flex.alignItemsFlexStart} actions={{ actions: headerActions, hasNoOffset: true }}>
             <CardTitle>

package/src/demos/examples/Card/CardStatus.tsx

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-/* eslint-disable camelcase */
 import {
   Alert,
   Card,

package/src/demos/examples/Card/CardUtilizationDemo3.tsx

@@ -1,5 +1,4 @@
 import { Fragment, useState } from 'react';
-/* eslint-disable camelcase */
 import {
   Card,
   CardTitle,

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

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

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

package/src/demos/examples/Nav/NavDefault.tsx

@@ -84,16 +84,16 @@ export const NavDefault: React.FunctionComponent = () => {
         breadcrumb={DashboardBreadcrumb}
         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>
+        <PageSection aria-label="Card gallery">
           <Gallery hasGutter>
             {Array.from({ length: 10 }).map((_value, index) => (
               <GalleryItem key={index}>

package/src/demos/examples/Nav/NavDrilldown.tsx

@@ -129,7 +129,7 @@ export const NavDrilldown: React.FunctionComponent = () => {
 
   return (
     <Page masthead={<DashboardHeader />} sidebar={sidebar}>
-      <PageSection>
+      <PageSection aria-label="Navigation layer">
         <strong>Nav Layer: </strong>
         {navLayer}
       </PageSection>

package/src/demos/examples/Nav/NavExpandable.tsx

@@ -110,16 +110,16 @@ export const NavExpandableDemo: React.FunctionComponent = () => {
         breadcrumb={DashboardBreadcrumb}
         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>
+        <PageSection aria-label="Card gallery">
           <Gallery hasGutter>
             {Array.from({ length: 10 }).map((_value, index) => (
               <GalleryItem key={index}>

package/src/demos/examples/Nav/NavFlyout.tsx

@@ -284,9 +284,15 @@ export const NavFlyout: React.FunctionComponent = () => {
       skipToContent={PageSkipToContent}
       mainContainerId={pageId}
     >
-      <PageSection>Section 1</PageSection>
-      <PageSection>Section 2</PageSection>
-      <PageSection>Section 3</PageSection>
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Section 1</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-2">
+        <h2 id="section-2">Section 2</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-3">
+        <h2 id="section-3">Section 3</h2>
+      </PageSection>
     </Page>
   );
 };