@patternfly/react-core 5.4.0-prerelease.1 → 5.4.0-prerelease.3

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.4.0-prerelease.1",
+  "version": "5.4.0-prerelease.3",
   "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",
@@ -40,15 +40,15 @@
   "scripts": {
     "build:umd": "rollup -c --environment IS_PRODUCTION",
     "build:single:packages": "node ../../scripts/build-single-packages.js --config single-packages.config.json",
-    "clean": "rimraf dist components layouts helpers next deprecated node_modules",
+    "clean": "rimraf dist components layouts helpers next deprecated",
     "generate": "node scripts/copyStyles.js",
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json",
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^5.4.0-prerelease.0",
-    "@patternfly/react-styles": "^5.4.0-prerelease.0",
-    "@patternfly/react-tokens": "^5.4.0-prerelease.0",
+    "@patternfly/react-icons": "^5.4.0-prerelease.1",
+    "@patternfly/react-styles": "^5.4.0-prerelease.1",
+    "@patternfly/react-tokens": "^5.4.0-prerelease.1",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
@@ -61,7 +61,6 @@
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",
     "glob": "^7.1.2",
-    "rimraf": "^3.0.2",
     "rollup": "^3.21.5",
     "rollup-plugin-scss": "^4.0.0",
     "rollup-plugin-svg": "2.0.0",
@@ -72,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "593832e72c7bbad4096109cba7d7a79a5d135635"
+  "gitHead": "75849b05bb14b3d8f50535a92a65136b4a2cb13b"
 }

package/src/components/NumberInput/NumberInput.tsx

@@ -67,8 +67,10 @@ const defaultKeyDownHandler = (args: DefaultKeyDownHandlerArgs) => (event: React
   }
 };
 
+const DEFAULT_VALUE = 0;
+
 export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
-  value = 0,
+  value = DEFAULT_VALUE,
   className,
   widthChars,
   isDisabled = false,
@@ -121,7 +123,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
           <Button
             variant="control"
             aria-label={minusBtnAriaLabel}
-            isDisabled={isDisabled || value <= min}
+            isDisabled={isDisabled || (typeof value === 'number' ? value : DEFAULT_VALUE) <= min}
             onClick={(evt) => onMinus(evt, inputName)}
             {...minusBtnProps}
           >
@@ -149,7 +151,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
           <Button
             variant="control"
             aria-label={plusBtnAriaLabel}
-            isDisabled={isDisabled || value >= max}
+            isDisabled={isDisabled || (typeof value === 'number' ? value : DEFAULT_VALUE) >= max}
             onClick={(evt) => onPlus(evt, inputName)}
             {...plusBtnProps}
           >

package/src/components/Pagination/Navigation.tsx

