@patternfly/react-core 6.3.1-prerelease.4 → 6.3.1-prerelease.5

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.3.1-prerelease.3","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.3.1-prerelease.4","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.3.1-prerelease.3","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.3.1-prerelease.4","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.3.1-prerelease.3","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.3.1-prerelease.4","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.3.1-prerelease.4",
+  "version": "6.3.1-prerelease.5",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "f0bf2bc5afde17af6fcee4e790d76f484c5bb4e5"
+  "gitHead": "559712b7e2d3720b833a20caed00a2991f361243"
 }

package/src/components/JumpLinks/JumpLinks.tsx

@@ -7,7 +7,7 @@ import cssToggleDisplayVar from '@patternfly/react-tokens/dist/esm/c_jump_links_
 import { Button } from '../Button';
 import { JumpLinksItem, JumpLinksItemProps } from './JumpLinksItem';
 import { JumpLinksList } from './JumpLinksList';
-import { canUseDOM, formatBreakpointMods } from '../../helpers/util';
+import { canUseDOM, formatBreakpointMods, getUniqueId } from '../../helpers/util';
 
 export interface JumpLinksProps extends Omit<React.HTMLProps<HTMLElement>, 'label'> {
   /** Whether to center children. */
@@ -47,6 +47,8 @@ export interface JumpLinksProps extends Omit<React.HTMLProps<HTMLElement>, 'labe
   className?: string;
   /** Whether the current entry in the navigation history should be replaced when a JumpLinksItem is clicked. By default a new entry will be pushed to the navigation history. */
   shouldReplaceNavHistory?: boolean;
+  /** Custom ID applied to label if alwaysShowLabel is applied, or expandable toggle. This is used for internal logic related to aria-label and aria-labelledby */
+  labelId?: string;
 }
 
 // Recursively find JumpLinkItems and return an array of all their scrollNodes
@@ -94,6 +96,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
   toggleAriaLabel = 'Toggle jump links',
   className,
   shouldReplaceNavHistory = false,
