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

package/src/components/Nav/__tests__/NavExpandable.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { NavExpandable } from '../NavExpandable';
+
+test('Renders with the inert attribute by default', () => {
+  render(<NavExpandable id="grp-1" title="NavExpandable"></NavExpandable>);
+
+  expect(screen.getByLabelText('NavExpandable')).toHaveAttribute('inert', '');
+});
+
+test('Does not render with the inert attribute when isExpanded is true', () => {
+  render(<NavExpandable id="grp-1" title="NavExpandable" isExpanded={true}></NavExpandable>);
+
+  expect(screen.getByLabelText('NavExpandable')).not.toHaveAttribute('inert', '');
+});

package/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap

@@ -223,6 +223,7 @@ exports[`Nav Expandable Nav List - Trigger toggle 1`] = `
           aria-labelledby="grp-1"
           class="pf-v6-c-nav__subnav"
           hidden=""
+          inert=""
         >
           <ul
             class="pf-v6-c-nav__list"
@@ -355,6 +356,7 @@ exports[`Nav Expandable Nav List 1`] = `
           aria-labelledby="grp-1"
           class="pf-v6-c-nav__subnav"
           hidden=""
+          inert=""
         >
           <ul
             class="pf-v6-c-nav__list"
@@ -486,6 +488,7 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
           aria-labelledby="grp-1"
           class="pf-v6-c-nav__subnav"
           hidden=""
+          inert=""
         >
           <h2
             class="pf-v6-screen-reader"

package/src/components/Page/examples/Page.md

@@ -8,7 +8,7 @@ propComponents:
 
 import { useState } from 'react';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
+import pageSectionWidthLimitMaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
 
 ## Examples
 

package/src/components/Page/examples/PageCenteredSection.tsx

@@ -18,8 +18,7 @@ import {
   CardBody
 } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-/* eslint-disable camelcase */
-import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
+import pageSectionWidthLimitMaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
 
 export const PageCenteredSection: React.FunctionComponent = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
@@ -68,11 +67,11 @@ export const PageCenteredSection: React.FunctionComponent = () => {
 
   return (
     <Page masthead={masthead} sidebar={sidebar}>
-      <PageSection isWidthLimited isCenterAligned>
+      <PageSection isWidthLimited isCenterAligned aria-label="width limited page section">
         <Card>
           <CardBody>
             When a width limited page section is wider than the value of
-            <code>{c_page_section_m_limit_width_MaxWidth.name}</code>, the section will be centered in the main section.
+            <code>{pageSectionWidthLimitMaxWidth.name}</code>, the section will be centered in the main section.
             <br />
             <br />
             The content in this example is placed in a card to better illustrate how the section behaves when it is

package/src/components/Page/examples/PageGroupSection.tsx

@@ -101,10 +101,16 @@ export const PageGroupSection: React.FunctionComponent = () => {
             </BreadcrumbItem>
           </Breadcrumb>
         </PageBreadcrumb>
-        <PageSection>Grouped section</PageSection>
+        <PageSection aria-labelledby="grouped-section">
+          <h2 id="grouped-section">Grouped section</h2>
+        </PageSection>
       </PageGroup>
-      <PageSection>Section 1</PageSection>
-      <PageSection>Section 2</PageSection>
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Grouped example section 1</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-2">
+        <h2 id="section-2">Grouped example section 2</h2>
+      </PageSection>
     </Page>
   );
 };

package/src/components/Page/examples/PageHorizontalNav.tsx

@@ -36,9 +36,15 @@ export const PageHorizontalNav: React.FunctionComponent = () => {
 
   return (
     <Page masthead={masthead}>
-      <PageSection>Section 1</PageSection>
-      <PageSection variant="secondary">Section 2 with secondary variant styling</PageSection>
-      <PageSection>Section 3</PageSection>
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Horizontal nav example section 1</h2>
+      </PageSection>
+      <PageSection variant="secondary" aria-labelledby="section-2">
+        <h2 id="section-2">Horizontal nav example section 2 with secondary variant styling</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-3">
+        <h2 id="section-3">Horizontal nav example section 3</h2>
+      </PageSection>
     </Page>
   );
 };

package/src/components/Page/examples/PageMainSectionPadding.tsx

@@ -64,10 +64,18 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
 
   return (
     <Page masthead={masthead} sidebar={sidebar}>
-      <PageSection>Section with default padding</PageSection>
-      <PageSection padding={{ default: 'noPadding' }}>Section with no padding</PageSection>
-      <PageSection padding={{ default: 'noPadding', md: 'padding' }}>Section with padding on medium</PageSection>
-      <PageSection padding={{ md: 'noPadding' }}>Section with no padding on medium</PageSection>
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Section with default padding</h2>
+      </PageSection>
+      <PageSection padding={{ default: 'noPadding' }} aria-labelledby="section-2">
+        <h2 id="section-2">Section with no padding</h2>
+      </PageSection>
+      <PageSection padding={{ default: 'noPadding', md: 'padding' }} aria-labelledby="section-3">
+        <h2 id="section-3">Section with padding on medium</h2>
+      </PageSection>
+      <PageSection padding={{ md: 'noPadding' }} aria-labelledby="section-4">
+        <h2 id="section-4">Section with no padding on medium</h2>
+      </PageSection>
     </Page>
   );
 };

