Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

File Viewer Tree Examples: Add aria-selected #1869

Merged
merged 26 commits into from
Nov 15, 2021
Merged

File Viewer Tree Examples: Add aria-selected #1869

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
a8ebc01
Set aria selected to active tree view item
kdoberst Apr 23, 2021
2d96a4b
Apply suggestions from code review
zcorpan Oct 29, 2021
e93dbfd
Add aria-selected=false to all treeitems
zcorpan Nov 2, 2021
9987e3f
Add aria-selected documentation and tests (WIP, test is failing)
zcorpan Nov 3, 2021
fbaacd6
Update the implementation to set aria-selected onclick and fix tests
zcorpan Nov 3, 2021
63f4875
added "My Documents" label for "File Viewer" heading
howard-e Nov 10, 2021
907999f
stop ENTER from expanding/collapsing tree; support selecting with ENTER
howard-e Nov 10, 2021
16bad82
revised treeview-1a regression tests
howard-e Nov 10, 2021
a052ded
revised treeview-1b regression tests
howard-e Nov 10, 2021
c680fd8
revised regression tests
howard-e Nov 10, 2021
694b123
visual indicator
howard-e Nov 10, 2021
05c93b6
remove transparent border
howard-e Nov 10, 2021
8519342
aligning visual indicator more with treeview-navigation example
howard-e Nov 10, 2021
d7af925
Merge remote-tracking branch 'origin/main' into pull-1869
mcking65 Nov 12, 2021
bfa789f
Merge remote-tracking branch 'origin/main' into pull-1869
mcking65 Nov 13, 2021
356bcc5
Improve intro
mcking65 Nov 13, 2021
4b337c7
Improve intro
mcking65 Nov 13, 2021
cbb4486
editorial revisions to keyboard documentation
mcking65 Nov 13, 2021
3dc9bfa
Update states and properties documentation
mcking65 Nov 13, 2021
72d3334
Replace named entity for quote with quote char inside code tag elements
mcking65 Nov 13, 2021
58d6da7
Change IDREF to ID_REFERENCE
mcking65 Nov 13, 2021
8fa0ee6
fix white space
mcking65 Nov 13, 2021
583e944
Remove aria-label from h3 element
mcking65 Nov 13, 2021
8d649b5
Add info about selection not following focus to kb documentation section
mcking65 Nov 13, 2021
f623ddb
File Viewer Tree Example: fix for broken icons on declared properties…
howard-e Nov 15, 2021
fa2b72c
File Viewer Tree Example: behavior of SPACE changed to be the same as…
howard-e Nov 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -817,6 +817,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<li><a href="listbox/listbox-scrollable.html">Scrollable Listbox</a></li>
<li><a href="tabs/tabs-1/tabs.html">Tabs with Automatic Activation</a></li>
<li><a href="tabs/tabs-2/tabs.html">Tabs with Manual Activation</a></li>
<li><a href="treeview/treeview-1/treeview-1a.html">File Directory Treeview Using Computed Properties</a></li>
<li><a href="treeview/treeview-1/treeview-1b.html">File Directory Treeview Using Declared Properties</a></li>
</ul>
</td>
</tr>
Expand Down
22 changes: 21 additions & 1 deletion examples/treeview/treeview-1/css/tree.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,20 @@ ul[role="tree"] {
font-size: 120%;
}

ul[role="tree"] li {
margin: 0;
padding: 0;
list-style: none;
}

[role="treeitem"][aria-expanded="false"] + [role="group"] {
display: none;
}

[role="treeitem"][aria-expanded="true"] + [role="group"] {
display: block;
}

[role="treeitem"].doc::before {
font-family: "Font Awesome 5 Free";
content: "\f15c";
Expand Down Expand Up @@ -45,7 +59,6 @@ ul[role="tree"] {
width: 9em;
margin: 0;
padding: 0.125em;
border: 2px transparent solid;
display: block;
}

Expand All @@ -55,6 +68,11 @@ ul[role="tree"] {
outline: 0;
}

[role="treeitem"][aria-selected="true"] {
padding-left: 4px;
border-left: 5px solid #005a9c;
}

[role="treeitem"].focus,
[role="treeitem"] span.focus {
border-color: black;
Expand All @@ -63,5 +81,7 @@ ul[role="tree"] {

[role="treeitem"].hover,
[role="treeitem"] span:hover {
padding-left: 4px;
background-color: #ddd;
border-left: 5px solid #333;
}
9 changes: 9 additions & 0 deletions examples/treeview/treeview-1/js/tree.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ var Tree = function (node) {

this.firstTreeitem = null;
this.lastTreeitem = null;
this.selectedItem = null;
};

Tree.prototype.init = function () {
Expand Down Expand Up @@ -87,6 +88,14 @@ Tree.prototype.init = function () {
this.firstTreeitem.domNode.tabIndex = 0;
};

Tree.prototype.setSelectedToItem = function (treeitem) {
if (this.selectedItem) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think of mirroring how setFocusToItem is implemented with something like:

  for (let i = 0; i < this.treeitems.length; i++) {
    const ti = this.treeitems[i];
    if (ti === treeitem) {
      ti.domNode.setAttribute('aria-selected', 'true');
    } else {
      ti.domNode.removeAttribute('aria-selected');
    }
  }

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];
Expand Down
27 changes: 14 additions & 13 deletions examples/treeview/treeview-1/js/treeitem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,10 +100,8 @@ Treeitem.prototype.isExpanded = function () {
/* EVENT HANDLERS */

Treeitem.prototype.handleKeydown = function (event) {
var tgt = event.currentTarget,
flag = false,
char = event.key,
clickEvent;
var flag = false,
char = event.key;

function isPrintableCharacter(str) {
return str.length === 1 && str.match(/\S/);
Expand Down Expand Up @@ -131,16 +129,18 @@ Treeitem.prototype.handleKeydown = function (event) {
}
} else {
switch (event.keyCode) {
case this.keyCode.SPACE:
case this.keyCode.RETURN:
// Create simulated mouse event to mimic the behavior of ATs
// and let the event handler handleClick do the housekeeping.
clickEvent = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true,
});
tgt.dispatchEvent(clickEvent);
case this.keyCode.SPACE:
var treeitem = event.currentTarget;
var label = treeitem.getAttribute('aria-label');
if (!label) {
var child = treeitem.firstElementChild;
label = child ? child.innerText : treeitem.innerText;
}
document.getElementById('last_action').value = label.trim();

if (!this.isExpandable) this.tree.setFocusToItem(this);
this.tree.setSelectedToItem(this);
flag = true;
break;

Expand Down Expand Up @@ -212,6 +212,7 @@ Treeitem.prototype.handleClick = function (event) {
} else {
this.tree.setFocusToItem(this);
}
this.tree.setSelectedToItem(this);
};

Treeitem.prototype.handleFocus = function () {
Expand Down
Loading