npm - @patternfly/react-core - Versions diffs - 6.3.0-prerelease.1 → 6.3.0-prerelease.11 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (232) hide show

package/src/demos/examples/Nav/NavGrouped.tsx CHANGED Viewed

@@ -92,19 +92,27 @@ export const NavGrouped: React.FunctionComponent = () => {
         skipToContent={PageSkipToContent}
         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>Section 1</PageSection>
-        <PageSection>Section 2</PageSection>
-        <PageSection>Section 3</PageSection>
-        <PageSection>Content</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>
+        <PageSection aria-labelledby="content">
+          <h2 id="content">Content</h2>
+        </PageSection>
       </Page>
     </>
   );

package/src/demos/examples/Nav/NavHorizontal.tsx CHANGED Viewed

@@ -229,16 +229,16 @@ export const NavHorizontal: 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/NavHorizontalWithSubnav.tsx CHANGED Viewed

@@ -278,22 +278,22 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
   return (
     <Fragment>
       <Page masthead={masthead} skipToContent={PageSkipToContent} mainContainerId={pageId}>
-        <PageSection type={PageSectionTypes.subNav} isWidthLimited>
+        <PageSection type={PageSectionTypes.subNav} isWidthLimited aria-label="Subnav">
           {SubNav}
         </PageSection>
-        <PageSection type={PageSectionTypes.breadcrumb} isWidthLimited>
+        <PageSection type={PageSectionTypes.breadcrumb} isWidthLimited aria-label="Breadcrumb">
           {DashboardBreadcrumb}
         </PageSection>
-        <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="Card gallery">
           <Gallery hasGutter>
             {Array.from({ length: 10 }).map((_value, index) => (
               <GalleryItem key={index}>

package/src/demos/examples/Nav/NavManual.tsx CHANGED Viewed

@@ -260,16 +260,16 @@ export const NavManual: React.FunctionComponent = () => {
         skipToContent={PageSkipToContent}
         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/NavWithSubnav.tsx CHANGED Viewed

@@ -122,22 +122,22 @@ export const NavWithSubnav: React.FunctionComponent = () => {
         skipToContent={PageSkipToContent}
         mainContainerId={pageId}
       >
-        <PageSection type={PageSectionTypes.subNav} isWidthLimited>
+        <PageSection type={PageSectionTypes.subNav} isWidthLimited aria-label="Subnav">
           {SubNav}
         </PageSection>
-        <PageSection type={PageSectionTypes.breadcrumb} isWidthLimited>
+        <PageSection type={PageSectionTypes.breadcrumb} isWidthLimited aria-label="Breadcrumb">
           {DashboardBreadcrumb}
         </PageSection>
-        <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="Card gallery">
           <Gallery hasGutter>
             {Array.from({ length: 10 }).map((_value, index) => (
               <GalleryItem key={index}>

package/src/demos/examples/Page/PageContextSelector.tsx CHANGED Viewed

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

package/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx CHANGED Viewed

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

package/src/demos/examples/Page/PageStickySectionGroup.tsx CHANGED Viewed

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

package/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx CHANGED Viewed

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

package/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx CHANGED Viewed

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

package/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx CHANGED Viewed

@@ -417,9 +417,9 @@ 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.
@@ -427,7 +427,7 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
         </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>

package/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx CHANGED Viewed

@@ -181,9 +181,9 @@ 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.
@@ -191,7 +191,7 @@ export const PrimaryDetailDataListInCard: React.FunctionComponent = () => {
         </Content>
       </PageSection>
       <Divider component="div" />
-      <PageSection>
+      <PageSection aria-label="Card with drawer content">
         <Card>
           <Drawer isStatic isExpanded={isExpanded}>
             <DrawerContent panelContent={panelContent}>

package/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx CHANGED Viewed

@@ -417,9 +417,9 @@ 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.
@@ -427,7 +427,7 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
         </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>

package/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx CHANGED Viewed

@@ -417,9 +417,9 @@ 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.
@@ -427,7 +427,7 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
         </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>

package/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx CHANGED Viewed

@@ -90,9 +90,9 @@ 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.
@@ -100,7 +100,7 @@ export const PrimaryDetailSimpleListInCard: React.FunctionComponent = () => {
         </Content>
       </PageSection>
       <Divider component="div" />
-      <PageSection>
+      <PageSection aria-label="Card with drawer content">
         <Card>
           <Drawer isStatic isExpanded={isExpanded}>
             <DrawerContent panelContent={panelContent}>

package/src/demos/examples/Skeleton/SkeletonCard.tsx CHANGED Viewed

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

package/src/demos/examples/Tabs/ModalTabs.tsx CHANGED Viewed

@@ -73,13 +73,13 @@ export const ModalTabs: React.FunctionComponent = () => {
   return (
     <Fragment>
       <DashboardWrapper mainContainerId="main-content-card-view-default-nav">
-        <PageSection>
+        <PageSection aria-labelledby="projects-heading">
           <Content>
-            <h1>Projects</h1>
+            <h1 id="projects-heading">Projects</h1>
             <p>Click any project card to view tabs within modals.</p>
           </Content>
         </PageSection>
-        <PageSection isFilled>
+        <PageSection isFilled aria-label="Selectable card gallery">
           <Gallery hasGutter aria-label="Selectable card container">
             {products.map((product) => (
               <Card

package/src/demos/examples/Tabs/NestedTabs.tsx CHANGED Viewed

@@ -133,7 +133,7 @@ export const NestedTabs: React.FunctionComponent = () => {
   return (
     <DashboardWrapper hasPageTemplateTitle>
-      <PageSection type="tabs" isWidthLimited>
+      <PageSection type="tabs" isWidthLimited aria-label="Cluster navigation tabs">
         <Tabs
           activeKey={activeTabKey}
           onSelect={(_event, tabIndex) => handleTabClick(Number(tabIndex))}
@@ -144,7 +144,7 @@ export const NestedTabs: React.FunctionComponent = () => {
           <Tab eventKey={1} title={<TabTitleText>Cluster 2</TabTitleText>} tabContentId={`tabContent${1}`} />
         </Tabs>
       </PageSection>
-      <PageSection isWidthLimited>
+      <PageSection isWidthLimited aria-label="Cluster tab panel content">
         <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
           <TabContentBody>{tabContent}</TabContentBody>
         </TabContent>

package/src/demos/examples/Tabs/NestedUnindentedTabs.tsx CHANGED Viewed

@@ -124,7 +124,7 @@ export const NestedUnindentedTabs: React.FunctionComponent = () => {
   return (
     <DashboardWrapper hasPageTemplateTitle>
-      <PageSection type="tabs" isWidthLimited>
+      <PageSection type="tabs" isWidthLimited aria-label="Primary navigation tabs">
         <Tabs
           activeKey={activeTabKey}
           onSelect={(_event, tabIndex) => handleTabClick(Number(tabIndex))}
@@ -137,7 +137,7 @@ export const NestedUnindentedTabs: React.FunctionComponent = () => {
           <Tab eventKey={3} title={<TabTitleText>Support</TabTitleText>} tabContentId={`tabContent${3}`} />
         </Tabs>
       </PageSection>
-      <PageSection isWidthLimited>
+      <PageSection isWidthLimited aria-label="Primary tab content">
         <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
           <TabContentBody>What's new panel</TabContentBody>
         </TabContent>

package/src/demos/examples/Tabs/TabsAndTable.tsx CHANGED Viewed

@@ -385,12 +385,12 @@ export const TablesAndTabs = () => {
   return (
     <DashboardWrapper>
       <Fragment>
-        <PageSection>
-          <Title headingLevel="h1" size="2xl">
+        <PageSection aria-labelledby="nodes">
+          <Title headingLevel="h1" size="2xl" id="nodes">
             Nodes
           </Title>
         </PageSection>
-        <PageSection padding={{ default: 'noPadding' }}>
+        <PageSection padding={{ default: 'noPadding' }} aria-label="Nodes toolbar and content">
           {toolbar}
           <Divider />
           {tabContent}

package/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx CHANGED Viewed

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

package/src/demos/examples/Wizard/InModal.tsx CHANGED Viewed

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

package/src/demos/examples/Wizard/InPage.tsx CHANGED Viewed

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

package/src/demos/examples/Wizard/InPageWithDrawer.tsx CHANGED Viewed

@@ -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')}

package/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx CHANGED Viewed

@@ -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')}