+  labelId,
   ...props
 }: JumpLinksProps) => {
   const hasScrollSpy = Boolean(scrollableRef || scrollableSelector);
@@ -106,6 +109,15 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
 
   let scrollableElement: HTMLElement;
 
+  if (!label && !ariaLabel) {
+    // eslint-disable-next-line no-console
+    console.warn('JumpLinks: for accessibility reasons, an aria-label should be specified if no label is provided');
+  }
+  if (!label && !toggleAriaLabel && expandable) {
+    // eslint-disable-next-line no-console
+    console.warn('JumpLinks: for accessibility reasons, a toggleAriaLabel should be specified if no label is provided');
+  }
+
   const getScrollableElement = () => {
     if (scrollableRef) {
       if (scrollableRef instanceof HTMLElement) {
@@ -232,6 +244,11 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
           return child;
         });
 
+  const id = labelId ?? getUniqueId();
+  const hasAriaLabelledBy = expandable || (label && alwaysShowLabel);
+  const computedAriaLabel = hasAriaLabelledBy ? null : ariaLabel;
+  const computedAriaLabelledBy = hasAriaLabelledBy ? id : null;
+
   return (
     <nav
       className={css(
@@ -242,8 +259,9 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
         isExpanded && styles.modifiers.expanded,
         className
       )}
-      aria-label={ariaLabel}
+      aria-label={computedAriaLabel}
       ref={navRef}
+      aria-labelledby={computedAriaLabelledBy}
       {...props}
     >
       <div className={styles.jumpLinksMain}>
@@ -253,21 +271,31 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
               <Button
                 variant="plain"
                 onClick={() => setIsExpanded(!isExpanded)}
-                aria-label={toggleAriaLabel}
+                aria-label={label ? null : toggleAriaLabel}
                 aria-expanded={isExpanded}
                 icon={
                   <span className={styles.jumpLinksToggleIcon}>
                     <AngleRightIcon />
                   </span>
                 }
+                id={id}
               >
                 {label && label}
               </Button>
             </div>
           )}
-          {label && alwaysShowLabel && <div className={css(styles.jumpLinksLabel)}>{label}</div>}
+          {label && alwaysShowLabel && !expandable && (
+            <div className={css(styles.jumpLinksLabel)} id={id}>
+              {label}
+            </div>
+          )}
         </div>
-        <ul className={styles.jumpLinksList} role="list">
+        <ul
+          aria-label={computedAriaLabel}
+          aria-labelledby={computedAriaLabelledBy}
+          className={styles.jumpLinksList}
+          role="list"
+        >
           {cloneChildren(children)}
         </ul>
       </div>

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

@@ -1,7 +1,10 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { JumpLinks } from '../JumpLinks';
 import { JumpLinksItem } from '../JumpLinksItem';
 import { JumpLinksList } from '../JumpLinksList';
+import * as utils from '../../../helpers/util';
+
+jest.spyOn(utils, 'getUniqueId').mockReturnValue('unique_id_mock');
 
 test('simple jumplinks', () => {
   const { asFragment } = render(
@@ -75,3 +78,195 @@ test('expandable vertical with subsection', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+// Revamped tests begin here
+
+const jumpLinksItems = (
+  <>
+    <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+    <JumpLinksItem href="#" isActive>
+      Active section
+    </JumpLinksItem>
+    <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+  </>
+);
+
+const expandableJumpLinksItems = (
+  <>
+    <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+    <JumpLinksItem href="#">
+      Section with active subsection
+      <JumpLinksList>
+        <JumpLinksItem href="#" isActive>
+          Active subsection
+        </JumpLinksItem>
+        <JumpLinksItem href="#">Inactive subsection</JumpLinksItem>
+        <JumpLinksItem href="#">Inactive subsection</JumpLinksItem>
+      </JumpLinksList>
+    </JumpLinksItem>
+    <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+    <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+  </>
+);
+
+test('renders label be default', () => {
+  render(<JumpLinks label="Jump to section">{jumpLinksItems}</JumpLinks>);
+  expect(screen.getByText(/Jump to section/i)).toBeTruthy();
+});
+
+test('does not render label when alwaysShowLabel is false', () => {
+  render(
+    <JumpLinks label="Jump to section" alwaysShowLabel={false}>
+      {jumpLinksItems}
+    </JumpLinks>
+  );
+  expect(screen.queryByText(/Jump to section/i)).toBeFalsy();
+});
+
+test('uses aria-labelledby over aria-label when label and alwaysShowLabel are passed in', () => {
+  render(<JumpLinks label="Jump to section">{expandableJumpLinksItems}</JumpLinks>);
+  const navigation = screen.getByRole('navigation', { name: /Jump to section/i });
+  expect(navigation).toHaveAttribute('aria-labelledby');
+  expect(navigation).not.toHaveAttribute('aria-label');
+});
+
+test('uses aria-labelledby over aria-label when expandable is passed in', () => {
+  render(<JumpLinks expandable={{ default: 'expandable' }}>{expandableJumpLinksItems}</JumpLinks>);
+  const navigation = screen.getByRole('navigation', { name: /Toggle jump links/i });
+  expect(navigation).toHaveAttribute('aria-labelledby');
+  expect(navigation).not.toHaveAttribute('aria-label');
+});
+
+test('random id is used with aria-labelledby by default in expandable case', () => {
+  render(<JumpLinks expandable={{ default: 'expandable' }}>{expandableJumpLinksItems}</JumpLinks>);
+  const navigation = screen.getByRole('navigation', { name: /Toggle jump links/i });
+  expect(navigation).toHaveAttribute('aria-labelledby', 'unique_id_mock');
+});
+
+test('random id is used with aria-labelledby by default in label case', () => {
+  render(
+    <JumpLinks label="Jump to section" alwaysShowLabel>
+      {expandableJumpLinksItems}
+    </JumpLinks>
+  );
+  const navigation = screen.getByRole('navigation', { name: /Jump to section/i });
+  expect(navigation).toHaveAttribute('aria-labelledby', 'unique_id_mock');
+});
+
+test('custom labelId is used with aria-labelledby when it is passed in in expandable case', () => {
+  render(
+    <JumpLinks labelId="custom-id" expandable={{ default: 'expandable' }}>
+      {expandableJumpLinksItems}
+    </JumpLinks>
+  );
+  const navigation = screen.getByRole('navigation', { name: /Toggle jump links/i });
+  expect(navigation).toHaveAttribute('aria-labelledby', 'custom-id');
+});
+
+test('custom labelId is used with aria-labelledby when it is passed in in label case', () => {
+  render(
+    <JumpLinks label="Jump to section" labelId="custom-id" alwaysShowLabel>
+      {expandableJumpLinksItems}
+    </JumpLinks>
+  );
+  const navigation = screen.getByRole('navigation', { name: /Jump to section/i });
+  expect(navigation).toHaveAttribute('aria-labelledby', 'custom-id');
+});
+
+test('uses aria-label instead of aria-labelledby by default', () => {
+  render(<JumpLinks aria-label="Custom aria label">{jumpLinksItems}</JumpLinks>);
+  const navigation = screen.getByRole('navigation', { name: /Custom aria label/i });
+  expect(navigation).toHaveAttribute('aria-label', 'Custom aria label');
+  expect(navigation).not.toHaveAttribute('aria-labelledby');
+});
+
+test('uses aria-label instead of aria-labelledby when label is provided but alwaysShowLabel is false', () => {
+  render(
+    <JumpLinks label="Jump to section" aria-label="Custom aria label" alwaysShowLabel={false}>
+      {jumpLinksItems}
+    </JumpLinks>
+  );
+  const navigation = screen.getByRole('navigation', { name: /Custom aria label/i });
+  expect(navigation).toHaveAttribute('aria-label', 'Custom aria label');
+  expect(navigation).not.toHaveAttribute('aria-labelledby');
+});
+
+test('aria-labelledby is used with provided labelId even when aria-label is also provided in expandable case', () => {
+  render(
+    <JumpLinks labelId="custom-id" aria-label="Custom aria label" expandable={{ default: 'expandable' }}>
+      {expandableJumpLinksItems}
+    </JumpLinks>
+  );
+  const navigation = screen.getByRole('navigation');
+  expect(navigation).toHaveAttribute('aria-labelledby', 'custom-id');
+  expect(navigation).not.toHaveAttribute('aria-label');
+});
+
+test('aria-labelledby is used with provided labelId even when aria-label is also provided in label case', () => {
+  render(
+    <JumpLinks labelId="custom-id" aria-label="Custom aria label" label="Jump to section">
+      {jumpLinksItems}
+    </JumpLinks>
+  );
+  const navigation = screen.getByRole('navigation');
+  expect(navigation).toHaveAttribute('aria-labelledby', 'custom-id');
+  expect(navigation).not.toHaveAttribute('aria-label');
+});
+
+test('does not throw error when there is a label passed in"', () => {
+  const warnMock = jest.fn() as any;
+  global.console = { warn: warnMock } as any;
+  render(
+    <JumpLinks alwaysShowLabel label="Jump to section">
+      {jumpLinksItems}
+    </JumpLinks>
+  );
+  expect(warnMock).not.toHaveBeenCalled();
+});
+
+test('does not throw error when there is an aria-label passed in"', () => {
+  const warnMock = jest.fn() as any;
+  global.console = { warn: warnMock } as any;
+  render(
+    <JumpLinks alwaysShowLabel aria-label="Jump to section">
+      {jumpLinksItems}
+    </JumpLinks>
+  );
+  expect(warnMock).not.toHaveBeenCalled();
+});
+
+test('throws error when no label or ariaLabel are passed in', () => {
+  const warnMock = jest.fn() as any;
+  global.console = { warn: warnMock } as any;
+  render(<JumpLinks alwaysShowLabel>{jumpLinksItems}</JumpLinks>);
+  expect(warnMock).toHaveBeenCalled();
+});
+
+test('does not throw error when there is a toggleAriaLabel and expandable prop passed in', () => {
+  const warnMock = jest.fn() as any;
+  global.console = { warn: warnMock } as any;
+  render(
+    <JumpLinks label="Jump to section" toggleAriaLabel="Jump to section" expandable={{ default: 'expandable' }}>
+      {expandableJumpLinksItems}
+    </JumpLinks>
+  );
+  expect(warnMock).not.toHaveBeenCalled();
+});
+
+test('does not throw error when there is an aria-label and expandable prop passed in', () => {
+  const warnMock = jest.fn() as any;
+  global.console = { warn: warnMock } as any;
+  render(
+    <JumpLinks aria-label="Jump to section" expandable={{ default: 'expandable' }}>
+      {expandableJumpLinksItems}
+    </JumpLinks>
+  );
+  expect(warnMock).not.toHaveBeenCalled();
+});
+
+test('throws error when there is no toggle aria-label or aria-label but expandable is passed in', () => {
+  const warnMock = jest.fn() as any;
+  global.console = { warn: warnMock } as any;
+  render(<JumpLinks expandable={{ default: 'expandable' }}>{expandableJumpLinksItems}</JumpLinks>);
+  expect(warnMock).toHaveBeenCalled();
+});

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

@@ -3,7 +3,7 @@
 exports[`expandable vertical with subsection 1`] = `
 <DocumentFragment>
   <nav
-    aria-label="Jump to section"
+    aria-labelledby="unique_id_mock"
     class="pf-v6-c-jump-links pf-m-vertical pf-m-expandable"
   >
     <div
@@ -17,11 +17,11 @@ exports[`expandable vertical with subsection 1`] = `
         >
           <button
             aria-expanded="false"
-            aria-label="Toggle jump links"
             class="pf-v6-c-button pf-m-plain"
             data-ouia-component-id="OUIA-Generated-Button-plain-1"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
+            id="unique_id_mock"
             type="button"
           >
             <span
@@ -52,13 +52,9 @@ exports[`expandable vertical with subsection 1`] = `
             </span>
           </button>
         </div>
-        <div
-          class="pf-v6-c-jump-links__label"
-        >
-          Jump to section
-        </div>
       </div>
       <ul
+        aria-labelledby="unique_id_mock"
         class="pf-v6-c-jump-links__list"
         role="list"
       >
@@ -349,7 +345,7 @@ exports[`jumplinks centered 1`] = `
 exports[`jumplinks with label 1`] = `
 <DocumentFragment>
   <nav
-    aria-label="Jump to section"
+    aria-labelledby="unique_id_mock"
     class="pf-v6-c-jump-links pf-m-center"
   >
     <div
@@ -360,11 +356,13 @@ exports[`jumplinks with label 1`] = `
       >
         <div
           class="pf-v6-c-jump-links__label"
+          id="unique_id_mock"
         >
           Jump to section
         </div>
       </div>
       <ul
+        aria-labelledby="unique_id_mock"
         class="pf-v6-c-jump-links__list"
         role="list"
       >
@@ -550,7 +548,7 @@ exports[`simple jumplinks 1`] = `
 exports[`vertical with label 1`] = `
 <DocumentFragment>
   <nav
-    aria-label="Jump to section"
+    aria-labelledby="unique_id_mock"
     class="pf-v6-c-jump-links pf-m-vertical"
   >
     <div
@@ -561,11 +559,13 @@ exports[`vertical with label 1`] = `
       >
         <div
           class="pf-v6-c-jump-links__label"
+          id="unique_id_mock"
         >
           Jump to section
         </div>
       </div>
       <ul
+        aria-labelledby="unique_id_mock"
         class="pf-v6-c-jump-links__list"
         role="list"
       >

package/src/components/JumpLinks/examples/JumpLinksBasic.tsx

@@ -1,7 +1,7 @@
 import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
 
 export const JumpLinksBasic: React.FunctionComponent = () => (
-  <JumpLinks>
+  <JumpLinks aria-label="Jump to basic example sections">
     <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     <JumpLinksItem href="#" isActive>
       Active section

package/src/components/JumpLinks/examples/JumpLinksExpandableVerticalWithSubsection.tsx

@@ -1,11 +1,11 @@
 import { JumpLinks, JumpLinksItem, JumpLinksList } from '@patternfly/react-core';
 
 export const JumpLinksExpandableVerticalWithSubsection: React.FunctionComponent = () => (
-  <JumpLinks isVertical label="Jump to section" expandable={{ default: 'expandable' }}>
+  <JumpLinks isVertical label="Jump to expandable vertical section" expandable={{ default: 'expandable' }}>
     <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     <JumpLinksItem href="#">
       Section with active subsection
-      <JumpLinksList>
+      <JumpLinksList aria-label="Expandable vertical section subsection">
         <JumpLinksItem href="#" isActive>
           Active subsection
         </JumpLinksItem>

package/src/components/JumpLinks/examples/JumpLinksVertical.tsx

@@ -1,7 +1,7 @@
 import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
 
 export const JumpLinksVertical: React.FunctionComponent = () => (
-  <JumpLinks isVertical>
+  <JumpLinks isVertical aria-label="Jump to vertical example sections">
     <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     <JumpLinksItem href="#" isActive>
       Active section

package/src/components/JumpLinks/examples/JumpLinksVerticalWithLabel.tsx

@@ -1,7 +1,7 @@
 import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
 
 export const JumpLinksVerticalWithLabel: React.FunctionComponent = () => (
-  <JumpLinks isVertical label="Jump to section">
+  <JumpLinks isVertical label="Jump to vertical example sections with labels">
     <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     <JumpLinksItem href="#" isActive>
       Active section

package/src/components/JumpLinks/examples/JumpLinksWithCenteredList.tsx

@@ -1,7 +1,7 @@
 import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
 
 export const JumpLinksWithCenteredList: React.FunctionComponent = () => (
-  <JumpLinks isCentered>
+  <JumpLinks isCentered aria-label="Jump to centered example sections">
     <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     <JumpLinksItem href="#" isActive>
       Active section

package/src/components/JumpLinks/examples/JumpLinksWithLabel.tsx

@@ -2,14 +2,14 @@ import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
 
 export const JumpLinksWithLabel: React.FunctionComponent = () => (
   <>
-    <JumpLinks label="Jump to section">
+    <JumpLinks label="Jump to first section in jump links with label example">
       <JumpLinksItem href="#">Inactive section</JumpLinksItem>
       <JumpLinksItem href="#" isActive>
         Active section
       </JumpLinksItem>
       <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     </JumpLinks>
-    <JumpLinks isCentered label="Jump to section">
+    <JumpLinks isCentered label="Jump to second section in jump links with label example">
       <JumpLinksItem href="#">Inactive section</JumpLinksItem>
       <JumpLinksItem href="#" isActive>
         Active section