[terra-folder-tree] Update cursor style for interactable regions (#1937)

cerner · Dec 7, 2023 · 1d4b87c · 1d4b87c
1 parent f16b226
commit 1d4b87c
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 16 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/terra-folder-tree/CHANGELOG.md b/packages/terra-folder-tree/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Updated cursor style to pointer for clickable regions.
+
 ## 1.0.0-alpha.2 - (December 5, 2023)
 
 * Added

diff --git a/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx b/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.jsx
@@ -98,27 +98,38 @@ const FolderTreeItem = ({
     cx(
       'folder-tree-item',
       { selected: isSelected },
-      { folder: isFolder },
       theme.className,
     ),
   );
 
+  const handleToggle = (event) => {
+    if (event.target.nodeName === 'INPUT') {
+      return;
+    }
+
+    if (onToggle) {
+      onToggle();
+    }
+  };
+
   return (
     <>
+      {/* TODO: Re-enable this eslint rule once keyboard handling is implemented */}
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
       <li
         className={itemClassNames}
         role="treeitem"
         aria-expanded={isFolder ? isExpanded : null}
         aria-selected={isSelected}
-        onClick={onToggle}
-        onKeyDown={onToggle}
+        onClick={isFolder ? handleToggle : onClick}
       >
         <input
           type="radio"
           checked={isSelected}
           onChange={onClick}
           aria-hidden // Hiding the radio button from assistive technology since they cannot be grouped correctly
           tabIndex={-1} // Prevent tabbing to the button since it should not be read or acknowledged by assistive technology
+          className={cx('radio')}
         />
         {/* eslint-disable-next-line react/forbid-dom-props */}
         <span style={{ paddingLeft: `${level}rem` }}>

diff --git a/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.module.scss b/packages/terra-folder-tree/src/subcomponents/FolderTreeItem.module.scss
@@ -15,12 +15,9 @@
 
     &:hover {
       background-color: var(--terra-folder-tree-item-hover-background-color, #f4fafe);
+      cursor: pointer;
     }
   }
-
-  .folder:hover {
-    cursor: pointer;
-  }
 
   .selected {
     background-color: var(--terra-folder-tree-item-selected-background-color, darken(#ebf6fd, 2%));
@@ -31,4 +28,8 @@
     margin: 0;
     padding: 0;
   }
+
+  .radio:hover {
+    cursor: pointer;
+  }
 }
diff --git a/packages/terra-folder-tree/tests/jest/FolderTree.test.jsx b/packages/terra-folder-tree/tests/jest/FolderTree.test.jsx
@@ -82,4 +82,26 @@ describe('basic folder tree', () => {
     expect(expandedFolder.find('.folder-tree-item').prop('aria-expanded')).toBe(true);
     expect(expandedFolder.find('.subfolder').prop('hidden')).toBe(false);
   });
+
+  it('does not trigger expand/collapse on folder selection', () => {
+    const onClick = jest.fn();
+    const onToggle = jest.fn();
+
+    const wrapper = shallowWithIntl(
+      <FolderTreeItem
+        label="Animals"
+        onClick={onClick}
+        onToggle={onToggle}
+        subfolderItems={[
+          (<FolderTreeItem label="Dog" />),
+        ]}
+      />,
+    ).dive();
+
+    const radioButton = wrapper.find('.radio');
+    radioButton.simulate('change');
+
+    expect(onClick).toHaveBeenCalled();
+    expect(onToggle).not.toHaveBeenCalled();
+  });
 });
diff --git a/packages/terra-framework-docs/CHANGELOG.md b/packages/terra-framework-docs/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Updated examples and tests for `terra-folder-tree`.
+
 ## 1.50.0 - (December 5, 2023)
 
 * Added

diff --git a/...framework-docs/src/terra-dev-site/doc/folder-tree/Examples.2/ExpandCollapseFolderTree.jsx b/...framework-docs/src/terra-dev-site/doc/folder-tree/Examples.2/ExpandCollapseFolderTree.jsx
@@ -16,6 +16,10 @@ const ExpandCollapseFolderTree = () => {
     'projects-4': false,
   });
 
+  const handleSelect = (key) => {
+    setSelectedKey(key);
+  };
+
   const handleExpandCollapseKeys = (key) => {
     const newExpandedKeys = {
       ...expandedKeys,
@@ -35,31 +39,31 @@ const ExpandCollapseFolderTree = () => {
           key="projects"
           isSelected={selectedKey === 'projects'}
           isExpanded={expandedKeys.projects}
-          onClick={() => { setSelectedKey('projects'); }}
+          onClick={() => { handleSelect('projects'); }}
           onToggle={() => { handleExpandCollapseKeys('projects'); }}
           subfolderItems={[
             <FolderTree.Item
               label="Projects - Level 2"
               key="projects-2"
               isSelected={selectedKey === 'projects-2'}
               isExpanded={expandedKeys['projects-2']}
-              onClick={() => { setSelectedKey('projects-2'); handleExpandCollapseKeys('projects-2'); }}
+              onClick={() => { handleSelect('projects-2'); }}
               onToggle={() => { handleExpandCollapseKeys('projects-2'); }}
               subfolderItems={[
                 <FolderTree.Item
                   label="Projects - Level 3"
                   key="projects-3"
                   isSelected={selectedKey === 'projects-3'}
                   isExpanded={expandedKeys['projects-3']}
-                  onClick={() => { setSelectedKey('projects-3'); handleExpandCollapseKeys('projects-3'); }}
+                  onClick={() => { handleSelect('projects-3'); }}
                   onToggle={() => { handleExpandCollapseKeys('projects-3'); }}
                   subfolderItems={[
                     <FolderTree.Item
                       label="Projects - Level 4"
                       key="projects-4"
                       isSelected={selectedKey === 'projects-4'}
                       isExpanded={expandedKeys['projects-4']}
-                      onClick={() => { setSelectedKey('projects-4'); handleExpandCollapseKeys('projects-4'); }}
+                      onClick={() => { handleSelect('projects-4'); }}
                       onToggle={() => { handleExpandCollapseKeys('projects-4'); }}
                       subfolderItems={[
                         <FolderTree.Item

diff --git a/...erra-framework-docs/src/terra-dev-site/test/folder-tree/ExpandCollapseFolderTree.test.jsx b/...erra-framework-docs/src/terra-dev-site/test/folder-tree/ExpandCollapseFolderTree.test.jsx
@@ -10,6 +10,10 @@ const ExpandCollapseFolderTree = () => {
     'projects-4': false,
   });
 
+  const handleSelect = (key) => {
+    setSelectedKey(key);
+  };
+
   const handleExpandCollapseKeys = (key) => {
     const newExpandedKeys = {
       ...expandedKeys,
@@ -29,31 +33,31 @@ const ExpandCollapseFolderTree = () => {
           key="projects"
           isSelected={selectedKey === 'projects'}
           isExpanded={expandedKeys.projects}
-          onClick={() => { setSelectedKey('projects'); }}
+          onClick={() => { handleSelect('projects'); }}
           onToggle={() => { handleExpandCollapseKeys('projects'); }}
           subfolderItems={[
             <FolderTree.Item
               label="Projects - Level 2"
               key="projects-2"
               isSelected={selectedKey === 'projects-2'}
               isExpanded={expandedKeys['projects-2']}
-              onClick={() => { setSelectedKey('projects-2'); handleExpandCollapseKeys('projects-2'); }}
+              onClick={() => { handleSelect('projects-2'); }}
               onToggle={() => { handleExpandCollapseKeys('projects-2'); }}
               subfolderItems={[
                 <FolderTree.Item
                   label="Projects - Level 3"
                   key="projects-3"
                   isSelected={selectedKey === 'projects-3'}
                   isExpanded={expandedKeys['projects-3']}
-                  onClick={() => { setSelectedKey('projects-3'); handleExpandCollapseKeys('projects-3'); }}
+                  onClick={() => { handleSelect('projects-3'); }}
                   onToggle={() => { handleExpandCollapseKeys('projects-3'); }}
                   subfolderItems={[
                     <FolderTree.Item
                       label="Projects - Level 4"
                       key="projects-4"
                       isSelected={selectedKey === 'projects-4'}
                       isExpanded={expandedKeys['projects-4']}
-                      onClick={() => { setSelectedKey('projects-4'); handleExpandCollapseKeys('projects-4'); }}
+                      onClick={() => { handleSelect('projects-4'); }}
                       onToggle={() => { handleExpandCollapseKeys('projects-4'); }}
                       subfolderItems={[
                         <FolderTree.Item