@patternfly/react-core 6.2.1-prerelease.10 → 6.2.1-prerelease.12

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.9","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.11","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.9","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.11","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.9","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.11","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.2.1-prerelease.10",
+  "version": "6.2.1-prerelease.12",
   "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 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "90ff9367d3999b6f80ee32f43b25e00eaf0fe6e0"
+  "gitHead": "f4c999c9871ae063b285c4f324bdc4e82d6b7118"
 }

package/src/components/CodeBlock/examples/CodeBlockBasic.tsx

@@ -38,7 +38,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
         <ClipboardCopyButton
           id="basic-copy-button"
           textId="code-content"
-          aria-label="Copy to clipboard"
+          aria-label="Copy to clipboard basic example code block"
           onClick={(e) => onClick(e, code)}
           exitDelay={copied ? 1500 : 600}
           maxWidth="110px"

package/src/components/CodeBlock/examples/CodeBlockExpandable.tsx

@@ -17,6 +17,7 @@ export const ExpandableCodeBlock: React.FunctionComponent = () => {
   const [isRunning, setisRunning] = useState(false);
   const runText: string = 'Run in web terminal';
   const doneRunText: string = 'Running in web terminal';
+  const toggleId: string = 'expandable-code-toggle';
 
   const onToggle = (isExpanded) => {
     setIsExpanded(isExpanded);
@@ -85,12 +86,18 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
     <CodeBlock actions={actions}>
       <CodeBlockCode>
         {code}
-        <ExpandableSection isExpanded={isExpanded} isDetached contentId="code-block-expand">
+        <ExpandableSection isExpanded={isExpanded} isDetached contentId="code-block-expand" toggleId={toggleId}>
           {expandedCode}
         </ExpandableSection>
       </CodeBlockCode>
-      <ExpandableSectionToggle isExpanded={isExpanded} onToggle={onToggle} contentId="code-block-expand" direction="up">
-        {isExpanded ? 'Show Less' : 'Show More'}
+      <ExpandableSectionToggle
+        isExpanded={isExpanded}
+        onToggle={onToggle}
+        contentId="code-block-expand"
+        direction="up"
+        toggleId={toggleId}
+      >
+        {isExpanded ? 'Show less expandable example content' : 'Show more expandable example content'}
       </ExpandableSectionToggle>
     </CodeBlock>
   );

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