From 00cb0247a804eae6fdca574f82991dff006b7171 Mon Sep 17 00:00:00 2001 From: Simon Pieters Date: Wed, 3 Nov 2021 16:34:21 +0100 Subject: [PATCH] Update the implementation to set aria-selected onclick and fix tests --- examples/treeview/treeview-1/js/tree.js | 11 ++++-- examples/treeview/treeview-1/js/treeitem.js | 1 + test/tests/treeview_treeview-1a.js | 38 +++++++++++---------- test/tests/treeview_treeview-1b.js | 38 +++++++++++---------- 4 files changed, 50 insertions(+), 38 deletions(-) diff --git a/examples/treeview/treeview-1/js/tree.js b/examples/treeview/treeview-1/js/tree.js index d343575b4e..7609da941d 100644 --- 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 index be5a1ec52e..ab73045b39 100644 --- 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 index df9d85ad4e..4c0439d032 100644 --- 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 index a68e076fe0..9768d7c012 100644 --- 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());