@patternfly/react-core 5.2.0-prerelease.2 → 5.2.0-prerelease.4

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":"5.2.0-prerelease.1","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":"5.2.0-prerelease.3","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":"5.2.0-prerelease.1","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":"5.2.0-prerelease.3","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":"5.2.0-prerelease.1","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":"5.2.0-prerelease.3","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.2.0-prerelease.2",
+  "version": "5.2.0-prerelease.4",
   "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",
@@ -45,9 +45,9 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^5.2.0-prerelease.1",
+    "@patternfly/react-icons": "^5.2.0-prerelease.2",
     "@patternfly/react-styles": "^5.2.0-prerelease.1",
-    "@patternfly/react-tokens": "^5.2.0-prerelease.1",
+    "@patternfly/react-tokens": "^5.2.0-prerelease.2",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "4425a94432f0da5f130d2df8b43222e81324a003"
+  "gitHead": "d3ab21c492302f816f435e8f053adbb1014d283d"
 }

package/src/components/Wizard/Wizard.tsx

@@ -30,6 +30,8 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   footer?: WizardFooterType;
   /** Wizard navigation */
   nav?: WizardNavType;
+  /** Aria-label for the Nav */
+  navAriaLabel?: string;
   /** The initial index the wizard is to start on (1 or higher). Defaults to 1. */
   startIndex?: number;
   /** Additional classes spread to the wizard */
@@ -63,6 +65,7 @@ export const Wizard = ({
   className,
   header,
   nav,
+  navAriaLabel,
   startIndex = 1,
   isVisitRequired = false,
   isProgressive = false,
@@ -176,7 +179,12 @@ export const Wizard = ({
         {...wrapperProps}
       >
         {header}
-        <WizardInternal nav={nav} isVisitRequired={isVisitRequired} isProgressive={isProgressive} />
+        <WizardInternal
+          nav={nav}
+          navAriaLabel={navAriaLabel}
+          isVisitRequired={isVisitRequired}
+          isProgressive={isProgressive}
+        />
       </div>
     </WizardContextProvider>
   );
@@ -184,9 +192,10 @@ export const Wizard = ({
 
 const WizardInternal = ({
   nav,
+  navAriaLabel,
   isVisitRequired,
   isProgressive
-}: Pick<WizardProps, 'nav' | 'isVisitRequired' | 'isProgressive'>) => {
+}: Pick<WizardProps, 'nav' | 'navAriaLabel' | 'isVisitRequired' | 'isProgressive'>) => {
   const { activeStep, steps, footer, goToStepByIndex } = useWizardContext();
   const [isNavExpanded, setIsNavExpanded] = React.useState(false);
 
@@ -198,12 +207,13 @@ const WizardInternal = ({
     return (
       <WizardNavInternal
         nav={nav}
+        navAriaLabel={navAriaLabel}
         isNavExpanded={isNavExpanded}
         isVisitRequired={isVisitRequired}
         isProgressive={isProgressive}
       />
     );
-  }, [activeStep, isVisitRequired, isProgressive, goToStepByIndex, isNavExpanded, nav, steps]);
+  }, [activeStep, isVisitRequired, isProgressive, goToStepByIndex, isNavExpanded, nav, navAriaLabel, steps]);
 
   return (
     <WizardToggle

package/src/components/Wizard/WizardNavInternal.tsx

@@ -7,21 +7,28 @@ import { WizardNav, WizardNavProps } from './WizardNav';
 import { WizardNavItem } from './WizardNavItem';
 
 /**
- * Hosts deafult wizard navigation logic by utilizing the wizard's context and WizardNav/WizardNavItem.
+ * Hosts default wizard navigation logic by utilizing the wizard's context and WizardNav/WizardNavItem.
  * This component is not exposed to consumers.
  */
 
 interface WizardNavInternalProps extends Pick<WizardProps, 'isVisitRequired' | 'isProgressive'> {
   nav: Partial<WizardNavProps>;
+  navAriaLabel: string;
   isNavExpanded: boolean;
 }
 
-export const WizardNavInternal = ({ nav, isVisitRequired, isProgressive, isNavExpanded }: WizardNavInternalProps) => {
+export const WizardNavInternal = ({
+  nav,
+  navAriaLabel,
+  isVisitRequired,
+  isProgressive,
+  isNavExpanded
+}: WizardNavInternalProps) => {
   const { activeStep, steps, goToStepByIndex } = useWizardContext();
 
   const wizardNavProps: WizardNavProps = {
     isExpanded: isNavExpanded,
-    'aria-label': nav?.['aria-label'] || 'Wizard steps',
+    'aria-label': navAriaLabel || nav?.['aria-label'] || 'Wizard steps',
     ...(nav?.['aria-labelledby'] && {
       'aria-labelledby': nav['aria-labelledby']
     })

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

@@ -99,6 +99,18 @@ test('renders default nav with custom props', () => {
   expect(screen.getByRole('button', { name: 'Test step 2' })).toHaveAttribute('disabled');
 });
 
+test('renders nav aria label', () => {
+
+  render(
+    <Wizard navAriaLabel="custom nav aria-label">
+      <WizardStep id="test-step" name="Test step" />
+    </Wizard>
+  );
+  const navElement = screen.getByLabelText('custom nav aria-label');
+
+  expect(navElement).toHaveAttribute('aria-label');
+});
+
 test('renders custom nav', () => {
   const customNav = () => <nav>Some custom nav</nav>;
 

package/src/components/Wizard/examples/Wizard.md

@@ -149,7 +149,7 @@ import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
 Used to access any property of [WizardContext](#wizardcontextprops):
 
 ```noLive
-import { useWizardContext } from '@patternfly/react-core/next';
+import { useWizardContext } from '@patternfly/react-core';
 
 const StepContent = () => {
   const { activeStep } = useWizardContext();
@@ -162,7 +162,7 @@ const StepContent = () => {
 Used to set a unique footer for the wizard on any given step.
 
 ```noLive
-import { useWizardFooter } from '@patternfly/react-core/next';
+import { useWizardFooter } from '@patternfly/react-core';
 
 const StepContent = () => {
   useWizardFooter(<>Some footer</>);