Navigation Treeview Example: Convert to single page example with functionality equivalent to disclosure navigation example #1558

jongund · 2020-10-07T21:37:13Z

Resolves #1526 by revising the navigation tree view example.

Changes:

Deleted previous treeview for links examples
Created a new file treeview-navigation.html

To dos:

Change images for collapsing and expanding treeitems to use SVG
Regression tests still need to be completed.

Preview link

View revised example in compare branch

Review checklist

Preview | Diff

github-actions · 2020-10-07T21:37:56Z

Regression test coverage:

Examples without any regression tests:

dialog-modal/alertdialog.html

Examples missing some regression tests:

dialog-modal/datepicker-dialog.html:
- textbox-aria-describedby
menu-button/menu-button-actions-active-descendant.html:
- menu-up-arrow
- menu-down-arrow
- menu-character
toolbar/toolbar.html:
- toolbar-tab
- toolbar-right-arrow
- toolbar-left-arrow
- toolbar-home
- toolbar-end
- toolbar-toggle-esc
- toolbar-toggle-enter-or-space
- toolbar-radio-enter-or-space
- toolbar-radio-down-arrow
- toolbar-radio-up-arrow
- toolbar-button-enter-or-space
- toolbar-menubutton-enter-or-space-or-down-or-up
- toolbar-menu-enter-or-space
- toolbar-menu-down-arrow
- toolbar-menu-up-arrow
- toolbar-menu-escape
- toolbar-spinbutton-down-arrow
- toolbar-spinbutton-up-arrow
- toolbar-spinbutton-page-down
- toolbar-spinbutton-page-up
- toolbar-checkbox-space
- toolbar-link-enter-or-space
- toolbar-spinbutton-role

Example pages with Keyboard or Attribute table rows that do not have data-test-ids:

dialog-modal/alertdialog.html
- "Keyboard Support" table(s):
  - Tab
  - Shift + Tab
  - Escape
  - Command + S
  - Control + S
- "Attributes" table(s):
  - alertdialog
  - aria-labelledby=IDREF
  - aria-describedby=IDREF
  - aria-modal=true
  - alert

SUMMARY:

54 example pages found.
1 example pages have no regression tests.
3 example pages are missing approximately 27 out of approximately 769 tests.

ERROR - missing tests:

Please write missing tests for this report to pass.

jongund · 2020-10-07T21:56:33Z

@spectranaut
What does Travis CI failing mean?
Is this something I should worry about?

nschonni · 2020-10-07T22:15:30Z

@jongund it's flagging some HTML validator issues

"file:/home/travis/build/w3c/aria-practices/examples/treeview/treeview-navigation.html":223.13-223.85: error: The “main” element must not appear as a descendant of the “section” element.

"file:/home/travis/build/w3c/aria-practices/examples/treeview/treeview-navigation.html":223.13-223.85: error: The “main” element must not appear as a descendant of the “main” element.

"file:/home/travis/build/w3c/aria-practices/examples/treeview/treeview-navigation.html":223.13-223.85: error: A document must not include more than one visible “main” element.

"file:/home/travis/build/w3c/aria-practices/examples/treeview/treeview-navigation.html":508.62-508.69: error: Stray end tag “group”.

"file:/home/travis/build/w3c/aria-practices/examples/treeview/treeview-navigation.html":508.136-508.140: error: End tag “td” seen, but there were open elements.

"file:/home/travis/build/w3c/aria-practices/examples/treeview/treeview-navigation.html":508.51-508.56: error: Unclosed element “code”.

examples/treeview/treeview-navigation.html

Co-authored-by: Nick Schonning <nschonni@gmail.com>

mcking65 · 2020-10-13T09:53:09Z

@jongund, thank you, this is wonderful progress!

Do we need that much filler content? It takes a long time to read through it. Can we have short, simple content that matches what we have in the
Example Disclosure for Navigation Menus

Instead of a complementary landmark region for the filler, can we use a region named "Mythical University sample page content"? That is what we have on the disclosure example page.

In the disclosure example, activating a link moves focus to the heading of the content. Shouldn't we do the same here?

mcking65 · 2020-10-13T09:57:20Z

When the page loads, the home content page is displayed, but it doesn't have aria-current set.

mcking65 · 2020-10-13T10:04:14Z

I expanded about and loaded overview. If I refresh the page, the about branch is collapsed so the user can't see which page is current.

Should the current page always receive focus when tabbing into the tree?

After expanding a parent tree item, the name seems to get duplicated. For example, JAWS reads about as "Open about about".

jongund · 2020-10-15T22:34:33Z

@mcking65
Made some updates to reduce filler content and set tabindex=0 on the current page.

mcking65 · 2020-12-15T02:01:50Z

@jongund commented:

I removed the section about default borders around treeitems, we only need default borders around buttons.

Thank you!

I also added a note in the "Focus Movement After Content Load" section when keyboard focus is moved:
Note: Keyboard only users will need to navigate back to the navigation treeview to activate other items to view changes in content. To make navigation back to the treeview efficient, the treeview should be one tab stop away from the element with focus.

