@patternfly/react-core 6.2.1-prerelease.5 → 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.4","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.4","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.4","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.5",
+  "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": "5485f4b2a1b93a84a8bd665526994ebced6efbc4"
+  "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}