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

Changes from 1 commit
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/treeview/treeview-1/js/tree.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,9 +93,11 @@ Tree.prototype.setFocusToItem = function (treeitem) {

if (ti === treeitem) {
ti.domNode.tabIndex = 0;
ti.domNode.ariaSelected = true;
Copy link
Contributor

Choose a reason for hiding this comment

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

To set the aria-selected attribute, you'd need to use el.setAttribute('aria-selected', 'true'). AOM attribute reflection isn't broadly supported, or stable.

The selected state should also likely be set to the actual selected item, and not the currently focused item. We should also probably look into adding a visual selected state, though we could conceivably add the attribute even without the visual state.

Copy link
Member

Choose a reason for hiding this comment

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

setAttribute fixed. Visual selected indicator not fixed yet. What should it look like?

ti.domNode.focus();
} else {
ti.domNode.tabIndex = -1;
ti.domNode.ariaSelected = false;
zcorpan marked this conversation as resolved.
Show resolved Hide resolved
}
}
};
Expand Down