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

Review Navigation Treeview Example Using Computed Properties #225

Closed
8 of 9 tasks
mcking65 opened this issue Dec 14, 2016 · 7 comments
Closed
8 of 9 tasks

Review Navigation Treeview Example Using Computed Properties #225

mcking65 opened this issue Dec 14, 2016 · 7 comments
Assignees
@shirsha
Labels
Example Page Related to a page containing an example implementation of a pattern
Milestone
1.1 APG Release 1

Comments

@mcking65
Copy link
Contributor

mcking65 commented Dec 14, 2016 •
edited
Loading

All clean up of the Navigation Treeview Example Using Computed Properties is complete and it is ready for final task force review.

Task Force Member Reviews Requested as of Nov 20, 2017

Required Updates
@mcking65 mcking65 added editorial Changes to prose that don't alter intended meaning, e.g., phrasing, grammar. May fix inaccuracies. needs edits labels Dec 14, 2016
@mcking65 mcking65 added this to the 1.1 PR milestone Dec 14, 2016
@mcking65 mcking65 modified the milestones: Feb 2017 Heartbeat Draft, 1.1 PR Jan 6, 2017
mcking65 added a commit that referenced this issue Feb 11, 2017
@mcking65
Revise Introduction of Navigation Treeview Example Using Computed Pro…
56bc1a8 
…perties

Modified examples/treeview/treeview-2/treeview-2a.html for issue #225:
* Corrected typos.
* Editorial revision to wording.
* Added description of function of the example.
* Revised statement that said treeitems cannot contain interactive elements because they can contain other treeitems.
mcking65 added a commit that referenced this issue Feb 13, 2017
@mcking65
Revise features, keyboard, and states/properties for Navigation Treev…
dd45548 
…iew Example Using Computed Properties

For issue #225, modified examples/treeview/treeview-2/treeview-2a.html:
* Under accessibility features, removed redundant information about computed level, setsize, and posinset.
* Under accessibility features, removed incorrect statement: "The expandable <code>treeitem</code> widgets cannot behave as links, their only action can be to open and close a leaf in the tree."
* Added section summarizing treeview terminology with link to the pattern.
* Corrected action defined for enter and space (had the action from the file tree example).
* Revisions for editorial consistency to keyboard table.
* Updated states/properties section header.
* For the tree element, corrected row for label. It specified aria-label instead of aria-labelledby.
* Revisions for editorial consistency to states and properties table.
* Removed level, setsize, and posinset rows since they are not used in this example.
@annabbott
Copy link

In the Keyboard Support section, currently the following is listed:
Home Moves focus to first node.
End Moves focus to the last node that can be focused without expanding any nodes that are closed.

Question: does Home expand any nodes that are closed?

Also, none of the links with role="treeitem" causes a page to load either via keyboard or mouse.

mcking65 added a commit that referenced this issue Mar 16, 2017
@mcking65
Tree Pattern and Examples: Clarify Home Key Description
3c6c0e2 
For issues #223, #224, #225, and #226, modified the keyboard table of the tree view example pages and the keyboard section of the tree view design pattern.
For the description of the Home key, per suggestion from @annabbott and @MichielBijl, added the phrase "without opening or closing a node".
@mcking65
Copy link
Contributor Author

Two more issues that need to be resolved before we can complete this review:

  1. Issue Navigation Tree View examples: enter key and modifier keys are not correctly handled #364: Navigation Tree View examples: enter key and modifier keys are not correctly handled
  2. Issue Tree View Examples: Fix Incorrect Left Arrow Behavior #365: Tree View Examples: Fix Incorrect Left Arrow Behavior

@mcking65
Copy link
Contributor Author

This issue is now dependent on issues #365, #385, and #386.

mcking65 added a commit that referenced this issue May 1, 2017
@mcking65
Treeview Examples: Revise Tree Role Info and Fix Broken JS Source Link
6cb9a58 
For issues #223, #224, #225, and #226, made the following changes.

1. In the `tree` row of the states and properties table, change "an tree" to "a tree".
2. In the `tree` row of the states and properties table, removed unnecessary bullet that defines the tree role.
3. In the `tree` row of the states and properties table, reworded the bullet about the roving tabindex focus management.
4. In the source code section of the navigation treeview examples, removed link to no longer existent treeitemClick.js file.
@mcking65 mcking65 modified the milestones: 1.1 Rec, Jan 2017 Clean Up Jun 19, 2017
@mcking65 mcking65 added Example Page Related to a page containing an example implementation of a pattern Needs Review and removed editorial Changes to prose that don't alter intended meaning, e.g., phrasing, grammar. May fix inaccuracies. labels Jun 19, 2017
mcking65 added a commit that referenced this issue Jun 19, 2017
@mcking65
Navigation Treeview Example Using Computed Properties: Editorial revi…
4ce65b3 
…sion to accessibility features

For issue #225, in examples/treeview/treeview-2/treeview-2a.html accessibility features section,
added brief description of purpose of custom focus indicator.
@mcking65 mcking65 modified the milestones: 1.1 Rec, 3Q17 Working Draft Oct 10, 2017
@annabbott
Copy link

Keyboard Support > last row:
Shows an asterisk character, which for low vision users could be mistaken for a spot of dust on the screen.

Suggest adding "(asterisk)" without the double quotes after the character for clarity.

@annabbott
Copy link

No other issues noted.

@annabbott annabbott mentioned this issue Nov 23, 2017
Closed
5 tasks
mcking65 added a commit that referenced this issue Nov 23, 2017
@mcking65
Treview Examples: Clarify Asterisk Key Documentation
ce24993 
Per comment from @annabbott in issue #225,
In all 4 treview example pages,
changed the key column in the keyboard table for the <kbd>*</kbd> key.
Added "(asterisk)" after the `*`.
@sh0ji
Copy link
Contributor

sh0ji commented Dec 12, 2017

The hover class is being added and removed very rapidly when hovering over the [role=treeitem]'s section that is outside the width specified in the corresponding CSS selector. The result for the user is white/gray flashing that exceeds 3 flashes per second.

This appears to be because the corresponding span (firstElementChild of the tree item) is full-width on mouseover, and then CSS immediately sets it to 16em, triggering the mouseout event.

[role="treeitem"].hover,
[role="treeitem"] span.hover {
  background-color: #DDDDDD;
  /* this causes the hover class to be removed if the cursor is outside the 16em */
  width: 16em;
}

@sh0ji sh0ji mentioned this issue May 31, 2018
Merged
@mcking65 mcking65 mentioned this issue Jun 12, 2018
Closed
@mcking65
Copy link
Contributor Author

Closing with all review issues resolved.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@shirsha shirsha

Labels
Example Page Related to a page containing an example implementation of a pattern
Projects
None yet
Milestone
1.1 APG Release 1
Development

No branches or pull requests
4 participants
@mcking65 @shirsha @sh0ji @annabbott