Skip to content

Commit

Permalink
Update Treevue components, change buttons to links
Browse files Browse the repository at this point in the history 
Signed-off-by: Eric Eggert <[email protected]>
  • Loading branch information
Eric Eggert committed Aug 6, 2014
1 parent 7d768eb commit 1e0057b
Show file tree
Hide file tree
Showing 22 changed files with 163 additions and 102 deletions.
2 changes: 1 addition & 1 deletion index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
}
?>
</main>
<footer role="contentinfo" aria-label="Document info">
<footer role="complimentary" aria-label="Document info">

<div>
<ul>
Expand Down
4 changes: 2 additions & 2 deletions js/admin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ accessdb.admin.init = function (){
}
Utils.ajaxAsyncWithCallBack(accessdb.config.services.URL_SERVICE_WEBTECHSWITHTECHNIQUES_TREE, "GET", null, function(data){
$("#adminWebTechAndTechniqueTreeDiv").empty();
$.treevue([data], "adminWebTechAndTechniqueTree").appendTo('#adminWebTechAndTechniqueTreeDiv');
$.treevue([data], "adminWebTechAndTechniqueTree", {useAria: false}).appendTo('#adminWebTechAndTechniqueTreeDiv');
});
console.log(data);
Expand Down Expand Up @@ -147,4 +147,4 @@ accessdb.admin.ajaxAsyncWithCallBack = function (url, method, data, callback)
callback(jqXHR, null, null);
}
});
};
};
185 changes: 122 additions & 63 deletions js/lib/jquery.treevue.js
100644 → 100755
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@
expandedCls = 'treevue-expanded',
collapseCls = 'treevue-collapsed',
selectedCls = 'treevue-selected',
selectableCls = 'treevue-selectable',
disableCls = 'treevue-disabled',
useAriaCls = 'treevue-aria-on',
// Text for l10n
textExpanded = 'Collapse node',
textCollapsed = 'Expand node',
Expand All @@ -39,15 +41,11 @@
// Set up nodes that work as fallbacks for AT that don't
// support ARIA
treeFallback = $('<span class="treevue_fallback">' +
textTree + ', </span>').
css(fallbackCss).
attr(fallbackAria);
textTree + ', </span>').css(fallbackCss);

branchFallback = $('<span class="treevue_fallback_branch">' +
'<button tabindex="-1">' + textExpanded +
'</button></span>').
css(fallbackCss).
attr(fallbackAria);
'<button>' + textExpanded +
'</button></span>').css(fallbackCss);

