@patternfly/react-core 4.232.7 → 4.232.10

package/src/components/Page/Page.tsx

@@ -78,7 +78,7 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
    * Can add callback to be notified when resize occurs, for example to set the sidebar isNav prop to false for a width < 768px
    * Returns object { mobileView: boolean, windowSize: number }
    */
-  onPageResize?: (object: any) => void;
+  onPageResize?: ((object: any) => void) | null;
   /**
    * The page resize observer uses the breakpoints returned from this function when adding the pf-m-breakpoint-[default|sm|md|lg|xl|2xl] class
    * You can override the default getBreakpoint function to return breakpoints at different sizes than the default

package/src/components/Page/PageBreadcrumb.tsx

@@ -28,6 +28,8 @@ export interface PageBreadcrumbProps extends React.HTMLProps<HTMLElement> {
   hasShadowBottom?: boolean;
   /** Flag indicating if the PageBreadcrumb has a scrolling overflow */
   hasOverflowScroll?: boolean;
+  /** Adds an accessible name to the breadcrumb section. Required when the hasOverflowScroll prop is set to true. */
+  'aria-label'?: string;
 }
 
 export const PageBreadcrumb = ({
@@ -39,10 +41,18 @@ export const PageBreadcrumb = ({
   hasShadowTop = false,
   hasShadowBottom = false,
   hasOverflowScroll = false,
+  'aria-label': ariaLabel,
   ...props
 }: PageBreadcrumbProps) => {
   const { height, getVerticalBreakpoint } = React.useContext(PageContext);
 
+  React.useEffect(() => {
+    if (hasOverflowScroll && !ariaLabel) {
+      /* eslint-disable no-console */
+      console.warn('PageBreadcrumb: An accessible aria-label is required when hasOverflowScroll is set to true.');
+    }
+  }, [hasOverflowScroll, ariaLabel]);
+
   return (
     <section
       className={css(
@@ -57,6 +67,7 @@ export const PageBreadcrumb = ({
         className
       )}
       {...(hasOverflowScroll && { tabIndex: 0 })}
+      aria-label={ariaLabel}
       {...props}
     >
       {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}

package/src/components/Page/PageGroup.tsx

@@ -25,6 +25,8 @@ export interface PageGroupProps extends React.HTMLProps<HTMLDivElement> {
   hasShadowBottom?: boolean;
   /** Flag indicating if the PageGroup has a scrolling overflow */
   hasOverflowScroll?: boolean;
+  /** Adds an accessible name to the page group. Required when the hasOverflowScroll prop is set to true. */
+  'aria-label'?: string;
 }
 
 export const PageGroup = ({
@@ -35,10 +37,18 @@ export const PageGroup = ({
   hasShadowTop = false,
   hasShadowBottom = false,
   hasOverflowScroll = false,
+  'aria-label': ariaLabel,
   ...props
 }: PageGroupProps) => {
   const { height, getVerticalBreakpoint } = React.useContext(PageContext);
 
+  React.useEffect(() => {
+    if (hasOverflowScroll && !ariaLabel) {
+      /* eslint-disable no-console */
+      console.warn('PageGroup: An accessible aria-label is required when hasOverflowScroll is set to true.');
+    }
+  }, [hasOverflowScroll, ariaLabel]);
+
   return (
     <div
       {...props}
@@ -53,6 +63,7 @@ export const PageGroup = ({
         className
       )}
       {...(hasOverflowScroll && { tabIndex: 0 })}
+      aria-label={ariaLabel}
     >
       {children}
     </div>

package/src/components/Page/PageNavigation.tsx

@@ -28,6 +28,8 @@ export interface PageNavigationProps extends React.HTMLProps<HTMLDivElement> {
   hasShadowBottom?: boolean;
   /** Flag indicating if the PageNavigation has a scrolling overflow */
   hasOverflowScroll?: boolean;
+  /** Adds an accessible name to the page navigation. Required when the hasOverflowScroll prop is set to true. */
+  'aria-label'?: string;
 }
 
 export const PageNavigation = ({
@@ -39,10 +41,18 @@ export const PageNavigation = ({
   hasShadowTop = false,
   hasShadowBottom = false,
   hasOverflowScroll = false,
+  'aria-label': ariaLabel,
   ...props
 }: PageNavigationProps) => {
   const { height, getVerticalBreakpoint } = React.useContext(PageContext);
 
+  React.useEffect(() => {
+    if (hasOverflowScroll && !ariaLabel) {
+      /* eslint-disable no-console */
+      console.warn('PageNavigation: An accessible aria-label is required when hasOverflowScroll is set to true.');
+    }
+  }, [hasOverflowScroll, ariaLabel]);
+
   return (
     <div
       className={css(
@@ -57,6 +67,7 @@ export const PageNavigation = ({
         className
       )}
       {...(hasOverflowScroll && { tabIndex: 0 })}
+      aria-label={ariaLabel}
       {...props}
     >
       {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}

package/src/components/Page/PageSection.tsx

@@ -61,6 +61,10 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
   hasShadowBottom?: boolean;
   /** Flag indicating if the PageSection has a scrolling overflow */
   hasOverflowScroll?: boolean;
+  /** Adds an accessible name to the page section. Required when the hasOverflowScroll prop is set to true.
+   * This prop should also be passed in if a heading is not being used to describe the content of the page section.
+   */
+  'aria-label'?: string;
 }
 
 const variantType = {
@@ -93,10 +97,18 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
   hasShadowTop = false,
   hasShadowBottom = false,
   hasOverflowScroll = false,
+  'aria-label': ariaLabel,
   ...props
 }: PageSectionProps) => {
   const { height, getVerticalBreakpoint } = React.useContext(PageContext);
 
+  React.useEffect(() => {
+    if (hasOverflowScroll && !ariaLabel) {
+      /* eslint-disable no-console */
+      console.warn('PageSection: An accessible aria-label is required when hasOverflowScroll is set to true.');
+    }
+  }, [hasOverflowScroll, ariaLabel]);
+
   return (
     <section
       {...props}
@@ -117,6 +129,7 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
         className
       )}
       {...(hasOverflowScroll && { tabIndex: 0 })}
+      aria-label={ariaLabel}
     >
       {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}
       {!isWidthLimited && children}

package/src/components/Page/__tests__/PageBreadcrumb.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { PageBreadcrumb } from '../PageBreadcrumb';
 
 describe('page breadcrumb', () => {
@@ -31,4 +31,44 @@ describe('page breadcrumb', () => {
     const { asFragment } = render(<PageBreadcrumb hasOverflowScroll>test</PageBreadcrumb>);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('Renders without an aria-label by default', () => {
+    render(<PageBreadcrumb>test</PageBreadcrumb>);
+
+    expect(screen.getByText('test')).not.toHaveAccessibleName('Test label');
+  });
+
+  test('Renders with the passed aria-label applied', () => {
+    render(<PageBreadcrumb aria-label="Test label">test</PageBreadcrumb>);
+
+    expect(screen.getByText('test')).toHaveAccessibleName('Test label');
+  });
+
+  test('Does not log a warning in the console by default', () => {
+    const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+    render(<PageBreadcrumb>test</PageBreadcrumb>);
+
+    expect(consoleWarning).not.toHaveBeenCalled();
+  });
+
+  test('Does not log a warning in the console when an aria-label is included with hasOverflowScroll', () => {
+    const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+    render(
+      <PageBreadcrumb hasOverflowScroll aria-label="Test label">
+        test
+      </PageBreadcrumb>
+    );
+
+    expect(consoleWarning).not.toHaveBeenCalled();
+  });
+
+  test('Logs a warning in the console when an aria-label is not included with hasOverflowScroll', () => {
+    const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+    render(<PageBreadcrumb hasOverflowScroll>test</PageBreadcrumb>);
+
+    expect(consoleWarning).toHaveBeenCalled();
+  });
 });

package/src/components/Page/__tests__/PageGroup.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { PageGroup } from '../PageGroup';
 
 describe('page group', () => {
@@ -27,4 +27,44 @@ describe('page group', () => {
     const { asFragment } = render(<PageGroup hasOverflowScroll>test</PageGroup>);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('Renders without an aria-label by default', () => {
+    render(<PageGroup>test</PageGroup>);
+
+    expect(screen.getByText('test')).not.toHaveAccessibleName('Test label');
+  });
+
+  test('Renders with the passed aria-label applied', () => {
+    render(<PageGroup aria-label="Test label">test</PageGroup>);
+
+    expect(screen.getByText('test')).toHaveAccessibleName('Test label');
+  });
+
+  test('Does not log a warning in the console by default', () => {
+    const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+    render(<PageGroup>test</PageGroup>);
+
+    expect(consoleWarning).not.toHaveBeenCalled();
+  });
+
+  test('Does not log a warning in the console when an aria-label is included with hasOverflowScroll', () => {
+    const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+    render(
+      <PageGroup hasOverflowScroll aria-label="Test label">
+        test
+      </PageGroup>
+    );
+
+    expect(consoleWarning).not.toHaveBeenCalled();
+  });
+
+  test('Logs a warning in the console when an aria-label is not included with hasOverflowScroll', () => {
+    const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+    render(<PageGroup hasOverflowScroll>test</PageGroup>);
+
+    expect(consoleWarning).toHaveBeenCalled();
+  });
 });

package/src/components/Page/__tests__/PageNavigation.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { PageNavigation } from '../PageNavigation';
 
 describe('page navigation', () => {
@@ -31,4 +31,44 @@ describe('page navigation', () => {
     const { asFragment } = render(<PageNavigation hasOverflowScroll>test</PageNavigation>);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('Renders without an aria-label by default', () => {
+    render(<PageNavigation>test</PageNavigation>);
+
+    expect(screen.getByText('test')).not.toHaveAccessibleName('Test label');
+  });
+
+  test('Renders with the passed aria-label applied', () => {
+    render(<PageNavigation aria-label="Test label">test</PageNavigation>);
+
+    expect(screen.getByText('test')).toHaveAccessibleName('Test label');
+  });
+
+  test('Does not log a warning in the console by default', () => {
+    const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+    render(<PageNavigation>test</PageNavigation>);
+
+    expect(consoleWarning).not.toHaveBeenCalled();
+  });
+
+  test('Does not log a warning in the console when an aria-label is included with hasOverflowScroll', () => {
+    const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+    render(
+      <PageNavigation hasOverflowScroll aria-label="Test label">
+        test
+      </PageNavigation>
+    );
+
+    expect(consoleWarning).not.toHaveBeenCalled();
+  });
+
+  test('Logs a warning in the console when an aria-label is not included with hasOverflowScroll', () => {
+    const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+    render(<PageNavigation hasOverflowScroll>test</PageNavigation>);
+
+    expect(consoleWarning).toHaveBeenCalled();
+  });
 });

package/src/components/Page/__tests__/PageSection.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { PageSection, PageSectionTypes } from '../PageSection';
 
 jest.mock('../Page');
@@ -88,3 +88,43 @@ test('Verify page section overflow scroll', () => {
   const { asFragment } = render(<PageSection hasOverflowScroll>test</PageSection>);
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Renders without an aria-label by default', () => {
+  render(<PageSection>test</PageSection>);
+
+  expect(screen.getByText('test')).not.toHaveAccessibleName('Test label');
+});
+
+test('Renders with the passed aria-label applied', () => {
+  render(<PageSection aria-label="Test label">test</PageSection>);
+
+  expect(screen.getByText('test')).toHaveAccessibleName('Test label');
+});
+
+test('Does not log a warning in the console by default', () => {
+  const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+  render(<PageSection>test</PageSection>);
+
+  expect(consoleWarning).not.toHaveBeenCalled();
+});
+
+test('Does not log a warning in the console when an aria-label is included with hasOverflowScroll', () => {
+  const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+  render(
+    <PageSection hasOverflowScroll aria-label="Test label">
+      test
+    </PageSection>
+  );
+
+  expect(consoleWarning).not.toHaveBeenCalled();
+});
+
+test('Logs a warning in the console when an aria-label is not included with hasOverflowScroll', () => {
+  const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+  render(<PageSection hasOverflowScroll>test</PageSection>);
+
+  expect(consoleWarning).toHaveBeenCalled();
+});