@patternfly/react-core 6.2.1-prerelease.4 → 6.2.1-prerelease.6

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.2.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.2.1-prerelease.5","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.2.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.2.1-prerelease.5","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.2.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.2.1-prerelease.5","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.2.1-prerelease.4",
+  "version": "6.2.1-prerelease.6",
   "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",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "51f35a918102ae3dcaec8ee577cf6f2f578aea16"
+  "gitHead": "0c1e378f4775850581139ac4127c9a2150a702a4"
 }

package/src/components/Divider/Divider.tsx

@@ -31,6 +31,8 @@ export interface DividerProps extends React.HTMLProps<HTMLElement> {
     xl?: 'vertical' | 'horizontal';
     '2xl'?: 'vertical' | 'horizontal';
   };
+  /** The ARIA role of the divider when the component property has a value other than "hr". */
+  role?: 'separator' | 'presentation';
 }
 
 export const Divider: React.FunctionComponent<DividerProps> = ({
@@ -38,6 +40,7 @@ export const Divider: React.FunctionComponent<DividerProps> = ({
   component = DividerVariant.hr,
   inset,
   orientation,
+  role = 'separator',
   ...props
 }: DividerProps) => {
   const Component: any = component;
@@ -50,7 +53,7 @@ export const Divider: React.FunctionComponent<DividerProps> = ({
         formatBreakpointMods(orientation, styles),
         className
       )}
-      {...(component !== 'hr' && { role: 'separator' })}
+      {...(component !== 'hr' && { role })}
       {...props}
     />
   );

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

@@ -91,6 +91,16 @@ test(`Test all insets`, () => {
   });
 });
 
+test('Does not render with value passed to role by default', () => {
+  render(<Divider role="presentation" />);
+  expect(screen.queryByRole('presentation')).not.toBeInTheDocument();
+});
+
+test('Renders with value passed to role when component is not "hr"', () => {
+  render(<Divider component="li" role="presentation" />);
+  expect(screen.getByRole('presentation')).toBeInTheDocument();
+});
+
 test('Matches the snapshot', () => {
   const { asFragment } = render(<Divider />);
   expect(asFragment()).toMatchSnapshot();

package/src/components/Nav/NavItemSeparator.tsx

@@ -2,6 +2,7 @@ import { Divider, DividerProps } from '../Divider';
 
 export const NavItemSeparator: React.FunctionComponent<DividerProps> = ({
   component = 'li',
+  role = 'presentation',
   ...props
-}: DividerProps) => <Divider component={component} {...props} />;
+}: DividerProps) => <Divider component={component} role={role} {...props} />;
 NavItemSeparator.displayName = 'NavItemSeparator';

package/src/components/Toolbar/ToolbarItem.tsx

@@ -185,10 +185,19 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   children,
   isAllExpanded,
   isOverflowContainer,
+  role,
   ...props
 }: ToolbarItemProps) => {
   if (variant === ToolbarItemVariant.separator) {
-    return <Divider className={css(className)} orientation={{ default: 'vertical' }} {...props} />;
+    const isDividerRoleValid = role === 'separator' || role === 'presentation';
+    return (
+      <Divider
+        className={css(className)}
+        orientation={{ default: 'vertical' }}
+        {...props}
+        {...(isDividerRoleValid && { role: role as 'separator' | 'presentation' })}
+      />
+    );
   }
 
   return (
@@ -217,6 +226,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
           )}
           {...(variant === 'label' && { 'aria-hidden': true })}
           id={id}
+          role={role}
           {...props}
         >
           {children}

package/src/deprecated/components/Wizard/WizardNavItem.tsx

@@ -89,18 +89,20 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
         {...(isExpandable && { 'aria-expanded': isExpanded })}
         {...ouiaProps}
       >
-        {isExpandable ? (
-          <>
-            <span className={css(styles.wizardNavLinkText)}>{content}</span>
-            <span className={css(styles.wizardNavLinkToggle)}>
-              <span className={css(styles.wizardNavLinkToggleIcon)}>
-                <AngleRightIcon />
+        <span className={css(styles.wizardNavLinkMain)}>
+          {isExpandable ? (
+            <>
+              <span className={css(styles.wizardNavLinkText)}>{content}</span>
+              <span className={css(styles.wizardNavLinkToggle)}>
+                <span className={css(styles.wizardNavLinkToggleIcon)}>
+                  <AngleRightIcon />
+                </span>
               </span>
-            </span>
-          </>
-        ) : (
-          content
-        )}
+            </>
+          ) : (
+            content
+          )}
+        </span>
       </NavItemComponent>
       {children}
     </li>

package/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardNavItem.test.tsx.snap