@@ -29,7 +29,7 @@ export interface NavigationProps extends React.HTMLProps<HTMLElement> {
   /** Label for the English word "of". */
   ofWord?: string;
   /** The number of the current page. */
-  page: string | number;
+  page: number;
   /** The title of a page displayed beside the page number. */
   pagesTitle?: string;
   /** The title of a page displayed beside the page number (the plural form). */
@@ -55,13 +55,13 @@ export interface NavigationProps extends React.HTMLProps<HTMLElement> {
   /** Function called when user clicks to navigate to previous page. */
   onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
   /** Function called when user inputs page number. */
-  onPageInput?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+  onPageInput?: (event: React.KeyboardEvent<HTMLInputElement>, page: number) => void;
   /** Function called when page is changed. */
   onSetPage: OnSetPage;
 }
 
 export interface NavigationState {
-  userInputPage?: React.ReactText;
+  userInputPage?: number | string;
 }
 
 class Navigation extends React.Component<NavigationProps, NavigationState> {
@@ -93,7 +93,7 @@ class Navigation extends React.Component<NavigationProps, NavigationState> {
     onPageInput: () => undefined as any
   };
 
-  private static parseInteger(input: React.ReactText, lastPage: number): number {
+  private static parseInteger(input: number | string, lastPage: number): number {
     // eslint-disable-next-line radix
     let inputPage = Number.parseInt(input as string, 10);
     if (!Number.isNaN(inputPage)) {
@@ -105,14 +105,14 @@ class Navigation extends React.Component<NavigationProps, NavigationState> {
 
   private onChange(event: React.FormEvent<HTMLInputElement>, lastPage: number): void {
     const inputPage = Navigation.parseInteger(event.currentTarget.value, lastPage);
-    this.setState({ userInputPage: Number.isNaN(inputPage as number) ? event.currentTarget.value : inputPage });
+    this.setState({ userInputPage: Number.isNaN(inputPage) ? event.currentTarget.value : inputPage });
   }
 
   private onKeyDown(
     event: React.KeyboardEvent<HTMLInputElement>,
-    page: number | string,
+    page: number,
     lastPage: number,
-    onPageInput: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void
+    onPageInput: (event: React.KeyboardEvent<HTMLInputElement>, page: number) => void
   ): void {
     const allowedKeys = [
       'Tab',
@@ -126,9 +126,9 @@ class Navigation extends React.Component<NavigationProps, NavigationState> {
       'ArrowDown'
     ];
     if (event.key === KeyTypes.Enter) {
-      const inputPage = Navigation.parseInteger(this.state.userInputPage, lastPage) as number;
-      onPageInput(event, Number.isNaN(inputPage) ? (page as number) : inputPage);
-      this.handleNewPage(event, Number.isNaN(inputPage) ? (page as number) : inputPage);
+      const inputPage = Navigation.parseInteger(this.state.userInputPage, lastPage);
+      onPageInput(event, Number.isNaN(inputPage) ? page : inputPage);
+      this.handleNewPage(event, Number.isNaN(inputPage) ? page : inputPage);
     } else if (!/^\d*$/.test(event.key) && !allowedKeys.includes(event.key)) {
       event.preventDefault();
     }
@@ -206,7 +206,7 @@ class Navigation extends React.Component<NavigationProps, NavigationState> {
             isDisabled={isDisabled || page === firstPage || page === 0}
             data-action="previous"
             onClick={(event) => {
-              const newPage = (page as number) - 1 >= 1 ? (page as number) - 1 : 1;
+              const newPage = page - 1 >= 1 ? page - 1 : 1;
               onPreviousClick(event, newPage);
               this.handleNewPage(event, newPage);
               this.setState({ userInputPage: newPage });
@@ -244,7 +244,7 @@ class Navigation extends React.Component<NavigationProps, NavigationState> {
             aria-label={toNextPageAriaLabel}
             data-action="next"
             onClick={(event) => {
-              const newPage = (page as number) + 1 <= lastPage ? (page as number) + 1 : lastPage;
+              const newPage = page + 1 <= lastPage ? page + 1 : lastPage;
               onNextClick(event, newPage);
               this.handleNewPage(event, newPage);
               this.setState({ userInputPage: newPage });

package/src/components/Pagination/Pagination.tsx

@@ -148,7 +148,7 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAPr
   /** Function called when user clicks on navigate to next page. */
   onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
   /** Function called when user inputs page number. */
-  onPageInput?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+  onPageInput?: (event: React.KeyboardEvent<HTMLInputElement>, page: number) => void;
   /** Function called when user selects number of items per page. */
   onPerPageSelect?: OnPerPageSelect;
   /** Function called when user clicks on navigate to previous page. */

package/src/components/TreeView/TreeView.tsx

@@ -46,6 +46,14 @@ export interface TreeViewProps {
    * internal state.
    */
   allExpanded?: boolean;
+  /** A text string that sets the accessible name of the tree view list. Either this or the aria-labelledby property must
+   * be passed in.
+   */
+  'aria-label'?: string;
+  /** A space separated list of element id's that sets the accessible name of the tree view list. Either
+   * this or the aria-label property must be passed in.
+   */
+  'aria-labelledby'?: string;
   /** Class to add if not passed a parentItem property. */
   className?: string;
   /** Comparison function for determining active items. */
@@ -72,6 +80,11 @@ export interface TreeViewProps {
   icon?: React.ReactNode;
   /** ID of the tree view. */
   id?: string;
+  /** Flag indicating whether multiple nodes can be selected in the tree view. This will also set the
+   * aria-multiselectable attribute on the tree view list which is required to be true when multiple selection is intended.
+   * Can only be applied to the root tree view list.
+   */
+  isMultiSelectable?: boolean;
   /** Callback for item checkbox selection. */
   onCheck?: (event: React.ChangeEvent<HTMLInputElement>, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void;
   /** Callback for item selection. */
@@ -104,6 +117,7 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
   defaultAllExpanded = false,
   allExpanded,
   icon,
+  isMultiSelectable = false,
   expandedIcon,
   parentItem,
   onSelect,
@@ -115,10 +129,18 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
   compareItems = (item, itemToCheck) => item.id === itemToCheck.id,
   className,
   useMemo,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   ...props
 }: TreeViewProps) => {
   const treeViewList = (
-    <TreeViewList isNested={isNested} toolbar={toolbar}>
+    <TreeViewList
+      isNested={isNested}
+      toolbar={toolbar}
+      isMultiSelectable={isMultiSelectable}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledby}
+    >
       {data.map((item) => (
         <TreeViewListItem
           key={item.id?.toString() || item.name?.toString()}

package/src/components/TreeView/TreeViewList.tsx

@@ -10,12 +10,28 @@ export interface TreeViewListProps extends React.HTMLProps<HTMLUListElement> {
   isNested?: boolean;
   /** Toolbar to display above the tree view. */
   toolbar?: React.ReactNode;
+  /** Flag indicating whether multiple nodes can be selected in the tree view. This will also set the
+   * aria-multiselectable attribute on the tree view list which is required to be true when multiple selection is intended.
+   * Can only be applied to the root tree view list.
+   */
+  isMultiSelectable?: boolean;
+  /** A text string that sets the accessible name of the tree view list. Either this or the aria-labelledby property must
+   * be passed in.
+   */
+  'aria-label'?: string;
+  /** A space separated list of element id's that sets the accessible name of the tree view list. Either
+   * this or the aria-label property must be passed in.
+   */
+  'aria-labelledby'?: string;
 }
 
 export const TreeViewList: React.FunctionComponent<TreeViewListProps> = ({
   isNested = false,
+  isMultiSelectable = false,
   toolbar,
   children,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
   ...props
 }: TreeViewListProps) => (
   <>
@@ -25,7 +41,14 @@ export const TreeViewList: React.FunctionComponent<TreeViewListProps> = ({
         <Divider />
       </React.Fragment>
     )}
-    <ul className={css(`${styles.treeView}__list`)} role={isNested ? 'group' : 'tree'} {...props}>
+    <ul
+      className={css(`${styles.treeView}__list`)}
+      role={isNested ? 'group' : 'tree'}
+      aria-multiselectable={isNested ? undefined : isMultiSelectable}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledby}
+      {...props}
+    >
       {children}
     </ul>
   </>

package/src/components/TreeView/TreeViewListItem.tsx

@@ -143,6 +143,8 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       </span>
     </ToggleComponent>
   );
+
+  const isCheckboxChecked = checkProps.checked === null ? false : checkProps.checked;
   const renderCheck = (randomId: string) => (
     <span className={css(styles.treeViewNodeCheck)}>
       <input
@@ -151,7 +153,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
         onClick={(evt) => evt.stopPropagation()}
         ref={(elem) => elem && (elem.indeterminate = checkProps.checked === null)}
         {...checkProps}
-        checked={checkProps.checked === null ? false : checkProps.checked}
+        checked={isCheckboxChecked}
         id={randomId}
         tabIndex={-1}
       />
@@ -194,6 +196,13 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       )}
     </>
   );
+
+  const isSelected =
+    (!children || isSelectable) &&
+    activeItems &&
+    activeItems.length > 0 &&
+    activeItems.some((item) => compareItems && item && compareItems(item, itemData));
+
   return (
     <li
       id={id}
@@ -201,6 +210,8 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       aria-expanded={internalIsExpanded}
       role="treeitem"
       tabIndex={-1}
+      {...(hasCheckbox && { 'aria-checked': isCheckboxChecked })}
+      {...(!hasCheckbox && { 'aria-selected': isSelected })}
     >
       <div className={css(styles.treeViewContent)}>
         <GenerateId prefix={isSelectable ? 'selectable-id' : 'checkbox-id'}>
@@ -209,12 +220,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
               className={css(
                 styles.treeViewNode,
                 children && (isSelectable || hasCheckbox) && styles.modifiers.selectable,
-                (!children || isSelectable) &&
-                  activeItems &&
-                  activeItems.length > 0 &&
-                  activeItems.some((item) => compareItems && item && compareItems(item, itemData))
-                  ? styles.modifiers.current
-                  : ''
+                isSelected && styles.modifiers.current
               )}
               onClick={(evt: React.MouseEvent) => {
                 if (!hasCheckbox) {

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

@@ -3,6 +3,7 @@
 exports[`Matches snapshot by default 1`] = `
 <DocumentFragment>
   <ul
+    aria-multiselectable="false"
     class="pf-v5-c-tree-view__list"
     role="tree"
   >
@@ -20,6 +21,7 @@ exports[`Matches snapshot when toolbar is passed 1`] = `
     class="pf-v5-c-divider"
   />
   <ul
+    aria-multiselectable="false"
     class="pf-v5-c-tree-view__list"
     role="tree"
   >

package/src/components/TreeView/__tests__/__snapshots__/TreeViewListItem.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`Matches snapshot with children 1`] = `
 <DocumentFragment>
   <li
     aria-expanded="false"
+    aria-selected="false"
     class="pf-v5-c-tree-view__list-item"
     role="treeitem"
     tabindex="-1"
@@ -56,6 +57,7 @@ exports[`Matches snapshot without children 1`] = `
 <DocumentFragment>
   <li
     aria-expanded="false"
+    aria-selected="false"
     class="pf-v5-c-tree-view__list-item"
     role="treeitem"
     tabindex="-1"

package/src/components/TreeView/examples/TreeView.md

@@ -9,9 +9,17 @@ import { FolderIcon, FolderOpenIcon, EllipsisVIcon, ClipboardIcon, HamburgerIcon
 
 ## Examples
 
-### Default
+### Single selectable
 
-```ts file='./TreeViewDefault.tsx'
+```ts file='./TreeViewSingleSelectable.tsx'
+
+```
+
+### Multiselectable
+
+A tree view can be setup to allow multiple nodes to be selected. When a tree view is intended to allow multiple selection, the `isMultiSelectable` property must be passed.
+
+```ts file='./TreeViewMultiselectable.tsx'
 
 ```
 
@@ -25,6 +33,8 @@ The `hasSelectableNodes` modifier will separate the expansion and selection beha
 
 ### With search
 
+A search input can be used to filter tree view items. It is recommended that a tree view with more than 7 nodes includes a search input.
+
 ```ts file='./TreeViewWithSearch.tsx'
 
 ```

package/src/components/TreeView/examples/TreeViewCompact.tsx

@@ -55,5 +55,5 @@ export const TreeViewCompact: React.FunctionComponent = () => {
       ]
     }
   ];
-  return <TreeView data={options} variant="compact" />;
+  return <TreeView aria-label="Tree View compact example" data={options} variant="compact" />;
 };

package/src/components/TreeView/examples/TreeViewCompactNoBackground.tsx

@@ -55,5 +55,5 @@ export const TreeViewCompactNoBackground: React.FunctionComponent = () => {
       ]
     }
   ];
-  return <TreeView data={options} variant="compactNoBackground" />;
+  return <TreeView aria-label="Tree View compact no background example" data={options} variant="compactNoBackground" />;
 };

package/src/components/TreeView/examples/TreeViewGuides.tsx

@@ -61,5 +61,5 @@ export const GuidesTreeView: React.FunctionComponent = () => {
       children: [{ name: 'Application 5', id: 'example8-App5' }]
     }
   ];
-  return <TreeView data={options} hasGuides={true} />;
+  return <TreeView aria-label="Tree View guides example" data={options} hasGuides={true} />;
 };

package/src/components/TreeView/examples/TreeViewMultiselectable.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
+
+export const TreeViewMultiselectable: React.FunctionComponent = () => {
+  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>([]);
+
+  const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
+    // Ignore folders for selection
+    if (treeViewItem && !treeViewItem.children) {
+      setActiveItems((prevActiveItems) => [...prevActiveItems, treeViewItem]);
+    }
+  };
+
+  const options = [
+    {
+      name: 'Application launcher',
+      id: 'multiselectExample-AppLaunch',
+      children: [
+        {
+          name: 'Application 1',
+          id: 'multiselectExample-App1',
+          children: [
+            { name: 'Settings', id: 'multiselectExample-App1Settings' },
+            { name: 'Current', id: 'multiselectExample-App1Current' }
+          ]
+        },
+        {
+          name: 'Application 2',
+          id: 'multiselectExample-App2',
+          children: [
+            { name: 'Settings', id: 'multiselectExample-App2Settings' },
+            {
+              name: 'Loader',
+              id: 'multiselectExample-App2Loader',
+              children: [
+                { name: 'Loading App 1', id: 'multiselectExample-LoadApp1' },
+                { name: 'Loading App 2', id: 'multiselectExample-LoadApp2' },
+                { name: 'Loading App 3', id: 'multiselectExample-LoadApp3' }
+              ]
+            }
+          ]
+        }
+      ],
+      defaultExpanded: true
+    },
+    {
+      name: 'Cost management',
+      id: 'multiselectExample-Cost',
+      children: [
+        {
+          name: 'Application 3',
+          id: 'multiselectExample-App3',
+          children: [
+            { name: 'Settings', id: 'multiselectExample-App3Settings' },
+            { name: 'Current', id: 'multiselectExample-App3Current' }
+          ]
+        }
+      ]
+    },
+    {
+      name: 'Sources',
+      id: 'multiselectExample-Sources',
+      children: [
+        {
+          name: 'Application 4',
+          id: 'multiselectExample-App4',
+          children: [{ name: 'Settings', id: 'multiselectExample-App4Settings' }]
+        }
+      ]
+    },
+    {
+      name: 'Really really really long folder name that overflows the container it is in',
+      id: 'multiselectExample-Long',
+      children: [{ name: 'Application 5', id: 'multiselectExample-App5' }]
+    }
+  ];
+  return (
+    <TreeView
+      aria-label="Tree View multiselectable example"
+      isMultiSelectable
+      data={options}
+      activeItems={activeItems}
+      onSelect={onSelect}
+    />
+  );
+};

package/src/components/TreeView/examples/TreeViewSelectionExpansion.tsx

@@ -71,5 +71,13 @@ export const TreeViewSelectableNodes: React.FunctionComponent = () => {
       children: [{ name: 'Application 5', id: 'SelNodesTreeView-App5' }]
     }
   ];
-  return <TreeView hasSelectableNodes data={options} activeItems={activeItems} onSelect={onSelect} />;
+  return (
+    <TreeView
+      aria-label="Tree View separate selection and expansion example"
+      hasSelectableNodes
+      data={options}
+      activeItems={activeItems}
+      onSelect={onSelect}
+    />
+  );
 };

package/src/components/TreeView/examples/{TreeViewDefault.tsx → TreeViewSingleSelectable.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TreeView, Button, TreeViewDataItem } from '@patternfly/react-core';
 
-export const TreeViewDefault: React.FunctionComponent = () => {
+export const TreeViewSingleSelectable: React.FunctionComponent = () => {
   const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
   const [allExpanded, setAllExpanded] = React.useState<boolean>();
 
@@ -81,7 +81,13 @@ export const TreeViewDefault: React.FunctionComponent = () => {
         {allExpanded && 'Collapse all'}
         {!allExpanded && 'Expand all'}
       </Button>
-      <TreeView data={options} activeItems={activeItems} onSelect={onSelect} allExpanded={allExpanded} />
+      <TreeView
+        aria-label="Tree View single selectable example"
+        data={options}
+        activeItems={activeItems}
+        onSelect={onSelect}
+        allExpanded={allExpanded}
+      />
     </React.Fragment>
   );
 };

package/src/components/TreeView/examples/TreeViewWithActionItems.tsx

@@ -136,5 +136,12 @@ export const TreeViewWithActionItems: React.FunctionComponent = () => {
       children: [{ name: 'Application 5', id: 'example7-App5' }]
     }
   ];
-  return <TreeView data={options} activeItems={activeItems} onSelect={onSelect} />;
+  return (
+    <TreeView
+      aria-label="Tree View with actions example"
+      data={options}
+      activeItems={activeItems}
+      onSelect={onSelect}
+    />
+  );
 };

package/src/components/TreeView/examples/TreeViewWithBadges.tsx

@@ -75,5 +75,13 @@ export const TreeViewBadges: React.FunctionComponent = () => {
     }
   ];
 
-  return <TreeView data={options} activeItems={activeItems} onSelect={onSelect} hasBadges />;
+  return (
+    <TreeView
+      aria-label="Tree View with badges example"
+      data={options}
+      activeItems={activeItems}
+      onSelect={onSelect}
+      hasBadges
+    />
+  );
 };

package/src/components/TreeView/examples/TreeViewWithCheckboxes.tsx

@@ -194,5 +194,5 @@ export const TreeViewWithCheckboxes: React.FunctionComponent = () => {
     }
   };
   const mapped = options.map((item) => mapTree(item));
-  return <TreeView data={mapped} onCheck={onCheck} hasCheckboxes />;
+  return <TreeView aria-label="Tree View with checkboxes example" data={mapped} onCheck={onCheck} hasCheckboxes />;
 };

package/src/components/TreeView/examples/TreeViewWithCustomBadges.tsx

@@ -82,5 +82,13 @@ export const TreeViewCustomBadges: React.FunctionComponent = () => {
       children: [{ name: 'Application 5', id: 'example6-App5' }]
     }
   ];
-  return <TreeView data={options} activeItems={activeItems} onSelect={onSelect} hasBadges />;
+  return (
+    <TreeView
+      aria-label="Tree View with custom badges example"
+      data={options}
+      activeItems={activeItems}
+      onSelect={onSelect}
+      hasBadges
+    />
+  );
 };

package/src/components/TreeView/examples/TreeViewWithIcons.tsx

@@ -73,6 +73,7 @@ export const TreeViewWithIcons: React.FunctionComponent = () => {
   ];
   return (
     <TreeView
+      aria-label="Tree View with icons example"
       data={options}
       activeItems={activeItems}
       onSelect={onSelect}

package/src/components/TreeView/examples/TreeViewWithMemoization.tsx

@@ -50,7 +50,14 @@ export const TreeViewWithMemoization: React.FunctionComponent = () => {
     options.push({ name: 'Option ' + i, id: i.toString(), children: childOptions });
   }
   const tree = (
-    <TreeView data={options} activeItems={activeItems} onSelect={onSelect} allExpanded={allExpanded} useMemo />
+    <TreeView
+      aria-label="Tree View with memoization example"
+      data={options}
+      activeItems={activeItems}
+      onSelect={onSelect}
+      allExpanded={allExpanded}
+      useMemo
+    />
   );
 
   return (

package/src/components/TreeView/examples/TreeViewWithSearch.tsx

@@ -118,6 +118,7 @@ export const TreeViewWithSearch: React.FunctionComponent = () => {
 
   return (
     <TreeView
+      aria-label="Tree View with search example"
       data={filteredItems}
       activeItems={activeItems}
       onSelect={onSelect}