package/src/components/Page/examples/PageMainSectionVariations.tsx

@@ -64,22 +64,22 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
 
   return (
     <Page header={header} sidebar={sidebar}>
-      <PageSection type="subnav">
+      <PageSection type="subnav" aria-label="With subnav type">
         Section with <code>type="subnav"</code> for horizontal subnav navigation
       </PageSection>
-      <PageSection type="nav">
+      <PageSection type="nav" aria-label="With nav type">
         Section with <code>type="nav"</code> for tertiary navigation
       </PageSection>
-      <PageSection type="tabs">
+      <PageSection type="tabs" aria-label="With tabs type">
         Section with <code>type="tabs"</code> for tabs
       </PageSection>
-      <PageSection type="breadcrumb">
+      <PageSection type="breadcrumb" aria-label="With breadcrumb type">
         Section with <code>type="breadcrumb"</code> for breadcrumbs
       </PageSection>
-      <PageSection>
+      <PageSection aria-label="With default type">
         Section without <code>type</code> prop or <code>type="default"</code> for main sections
       </PageSection>
-      <PageSection type="wizard">
+      <PageSection type="wizard" aria-label="With wizard type">
         Section with <code>type="wizard"</code> for wizards
       </PageSection>
     </Page>

package/src/components/Page/examples/PageMultipleSidebarBody.tsx

@@ -71,9 +71,15 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
 
   return (
     <Page masthead={masthead} sidebar={sidebar}>
-      <PageSection>Section 1</PageSection>
-      <PageSection>Section 2</PageSection>
-      <PageSection>Section 3</PageSection>
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Multiple sidebar body example section 1</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-2">
+        <h2 id="section-2">Multiple sidebar body example section 2</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-3">
+        <h2 id="section-3">Multiple sidebar body example section 3</h2>
+      </PageSection>
     </Page>
   );
 };

package/src/components/Page/examples/PageUncontrolledNav.tsx

@@ -51,9 +51,15 @@ export const PageUncontrolledNav: React.FunctionComponent = () => {
 
   return (
     <Page isManagedSidebar masthead={masthead} sidebar={sidebar}>
-      <PageSection>Section 1</PageSection>
-      <PageSection>Section 2</PageSection>
-      <PageSection>Section 3</PageSection>
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Uncontrolled nav example section 1</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-2">
+        <h2 id="section-2">Uncontrolled nav example section 2</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-3">
+        <h2 id="section-3">Uncontrolled nav example section 3</h2>
+      </PageSection>
     </Page>
   );
 };

package/src/components/Page/examples/PageVerticalNav.tsx

@@ -64,9 +64,15 @@ export const PageVerticalNav: React.FunctionComponent = () => {
 
   return (
     <Page masthead={masthead} sidebar={sidebar}>
-      <PageSection>Section 1</PageSection>
-      <PageSection variant="secondary">Section 2 with secondary variant styling</PageSection>
-      <PageSection>Section 3</PageSection>
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Vertical nav example section 1</h2>
+      </PageSection>
+      <PageSection variant="secondary" aria-labelledby="section-2">
+        <h2 id="section-2">Vertical nav example section 2 with secondary variant styling</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-3">
+        <h2 id="section-3">Vertical nav example section 3</h2>
+      </PageSection>
     </Page>
   );
 };

