feat: compute treeitem aria-level

Author: MatanBobi

src/__tests__/role-helpers.js

@@ -3,6 +3,7 @@ import {
   logRoles,
   getImplicitAriaRoles,
   isInaccessible,
+  computeAriaLevel,
 } from '../role-helpers'
 import {render} from './helpers/test-utils'
 
@@ -72,6 +73,28 @@ function setup() {
     <dd data-testid="a-dd">Definition</dd>
    </dl>
 </section>
+
+    <ul role="tree" data-testid="a-tree">
+      <li role="treeitem" aria-expanded="false" tabIndex="0">
+        <span className="">Projects</span>
+        <ul role="group">
+          <li role="treeitem" className="doc" tabIndex="-1">
+            project-1.docx
+          </li>
+          <li role="treeitem" className="doc" tabIndex="-1">
+            project-2.docx
+          </li>
+          <li role="treeitem" aria-expanded="true" tabIndex="-1" data-testid="level2-treeitem">
+            <span className="">Project 3</span>
+            <ul role="group">
+              <li role="treeitem" className="doc" tabIndex="-1" data-testid="level3-treeitem">
+                project-3A.docx
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+    </ul>
   `)
 
   return {
@@ -107,6 +130,9 @@ function setup() {
     dt: getByTestId('a-dt'),
     dd: getByTestId('a-dd'),
     header: getByTestId('a-header'),
+    tree: getByTestId('a-tree'),
+    treeItem2: getByTestId('level2-treeitem'),
+    treeItem3: getByTestId('level3-treeitem'),
   }
 }
 
@@ -200,3 +226,9 @@ test.each([
 
   expect(isInaccessible(container.querySelector('button'))).toBe(expected)
 })
+
+test('computeAriaLevel', () => {
+  const {treeItem2, treeItem3} = setup()
+  expect(computeAriaLevel(treeItem2)).toBe(2)
+  expect(computeAriaLevel(treeItem3)).toBe(3)
+})

src/queries/role.js

@@ -6,7 +6,7 @@ import {
   computeAriaPressed,
   computeAriaCurrent,
   computeAriaExpanded,
-  computeHeadingLevel,
+  computeAriaLevel,
   getImplicitAriaRoles,
   prettyRoles,
   isInaccessible,
@@ -148,7 +148,7 @@ function queryAllByRole(
         return expanded === computeAriaExpanded(element)
       }
       if (level !== undefined) {
-        return level === computeHeadingLevel(element)
+        return level === computeAriaLevel(element)
       }
       // don't care if aria attributes are unspecified
       return true

src/role-helpers.js

@@ -280,6 +280,50 @@ function checkBooleanAttribute(element, attribute) {
   return undefined
 }
 
+/**
+ * @param {Element} element -
+ * @returns {number | undefined} - number if implicit heading or aria-level present, otherwise undefined
+ */
+function computeTreeItemLevel(element, level) {
+  // https://www.w3.org/TR/wai-aria-1.1/#treeitem
+  // https://www.w3.org/TR/wai-aria-1.1/#aria-level
+  if (element.getAttribute('role') === 'tree') {
+    return level
+  }
+
+  if (element.getAttribute('role') === 'treeitem') {
+    level += 1
+  }
+
+  if (element.parentElement) {
+    return computeTreeItemLevel(element.parentElement, level)
+  }
+
+  return undefined
+}
+
+/**
+ * @param {Element} element -
+ * @returns {number | undefined} - number if implicit aria-level can be inferred or aria-level present, otherwise undefined
+ */
+function computeAriaLevel(element) {
+  // implicit aria-level
+  if (element.getAttribute('role') === 'treeitem') {
+    return computeTreeItemLevel(element, 0)
+  }
+  if (getImplicitAriaRoles(element).includes('heading')) {
+    return computeHeadingLevel(element)
+  }
+
+  // explicit aria-level value
+  // https://www.w3.org/TR/wai-aria-1.2/#aria-level
+  const ariaLevelAttribute =
+    element.getAttribute('aria-level') &&
+    Number(element.getAttribute('aria-level'))
+
+  return ariaLevelAttribute
+}
+
 /**
  * @param {Element} element -
  * @returns {number | undefined} - number if implicit heading or aria-level present, otherwise undefined
@@ -295,13 +339,8 @@ function computeHeadingLevel(element) {
     H5: 5,
     H6: 6,
   }
-  // explicit aria-level value
-  // https://www.w3.org/TR/wai-aria-1.2/#aria-level
-  const ariaLevelAttribute =
-    element.getAttribute('aria-level') &&
-    Number(element.getAttribute('aria-level'))
 
-  return ariaLevelAttribute || implicitHeadingLevels[element.tagName]
+  return implicitHeadingLevels[element.tagName]
 }
 
 export {
@@ -316,5 +355,5 @@ export {
   computeAriaPressed,
   computeAriaCurrent,
   computeAriaExpanded,
-  computeHeadingLevel,
+  computeAriaLevel,
 }