@@ -12,7 +12,11 @@ exports[`WizardNavItem should match snapshot (auto-generated) 1`] = `
       data-ouia-component-type="PF6/WizardNavItem"
       data-ouia-safe="true"
       type="button"
-    />
+    >
+      <span
+        class="pf-v6-c-wizard__nav-link-main"
+      />
+    </button>
     ReactNode
   </li>
 </DocumentFragment>

package/src/deprecated/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap

@@ -120,7 +120,11 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                 data-ouia-safe="true"
                 type="button"
               >
-                A
+                <span
+                  class="pf-v6-c-wizard__nav-link-main"
+                >
+                  A
+                </span>
               </button>
             </li>
             <li
@@ -136,29 +140,33 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                 type="button"
               >
                 <span
-                  class="pf-v6-c-wizard__nav-link-text"
-                >
-                  B
-                </span>
-                <span
-                  class="pf-v6-c-wizard__nav-link-toggle"
+                  class="pf-v6-c-wizard__nav-link-main"
                 >
                   <span
-                    class="pf-v6-c-wizard__nav-link-toggle-icon"
+                    class="pf-v6-c-wizard__nav-link-text"
+                  >
+                    B
+                  </span>
+                  <span
+                    class="pf-v6-c-wizard__nav-link-toggle"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="pf-v6-svg"
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      viewBox="0 0 256 512"
-                      width="1em"
+                    <span
+                      class="pf-v6-c-wizard__nav-link-toggle-icon"
                     >
-                      <path
-                        d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                      />
-                    </svg>
+                      <svg
+                        aria-hidden="true"
+                        class="pf-v6-svg"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        viewBox="0 0 256 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                        />
+                      </svg>
+                    </span>
                   </span>
                 </span>
               </button>
@@ -177,7 +185,11 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                     data-ouia-safe="true"
                     type="button"
                   >
-                    B-1
+                    <span
+                      class="pf-v6-c-wizard__nav-link-main"
+                    >
+                      B-1
+                    </span>
                   </button>
                 </li>
                 <li
@@ -191,7 +203,11 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                     data-ouia-safe="true"
                     type="button"
                   >
-                    B-2
+                    <span
+                      class="pf-v6-c-wizard__nav-link-main"
+                    >
+                      B-2
+                    </span>
                   </button>
                 </li>
               </ol>
@@ -207,7 +223,11 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                 data-ouia-safe="true"
                 type="button"
               >
-                C
+                <span
+                  class="pf-v6-c-wizard__nav-link-main"
+                >
+                  C
+                </span>
               </button>
             </li>
             <li
@@ -221,7 +241,11 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                 data-ouia-safe="true"
                 type="button"
               >
-                D
+                <span
+                  class="pf-v6-c-wizard__nav-link-main"
+                >
+                  D
+                </span>
               </button>
             </li>
           </ol>
@@ -432,7 +456,11 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                 id="step-A"
                 type="button"
               >
-                A
+                <span
+                  class="pf-v6-c-wizard__nav-link-main"
+                >
+                  A
+                </span>
               </button>
             </li>
             <li
@@ -447,7 +475,11 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                 id="step-B"
                 type="button"
               >
-                B
+                <span
+                  class="pf-v6-c-wizard__nav-link-main"
+                >
+                  B
+                </span>
               </button>
               <ol
                 class="pf-v6-c-wizard__nav-list"
@@ -465,7 +497,11 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                     id="step-B-1"
                     type="button"
                   >
-                    B-1
+                    <span
+                      class="pf-v6-c-wizard__nav-link-main"
+                    >
+                      B-1
+                    </span>
                   </button>
                 </li>
                 <li
@@ -480,7 +516,11 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                     id="step-B-2"
                     type="button"
                   >
-                    B-2
+                    <span
+                      class="pf-v6-c-wizard__nav-link-main"
+                    >
+                      B-2
+                    </span>
                   </button>
                 </li>
               </ol>
@@ -497,7 +537,11 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                 id="step-C"
                 type="button"
               >
-                C
+                <span
+                  class="pf-v6-c-wizard__nav-link-main"
+                >
+                  C
+                </span>
               </button>
             </li>
             <li
@@ -512,7 +556,11 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                 id="step-D"
                 type="button"
               >
-                D
+                <span
+                  class="pf-v6-c-wizard__nav-link-main"
+                >
+                  D
+                </span>
               </button>
             </li>
           </ol>
@@ -672,7 +720,11 @@ exports[`Wizard bare wiz 1`] = `
                 data-ouia-safe="true"
                 type="button"
               >
-                A
+                <span
+                  class="pf-v6-c-wizard__nav-link-main"
+                >
+                  A
+                </span>
               </button>
             </li>
           </ol>