Skip to content
This repository has been archived by the owner on Feb 12, 2022. It is now read-only.

Makes tree accessible #1984

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
58 commits
Select commit Hold shift + click to select a range
ce37c56
fixes most eslint warnings and all errors
May 18, 2017
ff985bf
fixes remaining eslint errors
May 18, 2017
b20bbe1
separates out tree dataSource to make the file more manageable
May 22, 2017
cb02388
breaks tree tests up into their own files to clean it up in preparati…
May 22, 2017
1286b57
comment out other tests while developing
May 23, 2017
e80b8f1
cleans up unit tests more
May 24, 2017
06df5bb
adds file for is-destroyed test
May 24, 2017
d5f84fd
wip on accessibility testing
May 24, 2017
74768c5
separates accessibility testing out into its own module
May 24, 2017
33c03d4
WIP trying to test focusIn
May 25, 2017
4b6ffac
adds more shortcuts to helpers
May 26, 2017
378b08e
test focus on tree with no selected element. Tests tab index for focu…
May 26, 2017
44cff68
fixes npm lint errors
May 26, 2017
9cbc292
tests focusIn on select
May 26, 2017
d5faca0
tests tabindexes
May 26, 2017
1b8caa5
tests setFocus method
May 26, 2017
bd9ae29
adds test for left key press on closed branch on top node
May 27, 2017
8e65e1e
test left key press on open folder
May 30, 2017
ce5d289
uncomments out tests. Adds skip tests for stubbed out tests
May 31, 2017
96d9ab8
uses qunit 2.3.0 because 2.3.1 & 2.3.2 (current latest) are broken. A…
May 31, 2017
17f9ce0
(GH1964) fixes eslint errors
May 10, 2017
0df6617
(GH1964) adds tabindex=-1 to all tree node buttons
May 10, 2017
ef59309
(GH1964) makes root element tab-able. Cleans up node entity creation
May 10, 2017
0b8a3aa
(GH1964) sets tab index on the correct node
May 11, 2017
8c80069
(GH1964) makes tabbing to tree select proper node
May 12, 2017
2015d34
(GH1964) properly handles selection in multiselect tree
May 12, 2017
4132ae0
(GH1964) set up listener for keystrokes and listens for specific strokes
May 15, 2017
ab12eee
(GH1964) documents what home, end, and enter should do for tree keybo…
May 15, 2017
501231c
(GH1964) makes right arrow key work as expected in keyboard nav on tree
May 15, 2017
0c4d941
(GH1964) makes initial tab selection use focusIn. Properly populates …
May 15, 2017
052804f
(GH1964) updates comments
May 15, 2017
e883fda
(GH1964) makes left arrow work. Does not prevent default for non-hand…
May 16, 2017
76ba240
(GH1964) handles 'end' keypress by setting focus on last focusable no…
May 16, 2017
488869e
(GH1964) handles 'home' keypress by setting focus on first focusable …
May 16, 2017
9bcb572
(GH1964) makes enter key work as expected when navigating tree with k…
May 16, 2017
6f1e96a
(GH1964) makes down arrow work for tree navigation
May 16, 2017
724164d
(GH1964) makes up arrow work for tree navigation
May 16, 2017
bea5f26
(GH1964) makes selection move to first newly loaded node when Enter k…
May 16, 2017
7a5f460
(GH1964) triggers events to make building on this functionality easier
May 18, 2017
136d2a8
(GH1964) makes space bar function the same as enter since space is us…
May 18, 2017
f252cf5
(GH1964) fire event on correct object
May 23, 2017
73d0147
(GH1964) updates test markup with accessibility changes
May 26, 2017
c61d5f8
(GH1964) DRY up some code
May 26, 2017
093a03d
(GH1964) don't process event if propagation is stopped
May 27, 2017
1cc046d
(GH1964) fakes up some promises to help ensure actions are actually d…
May 30, 2017
12b3777
(GH1964) adds some comments around noPromise and populated.fu.tree
May 31, 2017
3fa549a
Create test.js
Jun 9, 2017
894dfcf
(GH1964) cleans up code a little bit by making a variable's live time…
Jun 9, 2017
f03d8c2
(GH1964) adds underline to focused elements
Jun 9, 2017
5196b92
(GH1964) adds hbs support for aria-label and aria-labelledby
Jun 9, 2017
1d437db
(GH1964) adds aria-selected=true to selected items/folders in tree
Jun 13, 2017
33483f8
(GH1964) adds unit tests for aria-selected=true on tree
Jun 13, 2017
fca23a6
(GH1964) adds aria-multiselectable="true" and aria-selected="false" t…
Jun 13, 2017
72bae17
(GH1964) set aria-selected to false instead of removing it
Jun 13, 2017
f15ca94
(GH1964) make tests look for aria-selected set to false instead of no…
Jun 13, 2017
7e6e4df
(GH1964) targets the proper DOM node for making a selection on the tree
Jun 14, 2017
7a0a920
(GH1964) sets root tree element tabindex to -1 on tree item focus so …
Jun 14, 2017
956e4d4
Merge remote-tracking branch 'upstream/master' into GH1964---tree-sho…
Jun 15, 2017
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
4 changes: 4 additions & 0 deletions grunt/tasks/test.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@ module.exports = function test (grunt) {
grunt.registerTask('test', 'run jshint, qunit source w/ coverage, and validate HTML',
['jshint', 'connect:testServer', 'qunit:noMoment', 'qunit:globals', 'test-dist', 'htmllint']);

grunt.registerTask('unittest', 'Just unit test the dist without all the fluff',
['connect:testServer', 'test-dist']);


grunt.registerTask('prep-commonjs-test', 'run commonjs config build and browserify to prep for commonjs test',
['commonjs', 'browserify:commonjs']);

Expand Down
6 changes: 3 additions & 3 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2071,7 +2071,7 @@ <h5>Choose Folder Location</h5>
</div>

<div class="picker-body well">
<ul class="tree" id="myPickerTree1" role="tree">
<ul class="tree" id="myPickerTree1" role="tree" aria-activedescendant="" aria-label="My Tree">
<li class="tree-branch hidden" data-template="treebranch" role="treeitem" aria-expanded="false">
<div class="tree-branch-header">
<button type="button" class="glyphicon icon-caret glyphicon-play"><span class="sr-only">Open</span>
Expand Down Expand Up @@ -2113,10 +2113,10 @@ <h5>Choose Folder Location</h5>
<h2>Tree</h2>
<div class="thin-box">
<!-- Utilizes Handlebars templates (see index.js) -->
<h3>folders selectable (please note structure of treebranch)</h3>
<h3 id="myTreeLabel">folders selectable (please note structure of treebranch)</h3>
<div id="myTreeWrapper"></div>

<h3>only items selectable (please note structure of treebranch)</h3>
<h3 id="myTree2Label">only items selectable (please note structure of treebranch)</h3>
<div id="myTree2Wrapper"></div>

</div>
Expand Down
4 changes: 2 additions & 2 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -999,7 +999,7 @@ define(function (require) {

var tree = require('hbs!fuelux_templates/tree');
var $myTreeWrapper = $('#myTreeWrapper');
$myTreeWrapper.html(tree({id: 'myTree', folderSelect: true}));
$myTreeWrapper.html(tree({id: 'myTree', labelledBy: 'myTreeLabel', folderSelect: true}));

var treeDataSource = function (parentData, callback) {
log('Opening branch data: ', parentData);
Expand Down Expand Up @@ -1099,7 +1099,7 @@ define(function (require) {
// initialize
function myTreeInit () {
var $myTree2Wrapper = $('#myTree2Wrapper');
$myTree2Wrapper.html(tree({id: 'myTree2'}));
$myTree2Wrapper.html(tree({id: 'myTree2', labelledBy: 'myTree2Label'}));

var callLimit = 200;
var callCount = 0;
Expand Down
Loading