@patternfly/react-core 4.202.28 → 4.202.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.202.28",
+  "version": "4.202.29",
   "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",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.53.28",
-    "@patternfly/react-styles": "^4.52.28",
-    "@patternfly/react-tokens": "^4.54.28",
+    "@patternfly/react-icons": "^4.53.29",
+    "@patternfly/react-styles": "^4.52.29",
+    "@patternfly/react-tokens": "^4.54.29",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "fc8f50299dd98fc0901fcece0cd391d94db26898"
+  "gitHead": "366d09fa7e0ef107242d13b0b2c850eb3d33703f"
 }

package/src/components/ExpandableSection/examples/ExpandableSection.md

@@ -177,4 +177,4 @@ class SimpleExpandableSection extends React.Component {
     );
   }
 }
-```
+```

package/src/components/JumpLinks/JumpLinksItem.tsx

@@ -33,7 +33,11 @@ export const JumpLinksItem: React.FunctionComponent<JumpLinksItemProps> = ({
   children = childrenArr.filter(child => child.type !== JumpLinksList);
 
   return (
-    <li className={css(styles.jumpLinksItem, isActive && styles.modifiers.current, className)} {...props}>
+    <li
+      className={css(styles.jumpLinksItem, isActive && styles.modifiers.current, className)}
+      {...(isActive && { 'aria-current': 'location' })}
+      {...props}
+    >
       <a className={styles.jumpLinksLink} href={href} onClick={onClick}>
         <span className={styles.jumpLinksLinkText}>{children}</span>
       </a>

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

@@ -89,6 +89,7 @@ exports[`expandable vertical with subsection 1`] = `
             class="pf-c-jump-links__list"
           >
             <li
+              aria-current="location"
               class="pf-c-jump-links__item pf-m-current"
             >
               <a
@@ -189,6 +190,7 @@ exports[`jumplinks centered 1`] = `
           </a>
         </li>
         <li
+          aria-current="location"
           class="pf-c-jump-links__item pf-m-current"
         >
           <a
@@ -255,6 +257,7 @@ exports[`jumplinks with label 1`] = `
           </a>
         </li>
         <li
+          aria-current="location"
           class="pf-c-jump-links__item pf-m-current"
         >
           <a
@@ -314,6 +317,7 @@ exports[`simple jumplinks 1`] = `
           </a>
         </li>
         <li
+          aria-current="location"
           class="pf-c-jump-links__item pf-m-current"
         >
           <a
@@ -380,6 +384,7 @@ exports[`vertical with label 1`] = `
           </a>
         </li>
         <li
+          aria-current="location"
           class="pf-c-jump-links__item pf-m-current"
         >
           <a

package/src/components/ProgressStepper/ProgressStep.tsx

@@ -26,6 +26,9 @@ export interface ProgressStepProps
   popover?: React.ReactNode;
   /** @hide Forwarded reference to title container */
   innerRef?: React.Ref<any>;
+  /** Accessible label for the progress step. Should communicate all information being communicated by the progress
+   * step's icon, including the variant and the completed status. */
+  'aria-label'?: string;
 }
 
 const variantIcons = {
@@ -56,6 +59,7 @@ const ProgressStepBase: React.FunctionComponent<ProgressStepProps> = ({
   titleId,
   popover,
   innerRef,
+  'aria-label': ariaLabel,
   ...props
 }: ProgressStepProps) => {
   const _icon = icon !== undefined ? icon : variantIcons[variant];
@@ -76,6 +80,8 @@ const ProgressStepBase: React.FunctionComponent<ProgressStepProps> = ({
         isCurrent && styles.modifiers.current,
         className
       )}
+      aria-label={ariaLabel}
+      {...(isCurrent && { 'aria-current': 'step' })}
       {...props}
     >
       <div className={css(styles.progressStepperStepConnector)}>

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

@@ -28,6 +28,7 @@ exports[`ProgressStep renders content 1`] = `
 exports[`ProgressStep renders current 1`] = `
 <div>
   <li
+    aria-current="step"
     class="pf-c-progress-stepper__step pf-m-current"
   >
     <div

package/src/components/ProgressStepper/examples/ProgressStepper.md

@@ -33,7 +33,7 @@ import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
     isCurrent
     id="basic-step2"
     titleId="basic-step2-title"
-    aria-label="current step, step with info"
+    aria-label="step with info"
   >
     Second step
   </ProgressStep>
@@ -65,7 +65,7 @@ import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
     description="This is the second thing to happen"
     id="basic-desc-step2"
     titleId="basic-desc-step2-title"
-    aria-label="current step, step with info"
+    aria-label="step with info"
   >
     Second step
   </ProgressStep>
@@ -103,7 +103,7 @@ import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
     description="This is the second thing to happen"
     id="center-desc-step2"
     titleId="center-desc-step2-title"
-    aria-label="current step, step with info"
+    aria-label="step with info"
   >
     Second step
   </ProgressStep>
@@ -141,7 +141,7 @@ import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
     description="This is the second thing to happen"
     id="vertical-desc-step2"
     titleId="vertical-desc-step2-title"
-    aria-label="current step, step with info"
+    aria-label="step with info"
   >
     Second step
   </ProgressStep>
@@ -179,7 +179,7 @@ import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
     isCurrent
     id="compact-step2"
     titleId="compact-step2-title"
-    aria-label="current step, step with info"
+    aria-label="step with info"
   >
     Second step
   </ProgressStep>
@@ -225,7 +225,7 @@ import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
     isCurrent
     id="basic-with-issue-step4"
     titleId="basic-with-issue-step4-title"
-    aria-label="current step, step with info"
+    aria-label="step with info"
   >
     Fourth step
   </ProgressStep>
@@ -276,7 +276,7 @@ import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
     isCurrent
     id="basic-with-failure-step4"
     titleId="basic-with-failure-step4-title"
-    aria-label="current step, step with danger"
+    aria-label="step with danger"
   >
     Fourth step
   </ProgressStep>
@@ -313,7 +313,7 @@ import PendingIcon from '@patternfly/react-icons/dist/esm/icons/pending-icon';
     icon={<InProgressIcon />}
     id="custom-step2"
     titleId="custom-step2-title"
-    aria-label="current step"
+    aria-label="in progress"
   >
     In process
   </ProgressStep>
@@ -384,7 +384,7 @@ PopoverProgressStep = () => {
         variant="info"
         id="popover-step3"
         titleId="popover-step3-title"
-        aria-label="current step with popover"
+        aria-label="step with popover"
         popover={
           <Popover
             aria-label="Third step help"

package/src/components/Tabs/Tab.tsx

@@ -92,6 +92,8 @@ const TabBase: React.FunctionComponent<TabProps> = ({
       tabContentRef={tabContentRef}
       ouiaId={childOuiaId}
       href={href}
+      role="tab"
+      aria-selected={eventKey === localActiveKey}
       {...props}
     >
       {title}
@@ -99,7 +101,10 @@ const TabBase: React.FunctionComponent<TabProps> = ({
   );
 
   return (
-    <li className={css(styles.tabsItem, eventKey === localActiveKey && styles.modifiers.current, childClassName)}>
+    <li
+      className={css(styles.tabsItem, eventKey === localActiveKey && styles.modifiers.current, childClassName)}
+      role="presentation"
+    >
       {tooltip ? <Tooltip {...tooltip.props}>{tabButton}</Tooltip> : tabButton}
     </li>
   );

package/src/components/Tabs/Tabs.tsx

@@ -79,7 +79,7 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   defaultIsExpanded?: boolean;
   /** Text that appears in the expandable toggle */
   toggleText?: string;
-  /** Aria-label for the left expandable toggle */
+  /** Aria-label for the expandable toggle */
   toggleAriaLabel?: string;
   /** Callback function to toggle the expandable tabs. */
   onToggle?: (isExpanded: boolean) => void;
@@ -400,7 +400,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
           >
             <AngleLeftIcon />
           </button>
-          <ul className={css(styles.tabsList)} ref={this.tabList} onScroll={this.handleScrollButtons}>
+          <ul className={css(styles.tabsList)} ref={this.tabList} onScroll={this.handleScrollButtons} role="tablist">
             {filteredChildren}
           </ul>
           <button

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

@@ -32,6 +32,7 @@ exports[`Tabs should match snapshot (auto-generated) 1`] = `
     </button>
     <ul
       class="pf-c-tabs__list"
+      role="tablist"
     >
       <div>
         ReactNode

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

@@ -4,13 +4,16 @@ exports[`should not render anything 1`] = `
 <div>
   <li
     class="pf-c-tabs__item"
+    role="presentation"
   >
     <button
       aria-controls="pf-tab-section-0-"
+      aria-selected="false"
       class="pf-c-tabs__link"
       data-ouia-component-type="PF4/TabButton"
       data-ouia-safe="true"
       id="pf-tab-0-"
+      role="tab"
     >
       <span
         class="pf-c-tabs__item-text"