Merge pull request #2354 from looker-open-source/elliot/tree-nested-item-role-none

fix(Tree): Added explicit role="none" to nested TreeItem in Tree

Author: Elliot Park

packages/components/src/List/ListItemLabel.tsx

@@ -82,7 +82,7 @@ type ListItemLabelProps = CompatibleHTMLProps<HTMLElement> &
 export const ListItemLabel = styled(ListItemLabelLayout).withConfig({
   shouldForwardProp: (prop) => prop === 'itemRole' || shouldForwardProp(prop),
 })`
-  ${({ height, itemRole }) => itemRole === 'none' && `height: ${height}px;`}
+  ${({ height, itemRole }) => itemRole === 'none' && `min-height: ${height}px;`}
   ${listItemBackgroundColor}
 
   align-items: center;

packages/components/src/Tree/Tree.tsx

@@ -128,6 +128,7 @@ const TreeLayout: FC<TreeProps> = ({
     },
   }
 
+  const treeItemInnerRole = 'none'
   const label = (
     <TreeItemInner
       color={color}
@@ -136,6 +137,8 @@ const TreeLayout: FC<TreeProps> = ({
       disabled={disabled}
       icon={icon}
       truncate={truncate}
+      itemRole={treeItemInnerRole}
+      role={treeItemInnerRole}
     >
       {propsLabel}
     </TreeItemInner>

packages/components/src/Tree/TreeItem.test.tsx

@@ -82,6 +82,9 @@ describe('TreeItem', () => {
   })
 
   test('Triggers onClickWhitespace when indent padding is clicked, itemRole = "none", and labelBackgroundOnly = true', () => {
+    // eslint-disable-next-line no-console
+    console.warn = jest.fn()
+
     const onClickWhitespace = jest.fn()
 
     // This onClick should be ignored within ListItem since the item has itemRole="none"
@@ -106,9 +109,12 @@ describe('TreeItem', () => {
       </Tree>
     )
 
+    // eslint-disable-next-line no-console
+    expect(console.warn).toHaveBeenCalled()
+
     // Expect indent padding click to trigger TreeItem onClickWhitespace (i.e. non-TreeItem child click)
     // Note: This selector may need to change once Tree ARIA roles are implemented
-    fireEvent.click(screen.getAllByRole('none')[1])
+    fireEvent.click(screen.getAllByRole('none')[2])
     expect(onClickWhitespace).toHaveBeenCalledTimes(1)
 
     // Do not expect click on label to trigger click handlers