moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-06 09:26:35 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-70846 accessibility: update tree attributes to pass a11y check

Browse source 
- Move aria-* atrributes from <p> to <li>
- Move "role" attribute from <p> to <li>
- Update behat tests

Based on reference implementation from:
- https://www.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-2/treeview-2a.html
- https://www.w3.org/WAI/GL/wiki/Using_ARIA_trees
This commit is contained in:
Dongsheng Cai 2021-05-25 20:38:51 +10:00
parent 30b8ad51f4
commit e3690a392d
14 changed files with 67 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

2
lib/amd/build/tree.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
lib/amd/build/tree.min.js.map
View file

File diff suppressed because one or more lines are too long

5
lib/amd/src/tree.js
View file

@ -269,7 +269,8 @@ define(['jquery'], function($) {
var moduleName = item.closest('[data-ajax-loader]').attr('data-ajax-loader');
var thisTree = this;
// Flag this node as loading.
item.addClass('loading');
const p = item.find('p');
p.addClass('loading');
// Require the ajax module (must be AMD) and try to load the items.
require([moduleName], function(loader) {
// All ajax module must implement a "load" method.
@ -280,7 +281,7 @@ define(['jquery'], function($) {
thisTree.initialiseNodes(item);
thisTree.finishExpandingGroup(item);
// Make sure no child elements of the item we just loaded are tabbable.
item.removeClass('loading');
p.removeClass('loading');
promise.resolve();
});
});

24
lib/tests/behat/behat_navigation.php
View file

@ -64,8 +64,8 @@ class behat_navigation extends behat_base {
$nodetextliteral = behat_context_helper::escape($text);
$hasblocktree = "[contains(concat(' ', normalize-space(@class), ' '), ' block_tree ')]";
$hasbranch = "[contains(concat(' ', normalize-space(@class), ' '), ' branch ')]";
$hascollapsed = "p[@aria-expanded='false']";
$notcollapsed = "p[@aria-expanded='true']";
$hascollapsed = "li[@aria-expanded='false']/p";
$notcollapsed = "li[@aria-expanded='true']/p";
$match = "[normalize-space(.)={$nodetextliteral}]";
// Avoid problems with quotes.
@ -75,18 +75,18 @@ class behat_navigation extends behat_base {
} else if ($collapsed === false) {
$iscollapsed = $notcollapsed;
} else {
$iscollapsed = 'p';
$iscollapsed = 'li/p';
}
// First check root nodes, it can be a span or link.
$xpath = "//ul{$hasblocktree}/li/{$hascollapsed}{$isbranch}/span{$match}|";
$xpath .= "//ul{$hasblocktree}/li/{$hascollapsed}{$isbranch}/a{$match}|";
$xpath = "//ul{$hasblocktree}/{$hascollapsed}{$isbranch}/span{$match}|";
$xpath .= "//ul{$hasblocktree}/{$hascollapsed}{$isbranch}/a{$match}|";
// Next search for the node containing the text within a link.
$xpath .= "//ul{$hasblocktree}//ul/li/{$iscollapsed}{$isbranch}/a{$match}|";
$xpath .= "//ul{$hasblocktree}//ul/{$iscollapsed}{$isbranch}/a{$match}|";
// Finally search for the node containing the text within a span.
$xpath .= "//ul{$hasblocktree}//ul/li/{$iscollapsed}{$isbranch}/span{$match}";
$xpath .= "//ul{$hasblocktree}//ul/{$iscollapsed}{$isbranch}/span{$match}";
$node = $this->find('xpath', $xpath, $exception);
$this->ensure_node_is_visible($node);
@ -263,16 +263,16 @@ class behat_navigation extends behat_base {
// The p node contains the aria jazz.
$pnodexpath = "/p[contains(concat(' ', normalize-space(@class), ' '), ' tree_item ')]";
$pnode = $node->find('xpath', $pnodexpath);
$linode = $pnode->getParent();
// Keep expanding all sub-parents if js enabled.
if ($pnode && $this->running_javascript() && $pnode->hasAttribute('aria-expanded') &&
($pnode->getAttribute('aria-expanded') == "false")) {
if ($pnode && $this->running_javascript() && $linode->hasAttribute('aria-expanded') &&
($linode->getAttribute('aria-expanded') == "false")) {
$this->js_trigger_click($pnode);
// Wait for node to load, if not loaded before.
if ($pnode->hasAttribute('data-loaded') && $pnode->getAttribute('data-loaded') == "false") {
$jscondition = '(document.evaluate("' . $pnode->getXpath() . '", document, null, '.
if ($linode->hasAttribute('data-loaded') && $linode->getAttribute('data-loaded') == "false") {
$jscondition = '(document.evaluate("' . $linode->getXpath() . '", document, null, '.
'XPathResult.ANY_TYPE, null).iterateNext().getAttribute(\'data-loaded\') == "true")';
$this->getSession()->wait(behat_base::get_extended_timeout() * 1000, $jscondition);