feat(TreeNode): set aria-current on current active node (#6937)

* feat(TreeNode): set aria-current on current active node * chore: update snapshots * Add aria-multiselectable="true" for multiselect tree * fix(TreeView): cast aria-multiselectable to null if falsey * chore: update snapshots Co-authored-by: Carolyn MacLeod <Carolyn_MacLeod@ca.ibm.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Oct 2, 2020 · 282bdd4 · 282bdd4
1 parent 744f76d
commit 282bdd4
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/packages/react/src/components/TreeView/TreeNode.js b/packages/react/src/components/TreeView/TreeNode.js
@@ -171,6 +171,7 @@ export default function TreeNode({
 
   const treeNodeProps = {
     ...rest,
+    ['aria-current']: isActive || null,
     ['aria-selected']: disabled ? null : isSelected,
     ['aria-disabled']: disabled,
     className: treeNodeClasses,

diff --git a/packages/react/src/components/TreeView/TreeView.js b/packages/react/src/components/TreeView/TreeView.js
@@ -161,6 +161,7 @@ export default function TreeView({
         {...rest}
         aria-label={hideLabel ? label : null}
         aria-labelledby={!hideLabel ? labelId : null}
+        aria-multiselectable={multiselect || null}
         className={treeClasses}
         onKeyDown={handleKeyDown}
         ref={treeRootRef}

diff --git a/packages/react/src/components/TreeView/__snapshots__/TreeView-test.js.snap b/packages/react/src/components/TreeView/__snapshots__/TreeView-test.js.snap
@@ -21,6 +21,7 @@ exports[`TreeView should render 1`] = `
   <ul
     aria-label={null}
     aria-labelledby="id1__label"
+    aria-multiselectable={null}
     className="bx--tree"
     onKeyDown={[Function]}
     role="tree"
@@ -41,6 +42,7 @@ exports[`TreeView should render 1`] = `
       value="1"
     >
       <li
+        aria-current={null}
         aria-selected={true}
         className="bx--tree-node bx--tree-node--selected bx--tree-leaf-node"
         id="1"
@@ -75,6 +77,7 @@ exports[`TreeView should render 1`] = `
       value="2"
     >
       <li
+        aria-current={null}
         aria-selected={false}
         className="bx--tree-node bx--tree-leaf-node"
         id="2"
@@ -109,6 +112,7 @@ exports[`TreeView should render 1`] = `
       value="5"
     >
       <li
+        aria-current={null}
         aria-expanded={true}
         aria-selected={false}
         className="bx--tree-node bx--tree-parent-node"
@@ -182,6 +186,7 @@ exports[`TreeView should render 1`] = `
             value="5-1"
           >
             <li
+              aria-current={null}
               aria-selected={false}
               className="bx--tree-node bx--tree-leaf-node"
               id="5-1"
@@ -214,6 +219,7 @@ exports[`TreeView should render 1`] = `
             value="5-2"
           >
             <li
+              aria-current={null}
               aria-selected={false}
               className="bx--tree-node bx--tree-leaf-node"
               id="5-2"
@@ -247,6 +253,7 @@ exports[`TreeView should render 1`] = `
             value="5-3"
           >
             <li
+              aria-current={null}
               aria-expanded={true}
               aria-selected={false}
               className="bx--tree-node bx--tree-parent-node"
@@ -320,6 +327,7 @@ exports[`TreeView should render 1`] = `
                   value="5-4"
                 >
                   <li
+                    aria-current={null}
                     aria-selected={false}
                     className="bx--tree-node bx--tree-leaf-node"
                     id="5-4"
@@ -367,6 +375,7 @@ exports[`TreeView should render with icons 1`] = `
   <ul
     aria-label={null}
     aria-labelledby="id3__label"
+    aria-multiselectable={null}
     className="bx--tree"
     onKeyDown={[Function]}
     role="tree"
@@ -393,6 +402,7 @@ exports[`TreeView should render with icons 1`] = `
       value="1"
     >
       <li
+        aria-current={null}
         aria-selected={true}
         className="bx--tree-node bx--tree-node--selected bx--tree-node--with-icon bx--tree-leaf-node"
         id="1"
@@ -464,6 +474,7 @@ exports[`TreeView should render with icons 1`] = `
       value="2"
     >
       <li
+        aria-current={null}
         aria-selected={false}
         className="bx--tree-node bx--tree-node--with-icon bx--tree-leaf-node"
         id="2"
@@ -536,6 +547,7 @@ exports[`TreeView should render with icons 1`] = `
       value="5"
     >
       <li
+        aria-current={null}
         aria-expanded={true}
         aria-selected={false}
         className="bx--tree-node bx--tree-node--with-icon bx--tree-parent-node"
@@ -644,6 +656,7 @@ exports[`TreeView should render with icons 1`] = `
             value="5-1"
           >
             <li
+              aria-current={null}
               aria-selected={false}
               className="bx--tree-node bx--tree-node--with-icon bx--tree-leaf-node"
               id="5-1"
@@ -714,6 +727,7 @@ exports[`TreeView should render with icons 1`] = `
             value="5-2"
           >
             <li
+              aria-current={null}
               aria-selected={false}
               className="bx--tree-node bx--tree-node--with-icon bx--tree-leaf-node"
               id="5-2"
@@ -785,6 +799,7 @@ exports[`TreeView should render with icons 1`] = `
             value="5-3"
           >
             <li
+              aria-current={null}
               aria-expanded={true}
               aria-selected={false}
               className="bx--tree-node bx--tree-node--with-icon bx--tree-parent-node"
@@ -893,6 +908,7 @@ exports[`TreeView should render with icons 1`] = `
                   value="5-4"
                 >
                   <li
+                    aria-current={null}
                     aria-selected={false}
                     className="bx--tree-node bx--tree-node--with-icon bx--tree-leaf-node"
                     id="5-4"