@patternfly/react-core 6.2.2 → 6.3.0-prerelease.1

package/src/components/SearchInput/examples/SearchInputBasic.tsx

@@ -10,6 +10,7 @@ export const SearchInputBasic: React.FunctionComponent = () => {
 
   return (
     <SearchInput
+      aria-label="Search basic example"
       placeholder="Find by name"
       value={value}
       onChange={(_event, value) => onChange(value)}

package/src/components/SearchInput/examples/SearchInputFocusSearch.tsx

@@ -7,7 +7,13 @@ export const SearchInputFocusSearch: React.FunctionComponent = () => {
 
   return (
     <>
-      <SearchInput ref={ref} value={value} onChange={(_event, value) => setValue(value)} onClear={() => setValue('')} />
+      <SearchInput
+        ref={ref}
+        value={value}
+        onChange={(_event, value) => setValue(value)}
+        onClear={() => setValue('')}
+        aria-label="Search focus using ref example"
+      />
       <Button onClick={() => ref.current && ref.current.focus()}>Focus on the search input</Button>
     </>
   );

package/src/components/SearchInput/examples/SearchInputWithExpandable.tsx

@@ -15,6 +15,7 @@ export const SearchInputWithExpandable: React.FunctionComponent = () => {
 
   return (
     <SearchInput
+      aria-label="Search with expandable button example"
       placeholder="Find by name"
       value={value}
       onChange={(_event, value) => onChange(value)}

package/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx

@@ -29,6 +29,7 @@ export const SearchInputWithNavigableOptions: React.FunctionComponent = () => {
 
   return (
     <SearchInput
+      aria-label="Search match with navigable options example"
       placeholder="Find by name"
       value={value}
       onChange={(_event, value) => onChange(value)}

package/src/components/SearchInput/examples/SearchInputWithResultCount.tsx

@@ -17,6 +17,7 @@ export const SearchInputWithResultCount: React.FunctionComponent = () => {
 
   return (
     <SearchInput
+      aria-label="Match with result count"
       placeholder="Find by name"
       value={value}
       onChange={(_event, value) => onChange(value)}

package/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx

@@ -6,6 +6,7 @@ export const SearchInputWithSubmitButton: React.FunctionComponent = () => {
 
   return (
     <SearchInput
+      aria-label="Search with submit button example"
       placeholder="Find by name"
       value={value}
       onChange={(_event, value) => setValue(value)}

package/src/components/Tabs/Tabs.tsx

@@ -31,7 +31,9 @@ export interface HorizontalOverflowObject {
 type TabElement = React.ReactElement<TabProps, React.JSXElementConstructor<TabProps>>;
 type TabsChild = TabElement | boolean | null | undefined;
 
-export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect'>, OUIAProps {
+export interface TabsProps
+  extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect' | 'onToggle'>,
+    OUIAProps {
   /** Content rendered inside the tabs component. Only `Tab` components or expressions resulting in a falsy value are allowed here. */
   children: TabsChild | TabsChild[];
   /** Additional classes added to the tabs */

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -12,7 +12,7 @@ export enum ToolbarGroupVariant {
   'label-group' = 'label-group'
 }
 
-export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'ref'> {
+export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'ref' | 'onToggle'> {
   /** Classes applied to root element of the data toolbar group */
   className?: string;
   /** A type modifier which modifies spacing specifically depending on the type of group */

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/components/TreeView/TreeViewListItem.tsx

@@ -50,11 +50,11 @@ export interface TreeViewListItemProps {
   /** Internal content of a tree view item. */
   name: React.ReactNode;
   /** Callback for item checkbox selection. */
-  onCheck?: (event: React.ChangeEvent<HTMLInputElement>, item: TreeViewDataItem, parent: TreeViewDataItem) => void;
+  onCheck?: (event: React.ChangeEvent<HTMLInputElement>, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void;
   /** Callback for item selection. Note: calling event.preventDefault() will prevent the node
    * from toggling.
    */
-  onSelect?: (event: React.MouseEvent, item: TreeViewDataItem, parent: TreeViewDataItem) => void;
+  onSelect?: (event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void;
   /** Callback for expanding a node with children. */
   onExpand?: (event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void;
   /** Callback for collapsing a node with children. */

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

@@ -3,10 +3,20 @@ import userEvent from '@testing-library/user-event';
 import { TreeView } from '../TreeView';
 
 jest.mock('../TreeViewList', () => ({
-  TreeViewList: ({ children, isNested, toolbar }) => (
+  TreeViewList: ({
+    children,
+    isNested,
+    toolbar,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    isMultiSelectable
+  }) => (
     <div data-testid="TreeViewList-mock">
       <p>{`TreeViewList isNested: ${isNested}`}</p>
       <p>{`TreeViewList toolbar: ${toolbar}`}</p>
+      <p>{`TreeViewList aria-label: ${ariaLabel}`}</p>
+      <p>{`TreeViewList aria-labelledBy: ${ariaLabelledBy}`}</p>
+      <p>{`TreeViewList isMultiSelectable: ${isMultiSelectable}`}</p>
       <div data-testid="TreeViewList-children">{children}</div>
     </div>
   )
@@ -131,6 +141,21 @@ test('Passes toolbar to TreeViewList', () => {
 
   expect(screen.getByText('TreeViewList toolbar: Toolbar content')).toBeVisible();
 });
+test('Passes aria-label to TreeViewList', () => {
+  render(<TreeView aria-label="Test aria-label" data={[basicData]} />);
+
+  expect(screen.getByText('TreeViewList aria-label: Test aria-label')).toBeVisible();
+});
+test('Passes aria-labelledby to TreeViewList', () => {
+  render(<TreeView aria-labelledby="test-aria-labelledby" data={[basicData]} />);
+
+  expect(screen.getByText('TreeViewList aria-labelledBy: test-aria-labelledby')).toBeVisible();
+});
+test('Passes isMultiSelectable to TreeViewList', () => {
+  render(<TreeView isMultiSelectable={true} data={[basicData]} />);
+
+  expect(screen.getByText('TreeViewList isMultiSelectable: true')).toBeVisible();
+});
 test('Passes data as children TreeViewList', () => {
   render(<TreeView data={[basicData]} />);
 

package/src/components/TreeView/__tests__/TreeViewList.test.tsx

@@ -32,9 +32,55 @@ test(`Renders toolbar content when toolbar prop is passed`, () => {
   expect(screen.getByText('Toolbar content')).toBeInTheDocument();
 });
 
+test(`Renders Divider when toolbar prop is passed`, () => {
+  render(<TreeViewList toolbar="Toolbar content">Content</TreeViewList>);
+
+  expect(screen.getByRole('separator')).toBeInTheDocument();
+});
+
+test('Renders with aria-label when passed', () => {
+  render(<TreeViewList aria-label="Test aria-label">Content</TreeViewList>);
+
+  expect(screen.getByRole('tree')).toHaveAccessibleName('Test aria-label');
+});
+
+test('Renders with aria-labelledby when passed', () => {
+  render(
+    <>
+      <div id="label">Labeling content</div>
+      <TreeViewList aria-labelledby="label">Content</TreeViewList>
+    </>
+  );
+
+  expect(screen.getByRole('tree')).toHaveAccessibleName('Labeling content');
+});
+
+test('Renders with aria-multiselectable of false by default', () => {
+  render(<TreeViewList>Content</TreeViewList>);
+
+  expect(screen.getByRole('tree')).toHaveAttribute('aria-multiselectable', 'false');
+});
+
+test('Renders with aria-multiselectable of true when isMultiSelectable is true', () => {
+  render(<TreeViewList isMultiSelectable>Content</TreeViewList>);
+
+  expect(screen.getByRole('tree')).toHaveAttribute('aria-multiselectable', 'true');
+});
+
+test('Does not render with aria-multiselectable when isNested is true', () => {
+  render(
+    <TreeViewList isMultiSelectable isNested>
+      Content
+    </TreeViewList>
+  );
+
+  expect(screen.getByRole('group')).not.toHaveAttribute('aria-multiselectable');
+});
+
 test(`Does not render toolbar content when toolbar prop is not passed`, () => {
   render(<TreeViewList>Content</TreeViewList>);
 
+  expect(screen.queryByRole('tree')?.previousElementSibling).not.toBeInTheDocument();
   expect(screen.queryByRole('separator')).not.toBeInTheDocument();
 });