Update the implementation to set aria-selected onclick and fix tests

w3c · Nov 3, 2021 · 00cb024 · 00cb024
1 parent 9987e3f
commit 00cb024
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 38 deletions.
diff --git a/examples/treeview/treeview-1/js/tree.js b/examples/treeview/treeview-1/js/tree.js
@@ -52,6 +52,7 @@ var Tree = function (node) {
 
   this.firstTreeitem = null;
   this.lastTreeitem = null;
+  this.selectedItem = null;
 };
 
 Tree.prototype.init = function () {
@@ -87,17 +88,23 @@ Tree.prototype.init = function () {
   this.firstTreeitem.domNode.tabIndex = 0;
 };
 
+Tree.prototype.setSelectedToItem = function (treeitem) {
+  if (this.selectedItem) {
+    this.selectedItem.domNode.setAttribute('aria-selected', 'false');
+  }
+  treeitem.domNode.setAttribute('aria-selected', 'true');
+  this.selectedItem = treeitem;
+};
+
 Tree.prototype.setFocusToItem = function (treeitem) {
   for (var i = 0; i < this.treeitems.length; i++) {
     var ti = this.treeitems[i];
 
     if (ti === treeitem) {
       ti.domNode.tabIndex = 0;
-      ti.domNode.setAttribute('aria-selected', 'true');
       ti.domNode.focus();
     } else {
       ti.domNode.tabIndex = -1;
-      ti.domNode.setAttribute('aria-selected', 'false');
     }
   }
 };

diff --git a/examples/treeview/treeview-1/js/treeitem.js b/examples/treeview/treeview-1/js/treeitem.js
@@ -220,6 +220,7 @@ Treeitem.prototype.handleClick = function (event) {
   } else {
     this.tree.setFocusToItem(this);
   }
+  this.tree.setSelectedToItem(this);
 };
 
 Treeitem.prototype.handleFocus = function () {

diff --git a/test/tests/treeview_treeview-1a.js b/test/tests/treeview_treeview-1a.js
@@ -102,30 +102,32 @@ ariaTest(
   exampleFile,
   'treeitem-aria-selected',
   async (t) => {
-    // Open all folders
-    await openAllFolders(t);
-
-    const treeitems = await t.context.queryElements(t, ex.treeitemSelector);
+    const items = await t.context.queryElements(t, ex.treeitemSelector);
 
-    for (let [index, treeitem] of treeitems.entries()) {
-      // Skip the last item, since we can't move focus beyond it
-      if (index === treeitems.length - 1) {
-        break;
-      }
-      await treeitem.sendKeys(Key.ARROW_DOWN);
-      t.is(
-        await treeitem.getAttribute('aria-selected'),
-        'false',
-        'treeitem should have aria-selected="false" after focus by sending key ARROW_DOWN'
+    for (let i = 0; i < items.length - 1; i++) {
+      await items[i].sendKeys(Key.ARROW_DOWN);
+      const nextItem = await t.context.queryElement(
+        t,
+        ex.treeitemSelector + '[tabindex="0"]'
       );
-      // move focus back to the previous item
-      await treeitems[index + 1].sendKeys(Key.ARROW_UP);
-      await treeitem.sendKeys(Key.ENTER);
+      const focusMoved = items[i] !== nextItem;
+      if (focusMoved) {
+        t.is(
+          await nextItem.getAttribute('aria-selected'),
+          'false',
+          'treeitem should have aria-selected="false" after focus by sending key ARROW_DOWN'
+        );
+        // move focus back to the previous item
+        await nextItem.sendKeys(Key.ARROW_UP);
+      }
+      await items[i].sendKeys(Key.ENTER);
       t.is(
-        await treeitem.getAttribute('aria-selected'),
+        await items[i].getAttribute('aria-selected'),
         'true',
         'treeitem should have aria-selected="true" after selecting by sending key ENTER'
       );
+      // move focus to the next item
+      await items[i].sendKeys(Key.ARROW_DOWN);
     }
     // Cleanup: reload page
     await t.context.session.get(await t.context.session.getCurrentUrl());

diff --git a/test/tests/treeview_treeview-1b.js b/test/tests/treeview_treeview-1b.js
@@ -134,30 +134,32 @@ ariaTest(
   exampleFile,
   'treeitem-aria-selected',
   async (t) => {
-    // Open all folders
-    await openAllFolders(t);
-
-    const treeitems = await t.context.queryElements(t, ex.treeitemSelector);
+    const items = await t.context.queryElements(t, ex.treeitemSelector);
 
-    for (let [index, treeitem] of treeitems.entries()) {
-      // Skip the last item, since we can't move focus beyond it
-      if (index === treeitems.length - 1) {
-        break;
-      }
-      await treeitem.sendKeys(Key.ARROW_DOWN);
-      t.is(
-        await treeitem.getAttribute('aria-selected'),
-        'false',
-        'treeitem should have aria-selected="false" after focus by sending key ARROW_DOWN'
+    for (let i = 0; i < items.length - 1; i++) {
+      await items[i].sendKeys(Key.ARROW_DOWN);
+      const nextItem = await t.context.queryElement(
+        t,
+        ex.treeitemSelector + '[tabindex="0"]'
       );
-      // move focus back to the previous item
-      await treeitems[index + 1].sendKeys(Key.ARROW_UP);
-      await treeitem.sendKeys(Key.ENTER);
+      const focusMoved = items[i] !== nextItem;
+      if (focusMoved) {
+        t.is(
+          await nextItem.getAttribute('aria-selected'),
+          'false',
+          'treeitem should have aria-selected="false" after focus by sending key ARROW_DOWN'
+        );
+        // move focus back to the previous item
+        await nextItem.sendKeys(Key.ARROW_UP);
+      }
+      await items[i].sendKeys(Key.ENTER);
       t.is(
-        await treeitem.getAttribute('aria-selected'),
+        await items[i].getAttribute('aria-selected'),
         'true',
         'treeitem should have aria-selected="true" after selecting by sending key ENTER'
       );
+      // move focus to the next item
+      await items[i].sendKeys(Key.ARROW_DOWN);
     }
     // Cleanup: reload page
     await t.context.session.get(await t.context.session.getCurrentUrl());