package/src/components/Page/examples/PageWithOrWithoutFill.tsx

@@ -64,11 +64,15 @@ export const PageWithOrWithoutFill: React.FunctionComponent = () => {
 
   return (
     <Page isContentFilled masthead={masthead} sidebar={sidebar}>
-      <PageSection>A default page section</PageSection>
-      <PageSection isFilled={true} variant="secondary">
-        This section fills the available space.
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Section without fill</h2>
+      </PageSection>
+      <PageSection isFilled={true} variant="secondary" aria-labelledby="section-2">
+        <h2 id="section-2">Section with fill</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-3">
+        <h2 id="section-3">Another section without fill</h2>
       </PageSection>
-      <PageSection>A default page section</PageSection>
     </Page>
   );
 };

package/src/components/Progress/ProgressContainer.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useState } from 'react';
+import { Fragment, useState, useRef, useEffect } from 'react';
 import progressStyle from '@patternfly/react-styles/css/components/Progress/progress';
 import { css } from '@patternfly/react-styles';
 import { Tooltip, TooltipPosition } from '../Tooltip';
@@ -80,22 +80,31 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
 }: ProgressContainerProps) => {
   const StatusIcon = variantToIcon.hasOwnProperty(variant) && variantToIcon[variant];
   const [tooltip, setTooltip] = useState('');
-  const onMouseEnter = (event: any) => {
+  const titleRef = useRef(null);
+  const updateTooltip = (event: any) => {
     if (event.target.offsetWidth < event.target.scrollWidth) {
       setTooltip(title || event.target.innerHTML);
     } else {
       setTooltip('');
     }
   };
+
+  useEffect(() => {
+    if (tooltip !== '') {
+      titleRef.current.focus();
+    }
+  }, [tooltip]);
+
+  const _isTruncatedAndString = isTitleTruncated && typeof title === 'string';
   const Title = (
     <div
-      className={css(
-        progressStyle.progressDescription,
-        isTitleTruncated && typeof title === 'string' && progressStyle.modifiers.truncate
-      )}
+      className={css(progressStyle.progressDescription, _isTruncatedAndString && progressStyle.modifiers.truncate)}
       id={`${parentId}-description`}
-      aria-hidden="true"
-      onMouseEnter={isTitleTruncated && typeof title === 'string' ? onMouseEnter : null}
+      aria-hidden={_isTruncatedAndString ? null : 'true'}
+      onMouseEnter={_isTruncatedAndString ? updateTooltip : null}
+      onFocus={_isTruncatedAndString ? updateTooltip : null}
+      {...(_isTruncatedAndString && { tabIndex: 0 })}
+      ref={titleRef}
     >
       {title}
     </div>
@@ -103,14 +112,12 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
 
   return (
     <Fragment>
-      {title &&
-        (tooltip ? (
-          <Tooltip position={tooltipPosition} content={tooltip} isVisible>
-            {Title}
-          </Tooltip>
-        ) : (
-          Title
-        ))}
+      {title && (
+        <>
+          {tooltip && <Tooltip position={tooltipPosition} content={tooltip} isVisible triggerRef={titleRef} />}
+          {Title}
+        </>
+      )}
       {(measureLocation !== ProgressMeasureLocation.none || StatusIcon) && (
         <div className={css(progressStyle.progressStatus)} aria-hidden="true">
           {(measureLocation === ProgressMeasureLocation.top || measureLocation === ProgressMeasureLocation.outside) && (

package/src/components/Progress/examples/ProgressTitleOutsideOfProgressBar.tsx

@@ -8,7 +8,7 @@ import {
 } from '@patternfly/react-core';
 
 export const ProgressTitleOutsideOfProgressBar: React.FunctionComponent = () => (
-  <DescriptionList>
+  <DescriptionList aria-label="Progress Title outside of progress bar">
     <DescriptionListGroup>
       <DescriptionListTerm id="title-outside-progress-example-label">Title outside of progress bar</DescriptionListTerm>
       <DescriptionListDescription>

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

@@ -32,6 +32,7 @@ export const SearchInputAdvanced: React.FunctionComponent = () => {
       />
       <br />
       <SearchInput
+        aria-label="Advanced search"
         attributes={[
           { attr: 'username', display: 'Username' },
           { attr: 'firstname', display: 'First name' }

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/Select/examples/Select.md

@@ -78,11 +78,6 @@ By default, the menu toggle will display a badge to indicate the number of items
 ```
 
 ### Typeahead
-Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.
-
-Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.
-
-To make a typeahead, pass `variant=typeahead` into the `<MenuToggle>` component and link an `onClick` function to the `<TextInputGroupMain>` component.
 
 Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.
 
@@ -93,13 +88,6 @@ To make a typeahead, pass `variant=typeahead` into the `<MenuToggle>` component
 ```
 
 ### Typeahead with create option
-If a user enters a value into a typeahead select menu that does not exist, you can allow them to create an option of that value. 
-
-If a user enters a value into a typeahead select menu that does not exist, you can allow them to create an option of that value.
-
-To enable the creation ability, pass a predetermined `value` into a `<SelectOption>` component. You can use the `placeholder` property to change the default text shown in the text input.
-
-The following example outlines the code implementation required to create a working typeahead menu that allows for creation.
 
 If a user enters a value into a typeahead select menu that does not exist, you can allow them to create an option of that value.
 
@@ -111,14 +99,9 @@ The following example outlines the code implementation required to create a work
 
 ```
 
-### Multiple typeahead with chips
-A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a chip group to be placed in the select toggle.
-
-A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a chip group to be placed in the select toggle.
-
-When more items than the allowed limit are selected, overflowing items will be hidden under a "more" button. The following example hides items after more than 3 are selected. To show hidden items, select the “more” button. Select "show less" to hide extra items again.
+### Multiple typeahead with labels
 
-A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a chip group to be placed in the select toggle.
+A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a label group to be placed in the select toggle.
 
 When more items than the allowed limit are selected, overflowing items will be hidden under a "more" button. The following example hides items after more than 3 are selected. To show hidden items, select the “more” button. Select "show less" to hide extra items again.
 
@@ -127,20 +110,14 @@ When more items than the allowed limit are selected, overflowing items will be h
 ```
 
 ### Multiple typeahead with create option
-If the text that is entered into a typeahead doesn't match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a chip group to display created items as chips."
 
-If the text that is entered into a typeahead doesn't match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a chip group to display created items as chips."
-
-If the text that is entered into a typeahead doesn't match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a chip group to display created items as chips."
+If the text that is entered into a typeahead doesn't match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a label group to display created items as labels.
 
 ```ts file="./SelectMultiTypeaheadCreatable.tsx"
 
 ```
 
 ### Multiple typeahead with checkboxes
-By default, a multiple typeahead select allows you to select multiple menu items, placing a checkmark beside selected items. Like basic checkbox select menus, you can add checkboxes to your menu items. This approach may be more accurate and comprehensive for more complex menu scenarios like filtering.
-
-By default, a multiple typeahead select allows you to select multiple menu items, placing a checkmark beside selected items. Like basic checkbox select menus, you can add checkboxes to your menu items. This approach may be more accurate and comprehensive for more complex menu scenarios like filtering.
 
 By default, a multiple typeahead select allows you to select multiple menu items, placing a checkmark beside selected items. Like basic checkbox select menus, you can add checkboxes to your menu items. This approach may be more accurate and comprehensive for more complex menu scenarios like filtering.
 

package/src/components/Skeleton/examples/SkeletonText.tsx

@@ -1,6 +1,5 @@
 import { Fragment } from 'react';
 import { Skeleton } from '@patternfly/react-core';
-/* eslint-disable camelcase */
 import t_global_font_size_4xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_4xl';
 import t_global_font_size_3xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_3xl';
 import t_global_font_size_2xl from '@patternfly/react-tokens/dist/esm/t_global_font_size_2xl';

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]} />);