Excellent addition. Thank you.

I revised a bit to remove the word "should", reduce words, and to emphasize the need for the design to accommodate the tab sequence. We wouldn't want people to make a visually unpredictable tab sequence to make it 1 tab stop away.

…update-tree-nav

a11ydoer · 2020-12-15T18:16:55Z

Communicating with @jongund regarding color contrast issue. - tree item links in hover status.

Foreground color, #005a9c and Background color #ccc has color contrast ratio of 4.44:1. This fails Nomal text size WCAG AA, WCAG AAA, Large text WCAG AAA.

Here is the CSS code.
.treeview-navigation a[role="treeitem"]:hover {
background-color: #ccc;
text-decoration: underline;
padding-left: 4px;
border-left: 5px solid #333;
}

.treeview-navigation a[role="treeitem"] {
margin: 0;
padding: 4px;
padding-left: 9px;
text-decoration: none;
color: #005a9c;
border: none;
display: block;
}

a11ydoer

Tree item link hover color contrast issue can be addressed before the merge.

jongund · 2020-12-15T19:47:23Z

@a11ydoer
Updated hover color

a11ydoer

Changed background color, #ADDDFF now has color contrast ratio of 4.94:1 and it pass Normal text WCAG AA, Large text WCAG AA and WCAG AAA.

a11ydoer · 2021-01-11T05:26:05Z

@mcking65 and @jnurthen
Would you two mind reviewing this PR so that we can merge this? Once you are done, please approve PR or check your name in review check list.

examples/treeview/treeview-navigation.html

jongund · 2021-01-12T21:45:41Z

@mcking65
Fixed bug with aria-current link being visible when treeview loses focus and added test case to regression tests. So this should be ready to merge.

Co-authored-by: Sarah Higley <smhigley@users.noreply.github.com>

nschonni · 2021-01-19T15:31:57Z

test/util/assertAriaOwns.js

+ * Confirm the aria-owns element.
+ *
+ * @param {obj} t                  - ava execution object
+ * @param {String} elementSelector - the element with aria-owns set


Suggested change

* @param {String} elementSelector - the element with aria-owns set

* @param {string} elementSelector - the element with aria-owns set

nschonni · 2021-01-19T15:33:15Z

examples/treeview/js/treeview-navigation.js

