@patternfly/react-core 6.3.0-prerelease.2 → 6.3.0-prerelease.20

package/src/components/DualListSelector/DualListSelectorTreeItem.tsx

@@ -1,4 +1,4 @@
-import { memo, useContext, useEffect, useRef, useState } from 'react';
+import { memo, useContext, useEffect, useRef, useState, cloneElement, Children, isValidElement } from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
 import { DualListSelectorTreeItemData } from './DualListSelectorTree';
@@ -38,6 +38,11 @@ export interface DualListSelectorTreeItemProps extends React.HTMLProps<HTMLLIEle
   isDisabled?: boolean;
   /** Flag indicating the DualListSelector tree should utilize memoization to help render large data sets. */
   useMemo?: boolean;
+  /** Flag indicating whether a tree dual list selector has animations. This will always render
+   * nested dual list selector items rather than dynamically rendering them. This prop will be removed in
+   * the next breaking change release in favor of defaulting to always-rendered items.
+   */
+  hasAnimations?: boolean;
 }
 
 const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTreeItemProps> = ({
@@ -53,6 +58,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
   badgeProps,
   itemData,
   isDisabled = false,
+  hasAnimations,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   useMemo,
   ...props
@@ -65,6 +71,15 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
     setIsExpanded(defaultExpanded);
   }, [defaultExpanded]);
 
