@patternfly/react-core 6.3.1-prerelease.1 → 6.3.1-prerelease.10

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

package/src/components/Label/LabelGroup.tsx

@@ -5,7 +5,7 @@ import { css } from '@patternfly/react-styles';
 import { Button } from '../Button';
 import { Label } from './Label';
 import { Tooltip, TooltipPosition } from '../Tooltip';
-import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import { fillTemplate } from '../../helpers';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 
@@ -205,12 +205,12 @@ class LabelGroup extends Component<LabelGroupProps, LabelGroupState> {
         <div className={css(styles.labelGroupClose)}>
           <Button
             variant="plain"
-            hasNoPadding
+            size="sm"
             aria-label={closeBtnAriaLabel}
             onClick={onClick}
             id={`remove_group_${id}`}
             aria-labelledby={`remove_group_${id} ${id}`}
-            icon={<TimesCircleIcon />}
+            icon={<TimesIcon />}
           />
         </div>
       );

package/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap

@@ -255,7 +255,7 @@ exports[`LabelGroup label group with closable category 1`] = `
       <button
         aria-label="Close label group"
         aria-labelledby="remove_group_generated-id generated-id"
-        class="pf-v6-c-button pf-m-plain pf-m-no-padding"
+        class="pf-v6-c-button pf-m-plain pf-m-small"
         data-ouia-component-id="OUIA-Generated-Button-plain-1"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
@@ -271,11 +271,11 @@ exports[`LabelGroup label group with closable category 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
-            viewBox="0 0 512 512"
+            viewBox="0 0 352 512"
             width="1em"
           >
             <path
-              d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
             />
           </svg>
         </span>

package/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

@@ -50,6 +50,8 @@ export interface MultipleFileUploadStatusItemProps extends React.HTMLProps<HTMLL
   progressAriaLabel?: string;
   /** Associates the progress bar with it's label for accessibility purposes. Required when title not used */
   progressAriaLabelledBy?: string;
+  /** Adds an accessible description to the ProgressBar via space separated list of ids. Required when helperText is passed in. */
+  progressAriaDescribedBy?: string;
   /** Modifies the text announced by assistive technologies when the progress bar updates. */
   progressAriaLiveMessage?: string | ((loadPercentage: number) => string);
   /** Unique identifier for progress. Generated if not specified. */
@@ -74,6 +76,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
   progressVariant,
   progressAriaLabel,
   progressAriaLabelledBy,
+  progressAriaDescribedBy,
   progressId,
   progressAriaLiveMessage,
   buttonAriaLabel = 'Remove from list',
@@ -161,6 +164,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
           variant={variant}
           aria-label={progressAriaLabel}
           aria-labelledby={progressAriaLabelledBy}
+          aria-describedby={progressAriaDescribedBy}
           id={progressId}
           helperText={progressHelperText}
         />

package/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx

@@ -96,11 +96,11 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   };
 
   // add helper text to a status item showing any error encountered during the file reading process