+/**
+ * ARIA Treeview example
+ * @function onload
+ * @desc  after page has loaded initialize all treeitems based on the role=treeitem


Suggested change

* @desc after page has loaded initialize all treeitems based on the role=treeitem

* @description after page has loaded initialize all treeitems based on the role=treeitem

nschonni · 2021-01-19T15:33:51Z

examples/treeview/js/treeview-navigation.js

+    this.fillerTextSentences.push(
+      'The content on this page is associated with the <a href="$linkURL">$linkName</a> link for <a href="$siteURL">$siteName</a>.'
+    );
+    //  this.fillerTextSentences.push('The text content in this paragraph is filler text providing a detectable change of content when the <a href="$linkURL">$linkName</a> link is selected from the menu.  ');


Delete commented out code

nschonni · 2021-01-19T15:34:17Z

examples/treeview/js/treeview-navigation.js

+}
+
+/**
+ * ARIA Treeview example


Suggested change

* ARIA Treeview example

* ARIA Treeview example

*

mcking65 · 2021-01-19T15:34:39Z

@jongund
Thank you for all your work on this. This is a huge step forward!
We have all required reviews complete, all tests are passing, and this is now ready to ship!

carmacleod · 2021-01-19T16:25:47Z

@nschonni
It seems that your suggestions and Matt's review crossed paths within a minute of each other somewhere on the internet, so your suggestions weren't merged.
Maybe create a new little PR for your suggestions?

nschonni · 2021-01-19T17:35:04Z

Thanks @carmacleod I spun up #1728

jongund added 6 commits October 6, 2020 17:06

initial changes to treeview navigation

3aa7456

updated content creator

165b50c

updated dummy content

dcdf4fc

udpated generating content, added landmarks and added open siblings

c2ac656

wrote some intial test for treeview navigation

67cca26

updated landmarks

c8388f1

jongund added 3 commits October 7, 2020 16:42

updated landmarks

9f87f09

added word tuition to spelling

de7aa44

fixed spelling mistake

0d8021f

nschonni reviewed Oct 8, 2020

View reviewed changes

examples/treeview/treeview-navigation.html Outdated Show resolved Hide resolved

jongund and others added 7 commits October 8, 2020 08:23

Update examples/treeview/treeview-navigation.html

3c351ed

Co-authored-by: Nick Schonning <nschonni@gmail.com>

fixed some validation issues

c807321

fixed comment issue

3a1ab47

added links to content

995fb94

updated tests and added space to default action

500c5ad

updated links to source code

5c2ef38

fixed name function

b844cef

carmacleod self-requested a review October 13, 2020 18:57

a11ydoer self-requested a review October 13, 2020 18:57

jongund added 3 commits October 15, 2020 17:25

updated to use SVG images

11773e0

updated to use SVG images

708b63b

updated to use SVG images

c9a5505

fixed linting error

24c8d25

jongund and others added 2 commits December 14, 2020 10:18

made edits to note

1947ea0

Remove 'should' from Jon's keyboard note and simplify wording

1acbbbc

jongund added 3 commits December 15, 2020 09:15

fixed description of aria-current visual indication

91a4198

Merge branch 'update-tree-nav' of github.com:w3c/aria-practices into …

836829d

…update-tree-nav

add some padding to the main class

7708e74

a11ydoer requested changes Dec 15, 2020

View reviewed changes

improved hover color contrast

56d1d24

a11ydoer requested a review from jnurthen December 15, 2020 19:47

a11ydoer approved these changes Dec 15, 2020

View reviewed changes

mcking65 mentioned this pull request Dec 15, 2020

Add example of disclosure navigation with top-level links #1614

Merged

6 tasks

smhigley reviewed Jan 12, 2021

View reviewed changes

examples/treeview/treeview-navigation.html Outdated Show resolved Hide resolved

jongund added 2 commits January 12, 2021 14:07

fixed bug in aria-current being visible when treeview loses focus

7afebf0

added test case for aria-current always being visible

92b6c21

jongund and others added 3 commits January 13, 2021 09:24

Update examples/treeview/treeview-navigation.html

7f28a94

Co-authored-by: Sarah Higley <smhigley@users.noreply.github.com>

Merge in latest master and fix conflicts

529b455

Fix spelling in test script comment and update cspell.json

1f9ca3b

nschonni reviewed Jan 19, 2021

View reviewed changes

mcking65 merged commit f943b4d into master Jan 19, 2021

mcking65 deleted the update-tree-nav branch January 19, 2021 15:42

This was referenced Feb 22, 2021

Navigation Tree View Examples: Add support for aria-selected for indicating currently displayed page #366

Closed

Bug in examples treeview/treeview-2/*: key "left arrow" does not move to parent folder #866

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Navigation Treeview Example: Convert to single page example with functionality equivalent to disclosure navigation example #1558

Navigation Treeview Example: Convert to single page example with functionality equivalent to disclosure navigation example #1558

jongund commented Oct 7, 2020 •

edited by pr-preview bot

Loading

github-actions bot commented Oct 7, 2020 •

edited

Loading

jongund commented Oct 7, 2020

nschonni commented Oct 7, 2020

mcking65 commented Oct 13, 2020

mcking65 commented Oct 13, 2020

mcking65 commented Oct 13, 2020

jongund commented Oct 15, 2020

mcking65 commented Dec 15, 2020

a11ydoer commented Dec 15, 2020 •

edited

Loading

a11ydoer left a comment

jongund commented Dec 15, 2020

a11ydoer left a comment

a11ydoer commented Jan 11, 2021

jongund commented Jan 12, 2021

nschonni Jan 19, 2021

nschonni Jan 19, 2021

nschonni Jan 19, 2021

nschonni Jan 19, 2021

mcking65 commented Jan 19, 2021

carmacleod commented Jan 19, 2021

nschonni commented Jan 19, 2021

	* @param {String} elementSelector - the element with aria-owns set
	* @param {string} elementSelector - the element with aria-owns set

	* @desc after page has loaded initialize all treeitems based on the role=treeitem
	* @description after page has loaded initialize all treeitems based on the role=treeitem

Navigation Treeview Example: Convert to single page example with functionality equivalent to disclosure navigation example #1558

Navigation Treeview Example: Convert to single page example with functionality equivalent to disclosure navigation example #1558

Conversation

jongund commented Oct 7, 2020 • edited by pr-preview bot Loading

Preview link

Review checklist

github-actions bot commented Oct 7, 2020 • edited Loading

Regression test coverage:

Examples without any regression tests:

Examples missing some regression tests:

Example pages with Keyboard or Attribute table rows that do not have data-test-ids:

SUMMARY:

jongund commented Oct 7, 2020

nschonni commented Oct 7, 2020

mcking65 commented Oct 13, 2020

mcking65 commented Oct 13, 2020

mcking65 commented Oct 13, 2020

jongund commented Oct 15, 2020

mcking65 commented Dec 15, 2020

a11ydoer commented Dec 15, 2020 • edited Loading

a11ydoer left a comment

Choose a reason for hiding this comment

jongund commented Dec 15, 2020

a11ydoer left a comment

Choose a reason for hiding this comment

a11ydoer commented Jan 11, 2021

jongund commented Jan 12, 2021

nschonni Jan 19, 2021

Choose a reason for hiding this comment

nschonni Jan 19, 2021

Choose a reason for hiding this comment

nschonni Jan 19, 2021

Choose a reason for hiding this comment

nschonni Jan 19, 2021

Choose a reason for hiding this comment

mcking65 commented Jan 19, 2021

carmacleod commented Jan 19, 2021

nschonni commented Jan 19, 2021

jongund commented Oct 7, 2020 •

edited by pr-preview bot

Loading

github-actions bot commented Oct 7, 2020 •

edited

Loading

a11ydoer commented Dec 15, 2020 •

edited

Loading