fix(Nav): added role presentation to NavItemSeparator

packages/react-core/src/components/Divider/Divider.tsx

@@ -31,13 +31,16 @@ 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?: string;
 }
 
 export const Divider: React.FunctionComponent<DividerProps> = ({
   className,
   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}
     />
   );

packages/react-core/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();

packages/react-core/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';

packages/react-core/src/components/Toolbar/ToolbarItem.tsx

@@ -188,6 +188,8 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   ...props
 }: ToolbarItemProps) => {
   if (variant === ToolbarItemVariant.separator) {
+    // TODO: consider removing spread props here so we can update Divider role prop to union of
+    // separator or presentation rather than generic string
     return <Divider className={css(className)} orientation={{ default: 'vertical' }} {...props} />;
   }