/**
* Return the value of the checkbox. If none is given the label is returned
Expand Down Expand Up @@ -77,67 +75,117 @@


/**
* Add ARIA roles
* Add treeview fallbacks for screen readers
*/
function addAriaTreeRoles(trees) {
trees.find('li').attr(role, 'treeitem'); // define tree nodes
// define branches
trees.find('ul, ol').attr(role, 'group').before(branchFallback).
closest('li').attr(ariaExp, true).addClass(expandedCls);
function addFallbacks(trees, options) {
var nodeFbClone = branchFallback.clone(),
treeFbClone = treeFallback.clone(),
// define tree nodes
treeitems = trees.find('li'),
// define branches
branches = trees.find('ul, ol');

// Collapse nodes nested within a list with aria-hidden
trees.find('ul[aria-hidden=true], ' +
'ol[aria-hidden=true]').
closest('li').find('.' + expandedCls).andSelf().
attr(ariaExp, 'false').
removeClass(expandedCls).addClass(collapseCls).
find('ul, ol').attr(ariaHide, true).hide();
if (options.useAria) {
nodeFbClone.attr(fallbackAria)
.find('button').attr('tabindex', -1);
treeFbClone.attr(fallbackAria);
}

treeitems.first().prepend(treeFbClone);
branches.closest('li').addClass(expandedCls)
.prepend(nodeFbClone);
}

function addAriaRoles(trees) {
trees.attr(role, 'tree');
trees.find('li').attr(role, 'treeitem');
trees.find('ul, ol').attr(role, 'group')
.find('.'+expandedCls).attr(ariaExp, true);

trees.find('.'+collapseCls).attr(ariaExp, 'false')
.find('ul, ol').first().attr(ariaHide, true);
trees.find('.'+disableCls).attr(ariaDisable, true);
}

// Collapse nodes nested within a list with aria-hidden
function collapseHiddenBranches(trees, options) {
var hiddenBranches = trees.find('ul['+ariaHide+'=true], ' +
'ol['+ariaHide+'=true]');
hiddenBranches.hide()
.closest('li').find('.' + expandedCls).andSelf()
.removeClass(expandedCls).addClass(collapseCls);

trees.attr(role, 'tree').
find(':disabled').closest('li').addClass(disableCls).
attr(ariaDisable, true);
trees.find(':disabled').closest('li').addClass(disableCls);

if (!options.useAria) {
hiddenBranches.removeAttr(ariaHide);
}
}

function addArrowKeyFeatures(trees) {
trees.find(':checkbox').attr('tabindex', -1);

trees.find('li').attr('tabindex', -1);

trees.find('> :first-child').
attr('tabindex', 0).addClass(focusClass);
}


/**
* Where checkboxes are included allow selection
*/
function addAriaSelectStates(trees) {
trees.find(':checkbox').each(function () {
var boxes,
$this = $(this).attr('tabindex', -1);
function addSelectStates(trees, options) {
trees = trees.find(':checkbox').each(function () {
var boxes,
$this = $(this),
treeitem = $this.closest('li')
.addClass(selectableCls);

if ($this.prop('checked')) {
$this.addClass(selectedCls).
closest('li').attr(ariaSel, true);
} else {
$this.removeClass(selectedCls).
closest('li').attr(ariaSel, false);
$this.addClass(selectedCls);
}
if (options.useAria) {
treeitem.attr(ariaSel, !!$this.prop('checked'));
}

if ($this.is('[data-type="subselector"]')) {
boxes = $this.closest('li').find(':checkbox:not(:first())');
boxes = treeitem.find(':checkbox:not(:first())');
if (boxes.length !== 0) {
$this.prop('checked',
boxes.length === boxes.filter(':checked').length);
}
}
}).closest('.treevue').attr('aria-multiselectable', true);

});
if (options.useAria) {
trees.closest('.treevue').attr('aria-multiselectable', true);
}
}


/**
* TreeVue jQuery plugin; accessible treeview
*/
$.fn.treevue = function() {
this.addClass('treevue').find('li').attr('tabindex', -1);
$.fn.treevue = function(options) {
if (typeof options === 'undefined') {
options = {};
}
if (typeof options.useAria === 'undefined') {
options.useAria = true;
}

this.addClass('treevue');

// Add WAI-ARIA role and state
addAriaTreeRoles(this);
addAriaSelectStates(this);
addFallbacks(this, options);
collapseHiddenBranches(this, options);
addSelectStates(this, options);

this.find('> :first-child').
attr('tabindex', 0).addClass(focusClass).
prepend(treeFallback);
if (options.useAria) {
this.addClass(useAriaCls);
addAriaRoles(this);
addArrowKeyFeatures(this);
}
return this;
};

Expand All @@ -148,29 +196,31 @@
*/
function toggleBranch(branch) {
var eventProps = {target: branch.context},
fallbackButton = branch.find('.treevue_fallback_branch button').first(),
isExpanded = branch.hasClass(expandedCls),
subtree = $();

branch.each(function () {
subtree = subtree.add($('ul, ol', this).first());
});

if (branch.hasClass(expandedCls)) {
branch.addClass(collapseCls).removeClass(expandedCls).
attr(ariaExp, false).
find('.treevue_fallback_branch button').first().
text(textCollapsed);

subtree.hide(200).attr(ariaHide, true);
branch.trigger($.Event('treevue:collapse', eventProps));

if (branch.closest('.treevue').hasClass(useAriaCls)) {
branch.attr(ariaExp, !isExpanded);
subtree.attr(ariaHide, isExpanded);
}

if (isExpanded) {
branch.addClass(collapseCls).removeClass(expandedCls)
.trigger($.Event('treevue:collapse', eventProps));

fallbackButton.text(textCollapsed);
subtree.hide(200);

} else {
branch.addClass(expandedCls).removeClass(collapseCls).
attr(ariaExp, true).
find('.treevue_fallback_branch button').first().
text(textExpanded);

subtree.show(200).attr(ariaHide, false);
branch.trigger($.Event('treevue:expand', eventProps));
branch.addClass(expandedCls).removeClass(collapseCls)
.trigger($.Event('treevue:expand', eventProps));
fallbackButton.text(textExpanded);
subtree.show(200);
}
}

Expand All @@ -179,7 +229,7 @@
*/
function focusItem(elm) {
var tree = elm.closest('.treevue');
if (tree.length === 1) {
if (tree.length === 1 && tree.hasClass(useAriaCls)) {
tree.find('.' + focusClass).removeClass(focusClass).attr(
'tabindex', -1);

Expand All @@ -195,13 +245,15 @@
* When a checkbox is changed, update the aria-selected state.
*/
function checkboxChange(box) {
var item = box.closest('[aria-selected]'),
var item = box.closest('.'+ selectedCls),
checked = box.prop('checked'),
tree = box.closest('.treevue'),
node = box.closest('li');

// update the selected state
item.attr(ariaSel, checked);
if (item.closest('.treevue').hasClass(useAriaCls)) {
item.attr(ariaSel, checked);
}

// select / unselect all children when the node is a subselector
if (box.attr('data-type') === 'subselector') {
Expand Down Expand Up @@ -263,7 +315,9 @@
/**
* keyboard input
*/
}).on('keydown', '.treevue li', function (event) {
}).on('keydown',
'.treevue.'+ useAriaCls + ' li',
function (event) {
var expanded, checkbox,
keyCode = event.keyCode,
$this = $(this);
Expand All @@ -274,7 +328,7 @@
expanded = $this.hasClass(expandedCls);

// Press RETURN
if (keyCode === 13 && $this.attr(ariaSel) !== undefined) {
if (keyCode === 13 && $this.hasClass(selectableCls)) {
//locate the checkbox and invert it and the select value
checkbox = $this.find(':checkbox').first();
if (checkbox.is(':not(:disabled)')) {
Expand Down Expand Up @@ -332,6 +386,11 @@
// Toggle the branch when clicking the fallback button
}).on('click', '.treevue_fallback_branch button', function () {
toggleBranch($(this).closest('li'));

}).on('focus', '.treevue_fallback_branch', function () {
$(this).parent().addClass('treeitem_focus');
}).on('blur', '.treevue_fallback_branch', function () {
$(this).parent().removeClass('treeitem_focus');
});
});

Expand Down
2 changes: 2 additions & 0 deletions js/lib/jquery.treevue.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion js/testunit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -605,7 +605,7 @@ TestUnit.loadTestsTree = function (){
if(data)
$(".tests_count_all").html(data);
});
$.treevue(data.children, filter.page+"-teststree").appendTo('#thetestsTreeDiv');
$.treevue(data.children, filter.page+"-teststree", {useAria: false}).appendTo('#thetestsTreeDiv');
Utils.loadingEnd(".webTechTreeDiv");
accessdb.TreeHelper.updateTreeFromTestList();
});
Expand Down
Loading

0 comments on commit 1e0057b

Please sign in to comment.