@patternfly/react-core 6.2.2 → 6.3.0-prerelease.10

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,22 +18,22 @@ 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>
         <Divider />
         <CardBody>
-          <DescriptionList isAutoFit>
+          <DescriptionList isAutoFit aria-label="Details">
             <DescriptionListGroup>
               <DescriptionListTerm>Name</DescriptionListTerm>
               <DescriptionListDescription>mary-test</DescriptionListDescription>

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

@@ -51,7 +51,7 @@ export const DescriptionListInDrawer: React.FunctionComponent = () => {
         </DrawerActions>
       </DrawerHead>
       <DrawerPanelBody>
-        <DescriptionList isFillColumns columnModifier={{ default: '2Col', lg: '2Col' }}>
+        <DescriptionList isFillColumns columnModifier={{ default: '2Col', lg: '2Col' }} aria-label="Details">
           <DescriptionListGroup>
             <DescriptionListTerm>Name</DescriptionListTerm>
             <DescriptionListDescription>test</DescriptionListDescription>
@@ -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/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>

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

package/src/demos/SearchInput/SearchInput.md

@@ -172,6 +172,7 @@ SearchAutocomplete = () => {
       ref={searchInputRef}
       hint={hint}
       id="autocomplete-search"
+      aria-label='Search with autocomplete'
     />
   );
 
@@ -401,6 +402,7 @@ AdvancedComposableSearchInput = () => {
       onSearch={onSubmit}
       ref={searchInputRef}
       id="custom-advanced-search"
+      aria-label='Composable advanced search'
     />
   );
 

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">
@@ -23,7 +22,7 @@ export const CardDetailsDemo: React.FunctionComponent = () => (
         </Title>
       </CardTitle>
       <CardBody>
-        <DescriptionList>
+        <DescriptionList aria-label="Cluster details for API1">
           <DescriptionListGroup>
             <DescriptionListTerm>Cluster API Address</DescriptionListTerm>
             <DescriptionListDescription>
@@ -60,7 +59,7 @@ export const CardDetailsDemo: React.FunctionComponent = () => (
         </Title>
       </CardTitle>
       <CardBody>
-        <DescriptionList>
+        <DescriptionList aria-label="Cluster details for API2">
           <DescriptionListGroup>
             <DescriptionListTerm>Cluster API Address</DescriptionListTerm>
             <DescriptionListDescription>

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>
@@ -72,7 +71,7 @@ export const CardEventsView: React.FunctionComponent = () => {
             </CardTitle>
           </CardHeader>
           <CardBody>
-            <DescriptionList>
+            <DescriptionList aria-label="Events view">
               <DescriptionListGroup>
                 <DescriptionListTerm>
                   <Flex flexWrap={{ default: 'nowrap' }}>

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>
@@ -71,7 +70,7 @@ export const CardLogView: React.FunctionComponent = () => {
             </CardTitle>
           </CardHeader>
           <CardBody>
-            <DescriptionList>
+            <DescriptionList aria-label="Activity logs">
               <DescriptionListGroup>
                 <DescriptionListTerm>Readiness probe failed</DescriptionListTerm>
                 <DescriptionListDescription>

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/CardStatusTabbed.tsx

@@ -68,8 +68,8 @@ export const CardStatusTabbed: React.FunctionComponent = () => {
     setActiveTabKey(Number(tabIndex));
   };
 
-  const tabContent = (
-    <DescriptionList isHorizontal columnModifier={{ lg: '2Col' }}>
+  const tabContent = (tabIndex: number) => (
+    <DescriptionList isHorizontal columnModifier={{ lg: '2Col' }} aria-label={`Object ${tabIndex + 1} status`}>
       {descriptionListData.map(({ status, resourceName, detail, icon }, index) => (
         <DescriptionListGroup key={index}>
           <DescriptionListTerm>
@@ -120,7 +120,7 @@ export const CardStatusTabbed: React.FunctionComponent = () => {
               activeKey={activeTabKey}
               hidden={tabIndex !== activeTabKey}
             >
-              {tabContent}
+              {tabContent(tabIndex)}
             </TabContent>
           ))}
         </CardBody>

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>