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

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

@@ -4,11 +4,12 @@ exports[`should render accessible tabs 1`] = `
 <DocumentFragment>
   <nav
     aria-label="accessible Tabs example"
-    class="pf-v6-c-tabs"
-    data-ouia-component-id="OUIA-Generated-Tabs-9"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-12"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="accessibleTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -120,11 +121,12 @@ exports[`should render accessible tabs 1`] = `
 exports[`should render box tabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs pf-m-box"
-    data-ouia-component-id="OUIA-Generated-Tabs-8"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-11"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="boxTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -278,11 +280,12 @@ exports[`should render box tabs 1`] = `
 exports[`should render box tabs of secondary variant 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs pf-m-box pf-m-secondary"
-    data-ouia-component-id="OUIA-Generated-Tabs-15"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-secondary pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-18"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="boxSecondaryVariantTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -394,11 +397,12 @@ exports[`should render box tabs of secondary variant 1`] = `
 exports[`should render expandable vertical tabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs pf-m-vertical pf-m-expandable"
-    data-ouia-component-id="OUIA-Generated-Tabs-6"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-expandable pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-9"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <div
       class="pf-v6-c-tabs__toggle"
@@ -600,11 +604,12 @@ exports[`should render expandable vertical tabs 1`] = `
 exports[`should render filled tabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs pf-m-fill"
-    data-ouia-component-id="OUIA-Generated-Tabs-10"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-fill pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-13"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="filledTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -716,11 +721,12 @@ exports[`should render filled tabs 1`] = `
 exports[`should render simple tabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs"
-    data-ouia-component-id="OUIA-Generated-Tabs-1"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-4"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="simpleTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -874,11 +880,12 @@ exports[`should render simple tabs 1`] = `
 exports[`should render subtabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs"
-    data-ouia-component-id="OUIA-Generated-Tabs-11"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-14"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="primarieTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -959,11 +966,12 @@ exports[`should render subtabs 1`] = `
     tabindex="0"
   >
     <div
-      class="pf-v6-c-tabs pf-m-subtab"
-      data-ouia-component-id="OUIA-Generated-Tabs-12"
+      class="pf-v6-c-tabs pf-m-animate-current pf-m-subtab pf-m-initializing-accent"
+      data-ouia-component-id="OUIA-Generated-Tabs-15"
       data-ouia-component-type="PF6/Tabs"
       data-ouia-safe="true"
       id="subtabs"
+      style="--pf-v6-c-tabs--link-accent--length: 0; --pf-v6-c-tabs--link-accent--start: 0;"
     >
       <ul
         class="pf-v6-c-tabs__list"
@@ -1101,11 +1109,12 @@ exports[`should render subtabs 1`] = `
 exports[`should render tabs with eventKey Strings 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs"
-    data-ouia-component-id="OUIA-Generated-Tabs-13"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-16"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="eventKeyTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0; --pf-v6-c-tabs--link-accent--start: 0;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -1218,11 +1227,12 @@ exports[`should render tabs with eventKey Strings 1`] = `
 exports[`should render tabs with no bottom border 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs pf-m-no-border-bottom"
-    data-ouia-component-id="OUIA-Generated-Tabs-16"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-no-border-bottom pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-19"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="noBottomBorderTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -1334,11 +1344,12 @@ exports[`should render tabs with no bottom border 1`] = `
 exports[`should render tabs with separate content 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs"
-    data-ouia-component-id="OUIA-Generated-Tabs-14"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-17"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="separateTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -1460,10 +1471,11 @@ exports[`should render tabs with separate content 1`] = `
 exports[`should render uncontrolled tabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs"
-    data-ouia-component-id="OUIA-Generated-Tabs-4"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-7"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -1617,11 +1629,12 @@ exports[`should render uncontrolled tabs 1`] = `
 exports[`should render vertical tabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs pf-m-vertical"
-    data-ouia-component-id="OUIA-Generated-Tabs-5"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-8"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"

package/src/components/Tabs/examples/Tabs.md

@@ -2,7 +2,7 @@
 id: Tabs
 section: components
 cssPrefix: pf-v6-c-tabs
-propComponents: ['Tabs', 'Tab', 'TabContent', 'TabContentBody', 'TabTitleText', 'TabTitleIcon', 'horizontalOverflowObject', 'TabAction']
+propComponents: ['Tabs', 'Tab', 'TabContent', 'TabContentBody', 'TabTitleText', 'TabTitleIcon', 'HorizontalOverflowObject', 'HorizontalOverflowPopperProps', 'TabAction']
 ouia: true
 ---
 

package/src/components/Timestamp/examples/TimestampBasicFormats.tsx

@@ -1,7 +1,7 @@
 import { Timestamp, TimestampFormat } from '@patternfly/react-core';
 
 export const TimestampBasicFormats: React.FunctionComponent = () => {
-  const currentDate = new Date();
+  const currentDate = new Date('2025-04-21T23:35:25');
 
   return (
     <>

package/src/components/Timestamp/examples/TimestampDefaultTooltip.tsx

@@ -1,7 +1,7 @@
 import { Timestamp, TimestampTooltipVariant } from '@patternfly/react-core';
 
 export const TimestampDefaultTooltip: React.FunctionComponent = () => {
-  const currentDate = new Date();
+  const currentDate = new Date('2025-04-21T14:30:00');
 
   return (
     <>

package/src/components/TreeView/TreeViewListItem.tsx

@@ -186,9 +186,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
     <>
       {hasBadge && children && (
         <span className={css(styles.treeViewNodeCount)}>
-          <Badge {...badgeProps}>
-            {customBadgeContent ? customBadgeContent : (children as React.ReactElement<any>).props.data.length}
-          </Badge>
+          <Badge {...badgeProps}>{customBadgeContent ?? (children as React.ReactElement<any>).props.data.length}</Badge>
         </span>
       )}
       {hasBadge && !children && customBadgeContent !== undefined && (

package/src/components/TreeView/__tests__/TreeViewListItem.test.tsx

@@ -264,6 +264,16 @@ test('Renders badge with customBadgeContent when hasBadge and children are passe
   expect(screen.getByText(requiredProps.name).nextElementSibling).toHaveTextContent('Custom badge');
 });
 
+test('Renders badge with customBadgeContent being number 0 when hasBadge and children are passed', () => {
+  render(
+    <TreeViewListItem hasBadge customBadgeContent={0} {...requiredProps}>
+      <TreeView data={[{ name: 'Parent name 1' }, { name: 'Parent name 2' }]} />
+    </TreeViewListItem>
+  );
+
+  expect(screen.getByText(requiredProps.name).nextElementSibling).toHaveTextContent('0');
+});
+
 test('Renders badge with customBadgeContent when hasBadge is passed and children are not passed', () => {
   render(<TreeViewListItem hasBadge customBadgeContent="Custom badge" {...requiredProps} />);
 

package/src/components/Truncate/Truncate.tsx

@@ -1,7 +1,8 @@
-import { Fragment, useEffect, useRef, useState } from 'react';
+import { Fragment, useEffect, useRef, useState, forwardRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Truncate/truncate';
 import { css } from '@patternfly/react-styles';
-import { Tooltip, TooltipPosition } from '../Tooltip';
+import { Tooltip, TooltipPosition, TooltipProps } from '../Tooltip';
+import { getReferenceElement } from '../../helpers';
 import { getResizeObserver } from '../../helpers/resizeObserver';
 
 export enum TruncatePosition {
@@ -17,11 +18,15 @@ const truncateStyles = {
 
 const minWidthCharacters: number = 12;
 
-export interface TruncateProps extends React.HTMLProps<HTMLSpanElement> {
+export interface TruncateProps extends Omit<React.HTMLProps<HTMLSpanElement | HTMLAnchorElement>, 'ref'> {
   /** Class to add to outer span */
   className?: string;
   /** Text to truncate */
   content: string;
+  /** An HREF to turn the truncate wrapper into an anchor element. For more custom control, use the
+   * tooltipProps with a triggerRef property passed in.
+   */
+  href?: string;
   /** The number of characters displayed in the second half of a middle truncation. This will be overridden by
    * the maxCharsDisplayed prop.
    */
@@ -52,24 +57,24 @@ export interface TruncateProps extends React.HTMLProps<HTMLSpanElement> {
     | 'left-end'
     | 'right-start'
     | 'right-end';
-  /** @hide The element whose parent to reference when calculating whether truncation should occur. This must be an ancestor
-   * of the ClipboardCopy, and must have a valid width value. For internal use only, do not use as it is not part of the public API
-   * and is subject to change.
-   */
-  refToGetParent?: React.RefObject<any>;
+  /** Additional props to pass to the tooltip. */
+  tooltipProps?: Omit<TooltipProps, 'content'>;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<any>;
 }
 
 const sliceTrailingContent = (str: string, slice: number) => [str.slice(0, str.length - slice), str.slice(-slice)];
 
-export const Truncate: React.FunctionComponent<TruncateProps> = ({
+const TruncateBase: React.FunctionComponent<TruncateProps> = ({
   className,
+  href,
   position = 'end',
   tooltipPosition = 'top',
+  tooltipProps,
   trailingNumChars = 7,
   maxCharsDisplayed,
   omissionContent = '\u2026',
   content,
-  refToGetParent,
   ...props
 }: TruncateProps) => {
   const [isTruncated, setIsTruncated] = useState(true);
@@ -78,7 +83,8 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
   const [shouldRenderByMaxChars, setShouldRenderByMaxChars] = useState(maxCharsDisplayed > 0);
 
   const textRef = useRef<HTMLElement>(null);
-  const subParentRef = useRef<HTMLDivElement>(null);
+  const defaultSubParentRef = useRef<any>(null);
+  const subParentRef = tooltipProps?.triggerRef || defaultSubParentRef;
   const observer = useRef(null);
 
   if (maxCharsDisplayed <= 0) {
@@ -108,11 +114,14 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
     if (textRef && textRef.current && !textElement) {
       setTextElement(textRef.current);
     }
+  }, [textRef, textElement]);
 
-    if ((refToGetParent?.current || (subParentRef?.current && subParentRef.current.parentElement)) && !parentElement) {
-      setParentElement(refToGetParent?.current.parentElement || subParentRef?.current.parentElement);
+  useEffect(() => {
+    const refElement = getReferenceElement(subParentRef);
+    if (refElement?.parentElement && !parentElement) {
+      setParentElement(refElement.parentElement);
     }
-  }, [textRef, subParentRef, textElement, parentElement]);
+  }, [subParentRef, parentElement]);
 
   useEffect(() => {
     if (textElement && parentElement && !observer.current && !shouldRenderByMaxChars) {
@@ -142,13 +151,18 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
     setShouldRenderByMaxChars(maxCharsDisplayed > 0);
   }, [maxCharsDisplayed]);
 
+  const lrmEntity = <Fragment>&lrm;</Fragment>;
+  const isStartPosition = position === TruncatePosition.start;
+  const isEndPosition = position === TruncatePosition.end;
+
   const renderResizeObserverContent = () => {
-    if (position === TruncatePosition.end || position === TruncatePosition.start) {
+    if (isEndPosition || isStartPosition) {
       return (
         <>
           <span ref={textRef} className={truncateStyles[position]}>
+            {isStartPosition && lrmEntity}
             {content}
-            {position === TruncatePosition.start && <Fragment>&lrm;</Fragment>}
+            {isStartPosition && lrmEntity}
           </span>
         </>
       );
@@ -195,7 +209,7 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
         </>
       );
     }
-    if (position === TruncatePosition.end) {
+    if (isEndPosition) {
       return (
         <>
           {renderVisibleContent(content.slice(0, maxCharsDisplayed))}
@@ -217,25 +231,37 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
     );
   };
 
+  const TruncateWrapper = href ? 'a' : 'span';
   const truncateBody = (
-    <span
-      ref={subParentRef}
+    <TruncateWrapper
+      ref={!tooltipProps?.triggerRef ? (subParentRef as React.MutableRefObject<any>) : null}
+      href={href}
       className={css(styles.truncate, shouldRenderByMaxChars && styles.modifiers.fixed, className)}
-      {...(isTruncated && { tabIndex: 0 })}
+      {...(isTruncated && !href && !tooltipProps?.triggerRef && { tabIndex: 0 })}
       {...props}
     >
       {!shouldRenderByMaxChars ? renderResizeObserverContent() : renderMaxDisplayContent()}
-    </span>
+    </TruncateWrapper>
   );
 
   return (
     <>
       {isTruncated && (
-        <Tooltip hidden={!isTruncated} position={tooltipPosition} content={content} triggerRef={subParentRef} />
+        <Tooltip
+          hidden={!isTruncated}
+          position={tooltipPosition}
+          content={content}
+          triggerRef={subParentRef}
+          {...tooltipProps}
+        />
       )}
       {truncateBody}
     </>
   );
 };
 
+export const Truncate = forwardRef((props: TruncateProps, ref: React.Ref<HTMLAnchorElement | HTMLSpanElement>) => (
+  <TruncateBase innerRef={ref} {...props} />
+));
+
 Truncate.displayName = 'Truncate';

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

@@ -1,5 +1,5 @@
 import { render, screen, within } from '@testing-library/react';
-import { Truncate } from '../Truncate';
+import { Truncate, TruncatePosition } from '../Truncate';
 import styles from '@patternfly/react-styles/css/components/Truncate/truncate';
 import '@testing-library/jest-dom';
 
@@ -19,6 +19,24 @@ global.ResizeObserver = jest.fn().mockImplementation(() => ({
   disconnect: jest.fn()
 }));
 
+test('Renders with span wrapper by default', () => {
+  render(<Truncate content={''} data-testid="test-id" />);
+
+  expect(screen.getByTestId('test-id').tagName).toBe('SPAN');
+});
+
+test('Renders with anchor wrapper when href prop is passed', () => {
+  render(<Truncate content={'Link content'} href="#" />);
+
+  expect(screen.getByRole('link')).toHaveTextContent('Link content');
+});
+
+test('Passes href to anchor when href prop is passed', () => {
+  render(<Truncate content={'Link content'} href="#home" />);
+
+  expect(screen.getByRole('link')).toHaveAttribute('href', '#home');
+});
+
 test(`renders with class ${styles.truncate}`, () => {
   render(<Truncate content={''} aria-label="test-id" />);
 
@@ -67,7 +85,9 @@ test('renders default truncation', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('renders start truncation with &lrm; at end', () => {
+// If this snapshot fails and the output text doesn't seem like it's changed, it most likely
+// is due to the &lrm; HTML entity isn't rendering correctly.
+test('renders start truncation with &lrm; at start and end', () => {
   const { asFragment } = render(
     <Truncate
       content={'Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.'}
@@ -143,6 +163,12 @@ test('renders tooltip content', () => {
   expect(input).toBeVisible();
 });
 
+test('Renders with additional tooltip props spread', () => {
+  render(<Truncate content={''} tooltipProps={{ distance: 32 }} />);
+
+  expect(screen.getByTestId('Tooltip-mock')).toHaveAttribute('distance', '32');
+});
+
 test('renders with inherited element props spread to the component', () => {
   render(<Truncate content={'Test'} data-testid="test-id" aria-label="labelling-id" />);
 

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

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

package/src/components/Truncate/examples/Truncate.md

@@ -52,3 +52,11 @@ Truncating based on a maximum amount of characters will truncate the content at
 ```ts file="./TruncateMaxChars.tsx"
 
 ```
+
+### With links
+
+To truncate link text, you can pass the `href` property in.
+
+```ts file="./TruncateLinks.tsx"
+
+```

package/src/components/Truncate/examples/TruncateLinks.tsx

@@ -0,0 +1,22 @@
+import { Truncate } from '@patternfly/react-core';
+
+export const TruncateLinks: React.FunctionComponent = () => {
+  const content = 'A very lengthy anchor text content to trigger truncation';
+  return (
+    <>
+      <div>With default width-observing truncation:</div>
+      <div className="truncate-example-resize">
+        <Truncate href="#" content={content} />
+        <Truncate position="start" href="#" content={content} />
+        <Truncate position="middle" href="#" content={content} />
+      </div>
+      <br />
+      <div>With max characters truncation:</div>
+      <Truncate maxCharsDisplayed={15} href="#" content={content} />
+      <br />
+      <Truncate maxCharsDisplayed={15} position="start" href="#" content={content} />
+      <br />
+      <Truncate maxCharsDisplayed={15} position="middle" href="#" content={content} />
+    </>
+  );
+};

package/src/demos/Banner.md

@@ -39,16 +39,16 @@ class BannerDemo extends React.Component {
     return (
       <Fragment>
         <DashboardWrapper banner={banner} breadcrumb={null}>
-          <PageSection>
+          <PageSection aria-labelledby="main-title">
             <Content>
-              <h1>Main title</h1>
+              <h1 id="main-title">Main title</h1>
               <p>
                 Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
                 of it’s relative line height of 1.5.
               </p>
             </Content>
           </PageSection>
-          <PageSection>
+          <PageSection aria-label='Cards gallery'>
             <Gallery hasGutter>
               {Array.from({ length: 30 }).map((_value, index) => (
                 <GalleryItem key={index}>
@@ -112,9 +112,9 @@ class BannerDemo extends React.Component {
           </FlexItem>
           <FlexItem grow={{ default: 'grow' }} style={{ minHeight: 0 }}>
             <DashboardWrapper breadcrumb={null}>
-              <PageSection>
+              <PageSection aria-labelledby="main-title">
                 <Content>
-                  <h1>Main title</h1>
+                  <h1 id='main-title'>Main title</h1>
                   <p>
                     Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because{' '}
                     <br />
@@ -122,7 +122,7 @@ class BannerDemo extends React.Component {
                   </p>
                 </Content>
               </PageSection>
-              <PageSection>
+              <PageSection aria-label='Cards gallery'>
                 <Gallery hasGutter>
                   {Array.from({ length: 30 }).map((_value, index) => (
                     <GalleryItem key={index}>

package/src/demos/CardDemos.md

@@ -14,7 +14,7 @@ import chart_color_yellow_100 from '@patternfly/react-tokens/dist/esm/chart_colo
 import chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300';
 import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300';
 import chart_color_red_orange_400 from '@patternfly/react-tokens/dist/esm/chart_color_red_orange_400';
-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';
 import t_global_text_color_subtle from '@patternfly/react-tokens/dist/esm/t_global_text_color_subtle';
 import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
 import text from '@patternfly/react-styles/css/utilities/Text/text';

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>