mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-01-17 21:49:15 +01:00
Code Issues Projects Releases Wiki Activity

MDL-61127 filepicker: Added aria-selected attribute to repos.

Browse Source 
The repository list in the file picker now as aria-selected
added to denote which repository is selected.
This commit is contained in:
Adrian Greeve 2018-01-02 11:45:51 +08:00
parent 39fab18e27
commit 5aeadf0b7b
3 changed files with 48 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
files/renderer.php
View File

@ -574,9 +574,11 @@ class core_files_renderer extends plugin_renderer_base {
$rv = '
<div tabindex="0" class="file-picker fp-generallayout" role="dialog" aria-live="assertive">
<div class="fp-repo-area">
<ul class="fp-list">
<li class="fp-repo">
<a href="#"><img class="fp-repo-icon" alt=" " width="16" height="16" />&nbsp;<span class="fp-repo-name"></span></a>
<ul class="fp-list" role="tablist">
<li class="fp-repo" role="tab" aria-selected="false" tabindex="-1">
<a href="#" tabindex="-1"><img class="fp-repo-icon" alt=" " width="16" height="16" />&nbsp;
<span class="fp-repo-name"></span>
</a>
</li>
</ul>
</div>

43
repository/filepicker.js
View File

@ -1392,7 +1392,8 @@ M.core_filepicker.init = function(Y, options) {
// processing repository listing
// Resort the repositories by sortorder
var sorted_repositories = [];
for (var i in this.options.repositories) {
var i;
for (i in this.options.repositories) {
sorted_repositories[i] = this.options.repositories[i];
}
sorted_repositories.sort(function(a,b){return a.sortorder-b.sortorder});
@ -1404,6 +1405,10 @@ M.core_filepicker.init = function(Y, options) {
list.removeChild(reponode);
for (i in sorted_repositories) {
var repository = sorted_repositories[i];
var h = (parseInt(i) == 0) ? parseInt(i) : parseInt(i) - 1,
j = (parseInt(i) == Object.keys(sorted_repositories).length - 1) ? parseInt(i) : parseInt(i) + 1;
var previousrepository = sorted_repositories[h];
var nextrepository = sorted_repositories[j];
var node = reponode.cloneNode(true);
list.appendChild(node);
node.
@ -1414,6 +1419,15 @@ M.core_filepicker.init = function(Y, options) {
this.hide_header();
this.list({'repo_id':repository_id});
}, this /*handler running scope*/, repository.id/*second argument of handler*/);
node.on('key', function(e, previousrepositoryid, nextrepositoryid, clientid, repositoryid) {
this.changeHighlightedRepository(e, clientid, repositoryid, previousrepositoryid, nextrepositoryid);
}, 'down:38,40', this, previousrepository.id, nextrepository.id, client_id, repository.id);
node.on('key', function(e, repositoryid) {
e.preventDefault();
this.set_preference('recentrepository', repositoryid);
this.hide_header();
this.list({'repo_id': repositoryid});
}, 'enter', this, repository.id);
node.one('.fp-repo-name').setContent(Y.Escape.html(repository.name));
node.one('.fp-repo-icon').set('src', repository.icon);
if (i==0) {
@ -1437,6 +1451,23 @@ M.core_filepicker.init = function(Y, options) {
this.mainui.show();
this.show_recent_repository();
},
/**
* Change the highlighted repository to a new one.
*
* @param {object} event The key event
* @param {integer} clientid The client id to identify the repo class.
* @param {integer} oldrepositoryid The repository id that we are removing the highlight for
* @param {integer} previousrepositoryid The previous repository id.
* @param {integer} nextrepositoryid The next repository id.
*/
changeHighlightedRepository: function(event, clientid, oldrepositoryid, previousrepositoryid, nextrepositoryid) {
event.preventDefault();
var newrepositoryid = (event.keyCode == '40') ? nextrepositoryid : previousrepositoryid;
this.fpnode.one('#fp-repo-' + clientid + '-' + oldrepositoryid).setAttribute('tabindex', '-1');
this.fpnode.one('#fp-repo-' + clientid + '-' + newrepositoryid)
.setAttribute('tabindex', '0')
.focus();
},
parse_repository_options: function(data, appendtolist) {
if (appendtolist) {
if (data.list) {
@ -1608,8 +1639,14 @@ M.core_filepicker.init = function(Y, options) {
display_response: function(id, obj, args) {
var scope = args.scope;
// highlight the current repository in repositories list
scope.fpnode.all('.fp-repo.active').removeClass('active');
scope.fpnode.all('#fp-repo-'+scope.options.client_id+'-'+obj.repo_id).addClass('active')
scope.fpnode.all('.fp-repo.active')
.removeClass('active')
.setAttribute('aria-selected', 'false')
.setAttribute('tabindex', '-1');
scope.fpnode.all('#fp-repo-'+scope.options.client_id+'-'+obj.repo_id)
.addClass('active')
.setAttribute('aria-selected', 'true')
.setAttribute('tabindex', '0');
// add class repository_REPTYPE to the filepicker (for repository-specific styles)
for (var i in scope.options.repositories) {
scope.fpnode.removeClass('repository_'+scope.options.repositories[i].type)

6
theme/boost/templates/core/filemanager_modal_generallayout.mustache
View File

@ -1,7 +1,7 @@
<div tabindex="0" class="file-picker fp-generallayout container-fluid row" role="dialog" aria-live="assertive">
<div class="fp-repo-area col-md-3 nav nav-pills nav-stacked">
<div class="fp-repo nav-item">
<a href="#" class="nav-link"><img class="fp-repo-icon" alt=" " width="16" height="16" />&nbsp;<span class="fp-repo-name"></span></a>
<div class="fp-repo-area col-md-3 nav nav-pills nav-stacked" role="tablist">
<div class="fp-repo nav-item" role="tab" aria-selected="false" tabindex="-1">
<a href="#" class="nav-link" tabindex="-1"><img class="fp-repo-icon" alt=" " src="#" width="16" height="16" />&nbsp;<span class="fp-repo-name"></span></a>
</div>
</div>