-  const createHelperText = (file: File) => {
+  const createHelperText = (file: File, fileIndex: number) => {
     const fileResult = readFileData.find((readFile) => readFile.fileName === file.name);
     if (fileResult?.loadError) {
       return (
-        <HelperText isLiveRegion>
+        <HelperText id={`multiple-file-upload-basic-example-help-text-${fileIndex}`} isLiveRegion>
           <HelperTextItem variant="error">{fileResult.loadError.toString()}</HelperTextItem>
         </HelperText>
       );
@@ -135,14 +135,15 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
             statusToggleIcon={statusIcon}
             aria-label="Current uploads"
           >
-            {currentFiles.map((file) => (
+            {currentFiles.map((file, index) => (
               <MultipleFileUploadStatusItem
                 file={file}
                 key={file.name}
                 onClearClick={() => removeFiles([file.name])}
                 onReadSuccess={handleReadSuccess}
                 onReadFail={handleReadFail}
-                progressHelperText={createHelperText(file)}
+                progressHelperText={createHelperText(file, index)}
+                progressAriaDescribedBy={`multiple-file-upload-basic-example-help-text-${index}`}
               />
             ))}
           </MultipleFileUploadStatus>

package/src/components/Progress/Progress.tsx

@@ -42,6 +42,8 @@ export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'si
   'aria-label'?: string;
   /** Associates the ProgressBar with it's label for accessibility purposes. Required when title not used */
   'aria-labelledby'?: string;
+  /** Adds an accessible description to the ProgressBar via space separated list of ids. Required when helperText is passed in. */
+  'aria-describedby'?: string;
   /** Content which can be used to convey additional information about the progress component.
    * We recommend the helper text component as it was designed for this purpose.
    */
@@ -65,7 +67,8 @@ class Progress extends Component<ProgressProps> {
     isTitleTruncated: false,
     tooltipPosition: 'top' as 'auto' | 'top' | 'bottom' | 'left' | 'right',
     'aria-label': null as string,
-    'aria-labelledby': null as string
+    'aria-labelledby': null as string,
+    'aria-describedby': null as string
   };
 
   id = this.props.id || getUniqueId();
@@ -89,6 +92,7 @@ class Progress extends Component<ProgressProps> {
       tooltipPosition,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
+      'aria-describedby': ariaDescribedBy,
       helperText,
       ...props
     } = this.props;
@@ -107,6 +111,10 @@ class Progress extends Component<ProgressProps> {
       progressBarAriaProps['aria-label'] = ariaLabel;
     }
 
+    if (ariaDescribedBy) {
+      progressBarAriaProps['aria-describedby'] = ariaDescribedBy;
+    }
+
     if (valueText) {
       progressBarAriaProps['aria-valuetext'] = valueText;
     }

package/src/components/Progress/ProgressBar.tsx

@@ -4,6 +4,7 @@ import { css } from '@patternfly/react-styles';
 export interface AriaProps {
   'aria-labelledby'?: string;
   'aria-label'?: string;
+  'aria-describedby'?: string;
   'aria-valuemin'?: number;
   'aria-valuenow'?: number;
   'aria-valuemax'?: number;
@@ -28,7 +29,7 @@ export const ProgressBar: React.FunctionComponent<ProgressBarProps> = ({
   value,
   ...props
 }: ProgressBarProps) => (
-  <div {...props} className={css(styles.progressBar, className)} {...progressBarAriaProps}>
+  <div role="progressbar" {...props} className={css(styles.progressBar, className)} {...progressBarAriaProps}>
     <div className={css(styles.progressIndicator)} style={{ width: `${value}%` }}>
       <span className={css(styles.progressMeasure)}>{children}</span>
     </div>

package/src/components/Progress/ProgressContainer.tsx

@@ -130,7 +130,7 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
           )}
         </div>
       )}
-      <ProgressBar role="progressbar" progressBarAriaProps={progressBarAriaProps} value={value}>
+      <ProgressBar progressBarAriaProps={progressBarAriaProps} value={value}>
         {measureLocation === ProgressMeasureLocation.inside && `${value}%`}
       </ProgressBar>
       {helperText && <ProgressHelperText>{helperText}</ProgressHelperText>}

package/src/components/Progress/__tests__/Generated/__snapshots__/ProgressBar.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`ProgressBar should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress__bar ''"
+    role="progressbar"
   >
     <div
       class="pf-v6-c-progress__indicator"

package/src/components/Progress/__tests__/ProgressBar.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react';
+import { ProgressBar } from '../ProgressBar';
+
+test('Does not render with aria-describedby by default', () => {
+  render(<ProgressBar value={33} />);
+
+  expect(screen.getByRole('progressbar')).not.toHaveAccessibleDescription();
+});
+
+test('Renders with aria-describedby when progressBarAriaProps is passed in', () => {
+  render(
+    <>
+      <div id="test-id">Test description</div>
+      <ProgressBar value={33} progressBarAriaProps={{ 'aria-describedby': 'test-id' }} />
+    </>
+  );
+
+  expect(screen.getByRole('progressbar')).toHaveAccessibleDescription('Test description');
+});