Merge pull request #2336 from looker-open-source/elliot/tree-aria

fix(Tree): Properly pass down aria roles to nested Accordion

Author: Elliot Park

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

@@ -236,4 +236,36 @@ describe('Tree', () => {
       expect(screen.getByTestId('icon')).toHaveStyle('color: #939ba5')
     })
   })
+
+  describe('aria roles', () => {
+    test('selected Trees have aria-selected=true', () => {
+      renderWithTheme(
+        <Tree
+          color="calculation"
+          selected
+          label="Whatever"
+          icon={<Science data-testid="icon" />}
+        />
+      )
+      expect(screen.getAllByRole('treeitem')[0]).toHaveAttribute(
+        'aria-selected',
+        'true'
+      )
+    })
+
+    test('current Trees have aria-current=true', () => {
+      renderWithTheme(
+        <Tree
+          color="calculation"
+          current
+          label="Whatever"
+          icon={<Science data-testid="icon" />}
+        />
+      )
+      expect(screen.getAllByRole('treeitem')[0]).toHaveAttribute(
+        'aria-current',
+        'true'
+      )
+    })
+  })
 })

packages/components/src/Tree/Tree.tsx

@@ -47,6 +47,7 @@ const TreeLayout: FC<TreeProps> = ({
   border: propsBorder,
   children,
   className,
+  current,
   density: propsDensity,
   detail: propsDetail,
   disabled,
@@ -141,6 +142,8 @@ const TreeLayout: FC<TreeProps> = ({
   const indicatorColor = disabled ? 'text1' : 'text5'
   const innerAccordion = (
     <Accordion
+      aria-current={current}
+      aria-selected={selected}
       content={
         <List density={density} role="group" windowing="none">
           {children}
@@ -173,6 +176,7 @@ const TreeLayout: FC<TreeProps> = ({
         branchFontWeight={branchFontWeight}
         color={color}
         className={className}
+        current={current}
         depth={depth}
         disabled={disabled}
         dividers={dividers}