+  const clonedChildren = Children.map(
+    children,
+    (child) =>
+      isValidElement(child) &&
+      cloneElement(child as React.ReactElement<any>, {
+        inert: isExpanded ? undefined : ''
+      })
+  );
+
   return (
     <li
       className={css(
@@ -156,7 +171,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
           </span>
         </div>
       </div>
-      {isExpanded && children}
+      {(isExpanded || hasAnimations) && clonedChildren}
     </li>
   );
 };

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

@@ -1,6 +1,37 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { DualListSelector } from '../DualListSelector';
 import { DualListSelectorPane } from '../DualListSelectorPane';
 import { SearchInput } from '../../SearchInput';
+
+// The following tests can be removed as part of https://github.com/patternfly/patternfly-react/issues/11838
+describe('Opt-in animations', () => {
+  test(`Does not render with class ${styles.modifiers.animateExpand} by default`, () => {
+    render(<DualListSelector data-testid="test-id" />);
+
+    expect(screen.getByTestId('test-id')).not.toHaveClass(styles.modifiers.animateExpand);
+  });
+
+  test(`Does not render with class ${styles.modifiers.animateExpand} when hasAnimations is true and isTree is false`, () => {
+    render(<DualListSelector hasAnimations data-testid="test-id" />);
+
+    expect(screen.getByTestId('test-id')).not.toHaveClass(styles.modifiers.animateExpand);
+  });
+
+  test(`Does not render with class ${styles.modifiers.animateExpand} by default when isTree is true`, () => {
+    render(<DualListSelector isTree data-testid="test-id" />);
+
+    expect(screen.getByTestId('test-id')).not.toHaveClass(styles.modifiers.animateExpand);
+  });
+
+  test(`Renders with class ${styles.modifiers.animateExpand} when both isTree and hasAnimations are true`, () => {
+    render(<DualListSelector isTree hasAnimations data-testid="test-id" />);
+
+    expect(screen.getByTestId('test-id')).toHaveClass(styles.modifiers.animateExpand);
+  });
+});
+
+// Following tests should be moved to a separate DualListSelectorPane test file
 describe('DualListSelector', () => {
   test('basic', () => {
     const { asFragment } = render(<DualListSelectorPane id="basicTest" />);

package/src/components/DualListSelector/__tests__/DualListSelectorTreeItem.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { DualListSelectorTreeItem } from '../DualListSelectorTreeItem';
+
+// The following tests checking for children to not be/to be rendered will need to be refactored
+// as part of https://github.com/patternfly/patternfly-react/issues/11838
+test('Does not render children by default', () => {
+  render(
+    <DualListSelectorTreeItem id="item-id" text="Test text">
+      <div>Children content</div>
+    </DualListSelectorTreeItem>
+  );
+
+  expect(screen.queryByText('Children content')).not.toBeInTheDocument();
+});
+
+test('Renders children when defaultExpanded is true', () => {
+  render(
+    <DualListSelectorTreeItem defaultExpanded id="item-id" text="Test text">
+      <div>Children content</div>
+    </DualListSelectorTreeItem>
+  );
+
+  expect(screen.getByText('Children content')).toBeVisible();
+});
+
+test('Renders children when hasAnimations is true', () => {
+  render(
+    <DualListSelectorTreeItem hasAnimations id="item-id" text="Test text">
+      <div>Children content</div>
+    </DualListSelectorTreeItem>
+  );
+
+  expect(screen.getByText('Children content')).toBeVisible();
+});
+
+test('Renders children with inert attribute by default when hasAnimations is true', () => {
+  render(
+    <DualListSelectorTreeItem hasAnimations id="item-id" text="Test text">
+      <div>Children content</div>
+    </DualListSelectorTreeItem>
+  );
+
+  expect(screen.getByText('Children content')).toHaveAttribute('inert', '');
+});
+
+test('Does not render children with inert attribute when hasAnimations and defaultExpanded are true', () => {
+  render(
+    <DualListSelectorTreeItem hasAnimations defaultExpanded id="item-id" text="Test text">
+      <div>Children content</div>
+    </DualListSelectorTreeItem>
+  );
+
+  expect(screen.getByText('Children content')).not.toHaveAttribute('inert');
+});

package/src/components/DualListSelector/examples/DualListSelectorTree.tsx

@@ -283,7 +283,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
   };
 
   return (
-    <DualListSelector isTree>
+    <DualListSelector hasAnimations isTree>
       {buildPane(false)}
       <DualListSelectorControlsWrapper>
         <DualListSelectorControl

package/src/components/Form/FormFieldGroupExpandable.tsx

@@ -12,6 +12,11 @@ export interface FormFieldGroupExpandableProps extends Omit<React.HTMLProps<HTML
   isExpanded?: boolean;
   /** Aria-label to use on the form field group toggle button */
   toggleAriaLabel?: string;
+  /** Flag indicating whether an expandable form field group has animations. This will always render
+   * nested field group content rather than dynamically rendering them. This prop will be removed in
+   * the next breaking change release in favor of defaulting to always-rendered items.
+   */
+  hasAnimations?: boolean;
 }
 
 export const FormFieldGroupExpandable: React.FunctionComponent<FormFieldGroupExpandableProps> = ({
@@ -20,6 +25,7 @@ export const FormFieldGroupExpandable: React.FunctionComponent<FormFieldGroupExp
   header,
   isExpanded = false,
   toggleAriaLabel,
+  hasAnimations,
   ...props
 }: FormFieldGroupExpandableProps) => {
   const [localIsExpanded, setIsExpanded] = useState(isExpanded);
@@ -32,6 +38,7 @@ export const FormFieldGroupExpandable: React.FunctionComponent<FormFieldGroupExp
       isExpanded={localIsExpanded}
       toggleAriaLabel={toggleAriaLabel}
       onToggle={() => setIsExpanded(!localIsExpanded)}
+      hasAnimations={hasAnimations}
       {...props}
     >
       {children}

package/src/components/Form/FormGroupLabelHelp.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useRef } from 'react';
 import { Button, ButtonProps } from '../Button';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import { KeyTypes } from '../../helpers/constants';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 
 /** A help button to be passed to the FormGroup's labelHelp property. This should be wrapped or linked
  * to our Popover component.
@@ -45,7 +45,7 @@ const FormGroupLabelHelpBase: React.FunctionComponent<FormGroupLabelHelpProps> =
       variant="plain"
       hasNoPadding
       {...props}
-      icon={<QuestionCircleIcon />}
+      icon={<HelpIcon />}
     />
   );
 };

package/src/components/Form/InternalFormFieldGroup.tsx

@@ -18,6 +18,11 @@ export interface InternalFormFieldGroupProps extends Omit<React.HTMLProps<HTMLDi
   onToggle?: () => void;
   /** Aria-label to use on the form field group toggle button */
   toggleAriaLabel?: string;
+  /** Flag indicating whether an expandable form field group has animations. This will always render
+   * nested field group content rather than dynamically rendering them. This prop will be removed in
+   * the next breaking change release in favor of defaulting to always-rendered items.
+   */
+  hasAnimations?: boolean;
 }
 
 export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGroupProps> = ({
@@ -28,6 +33,7 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
   isExpanded,
   onToggle,
   toggleAriaLabel,
+  hasAnimations,
   ...props
 }: InternalFormFieldGroupProps) => {
   const headerTitleText = header ? header.props.titleText : null;
@@ -40,7 +46,12 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
   }
   return (
     <div
-      className={css(styles.formFieldGroup, isExpanded && isExpandable && styles.modifiers.expanded, className)}
+      className={css(
+        styles.formFieldGroup,
+        isExpanded && isExpandable && styles.modifiers.expanded,
+        hasAnimations && isExpandable && styles.modifiers.expandable,
+        className
+      )}
       role="group"
       {...(headerTitleText && { 'aria-labelledby': `${header.props.titleText.id}` })}
       {...props}
@@ -59,8 +70,13 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
         </GenerateId>
       )}
       {header && header}
-      {(!isExpandable || (isExpandable && isExpanded)) && (
-        <div className={css(styles.formFieldGroupBody)}>{children}</div>
+      {(!isExpandable || (isExpandable && isExpanded) || (hasAnimations && isExpandable)) && (
+        <div
+          className={css(styles.formFieldGroupBody)}
+          {...(hasAnimations && isExpandable && !isExpanded && { inert: '' })}
+        >
+          {children}
+        </div>
       )}
     </div>
   );

package/src/components/Form/__tests__/FormFieldGroupExpandable.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from '@testing-library/react';
+import { FormFieldGroupExpandable } from '../FormFieldGroupExpandable';
+import styles from '@patternfly/react-styles/css/components/Form/form';
+
+test('Does not render children by default', () => {
+  render(<FormFieldGroupExpandable toggleAriaLabel="Toggle label">Child content</FormFieldGroupExpandable>);
+
+  expect(screen.queryByText('Child content')).not.toBeInTheDocument();
+});
+
+test('Renders children when isExpanded is true', () => {
+  render(
+    <FormFieldGroupExpandable isExpanded toggleAriaLabel="Toggle label">
+      Child content
+    </FormFieldGroupExpandable>
+  );
+
+  expect(screen.getByText('Child content')).toBeInTheDocument();
+});
+
+test('Renders children with inert attribute by default when hasAnimations is true', () => {
+  render(
+    <FormFieldGroupExpandable hasAnimations toggleAriaLabel="Toggle label">
+      Child content
+    </FormFieldGroupExpandable>
+  );
+
+  expect(screen.getByText('Child content')).toHaveAttribute('inert', '');
+});
+
+test('Does not render children with inert attribute when hasAnimations and isExpanded are true', () => {
+  render(
+    <FormFieldGroupExpandable hasAnimations isExpanded toggleAriaLabel="Toggle label">
+      Child content
+    </FormFieldGroupExpandable>
+  );
+
+  expect(screen.getByText('Child content')).not.toHaveAttribute('inert');
+});
+
+test(`Does not render with class ${styles.modifiers.expandable} by default`, () => {
+  render(<FormFieldGroupExpandable toggleAriaLabel="Toggle label">Child content</FormFieldGroupExpandable>);
+
+  expect(screen.getByRole('group')).not.toHaveClass(styles.modifiers.expandable);
+});
+
+test(`Renders with class ${styles.modifiers.expandable} when hasAnimations is true`, () => {
+  render(
+    <FormFieldGroupExpandable hasAnimations toggleAriaLabel="Toggle label">
+      Child content
+    </FormFieldGroupExpandable>
+  );
+
+  expect(screen.getByRole('group')).toHaveClass(styles.modifiers.expandable);
+});

package/src/components/Form/examples/FormFieldGroups.tsx

@@ -52,6 +52,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
         <TextInput isRequired id="0-label2" name="0-label2" value={inputValues['0-label2']} onChange={handleChange} />
       </FormGroup>
       <FormFieldGroupExpandable
+        hasAnimations
         isExpanded
         toggleAriaLabel="Details"
         header={
@@ -67,6 +68,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
         }
       >
         <FormFieldGroupExpandable
+          hasAnimations
           isExpanded
           toggleAriaLabel="Details"
           header={
@@ -97,6 +99,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
           </FormGroup>
         </FormFieldGroupExpandable>
         <FormFieldGroupExpandable
+          hasAnimations
           toggleAriaLabel="Details"
           header={
             <FormFieldGroupHeader
@@ -125,6 +128,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
           </FormGroup>
         </FormFieldGroupExpandable>
         <FormFieldGroupExpandable
+          hasAnimations
           toggleAriaLabel="Details"
           header={
             <FormFieldGroupHeader
@@ -173,6 +177,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
         </FormGroup>
       </FormFieldGroupExpandable>
       <FormFieldGroupExpandable
+        hasAnimations
         toggleAriaLabel="Details"
         header={
           <FormFieldGroupHeader
@@ -194,6 +199,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
         </FormGroup>
       </FormFieldGroupExpandable>
       <FormFieldGroupExpandable
+        hasAnimations
         isExpanded
         toggleAriaLabel="Details"
         header={
@@ -273,7 +279,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
         header={
           <FormFieldGroupHeader
             titleText={{ text: 'Field group 4 (non-expandable)', id: 'field-group4-non-expandable-titleText-id' }}
-            titleDescription="Field group 4 description text."
+            titleDescription="Field group 4 description text fdgsdg."
             actions={
               <>
                 <Button variant="link">Delete all</Button> <Button variant="secondary">Add parameter</Button>

package/src/components/LoginPage/examples/LoginPageBasic.tsx

@@ -116,7 +116,7 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
       footerListVariants={ListVariant.inline}
       brandImgSrc={brandImg}
       brandImgAlt="PatternFly logo"
-      backgroundImgSrc="/assets/images/pfbg-icon.svg"
+      backgroundImgSrc="/assets/images/pf-background.svg"
       footerListItems={listItem}
       textContent="This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users."
       loginTitle="Log in to your account"

package/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx

@@ -189,7 +189,7 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
       footerListVariants={ListVariant.inline}
       brandImgSrc={brandImg}
       brandImgAlt="PatternFly logo"
-      backgroundImgSrc="/assets/images/pfbg-icon.svg"
+      backgroundImgSrc="/assets/images/pf-background.svg"
       footerListItems={listItem}
       textContent="This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users."
       loginTitle="Log in to your account"

package/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx

@@ -117,7 +117,7 @@ export const LoginPageHideShowPassword: React.FunctionComponent = () => {
       footerListVariants={ListVariant.inline}
       brandImgSrc={brandImg}
       brandImgAlt="PatternFly logo"
-      backgroundImgSrc="/assets/images/pfbg-icon.svg"
+      backgroundImgSrc="/assets/images/pf-background.svg"
       footerListItems={listItem}
       textContent="This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users."
       loginTitle="Log in to your account"

package/src/components/Nav/NavExpandable.tsx

@@ -141,7 +141,12 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
                 </button>
               )}
             </PageSidebarContext.Consumer>
-            <section className={css(styles.navSubnav)} aria-labelledby={this.id} hidden={expandedState ? null : true}>
+            <section
+              className={css(styles.navSubnav)}
+              aria-labelledby={this.id}
+              hidden={expandedState ? null : true}
+              {...(!expandedState && { inert: '' })}
+            >
               {srText && (
                 <h2 className="pf-v6-screen-reader" id={this.id}>
                   {srText}

package/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap

@@ -39,6 +39,7 @@ exports[`NavExpandable should match snapshot (auto-generated) 1`] = `
       aria-labelledby="''"
       class="pf-v6-c-nav__subnav"
       hidden=""
+      inert=""
     >
       <h2
         class="pf-v6-screen-reader"

package/src/components/Nav/__tests__/NavExpandable.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { NavExpandable } from '../NavExpandable';
+
+test('Renders with the inert attribute by default', () => {
+  render(<NavExpandable id="grp-1" title="NavExpandable"></NavExpandable>);
+
+  expect(screen.getByLabelText('NavExpandable')).toHaveAttribute('inert', '');
+});
+
+test('Does not render with the inert attribute when isExpanded is true', () => {
+  render(<NavExpandable id="grp-1" title="NavExpandable" isExpanded={true}></NavExpandable>);
+
+  expect(screen.getByLabelText('NavExpandable')).not.toHaveAttribute('inert', '');
+});

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

@@ -223,6 +223,7 @@ exports[`Nav Expandable Nav List - Trigger toggle 1`] = `
           aria-labelledby="grp-1"
           class="pf-v6-c-nav__subnav"
           hidden=""
+          inert=""
         >
           <ul
             class="pf-v6-c-nav__list"
@@ -355,6 +356,7 @@ exports[`Nav Expandable Nav List 1`] = `
           aria-labelledby="grp-1"
           class="pf-v6-c-nav__subnav"
           hidden=""
+          inert=""
         >
           <ul
             class="pf-v6-c-nav__list"
@@ -486,6 +488,7 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
           aria-labelledby="grp-1"
           class="pf-v6-c-nav__subnav"
           hidden=""
+          inert=""
         >
           <h2
             class="pf-v6-screen-reader"

package/src/components/Page/examples/Page.md

@@ -8,7 +8,7 @@ propComponents:
 
 import { useState } from 'react';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
+import pageSectionWidthLimitMaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
 
 ## Examples
 

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

@@ -18,8 +18,7 @@ import {
   CardBody
 } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-/* eslint-disable camelcase */
-import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
+import pageSectionWidthLimitMaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
 
 export const PageCenteredSection: React.FunctionComponent = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
@@ -68,11 +67,11 @@ 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
-            <code>{c_page_section_m_limit_width_MaxWidth.name}</code>, the section will be centered in the main section.
+            <code>{pageSectionWidthLimitMaxWidth.name}</code>, the section will be centered in the main section.
             <br />
             <br />
             The content in this example is placed in a card to better illustrate how the section behaves when it is

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