@patternfly/react-core 4.202.26 → 4.202.29

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"