From 5aeadf0b7b6d3ac6754964c02739b0cc9ea07d01 Mon Sep 17 00:00:00 2001
From: Adrian Greeve <adrian@moodle.com>
Date: Tue, 2 Jan 2018 11:45:51 +0800
Subject: [PATCH] MDL-61127 filepicker: Added aria-selected attribute to repos.

The repository list in the file picker now as aria-selected
added to denote which repository is selected.
---
 files/renderer.php                            |  8 ++--
 repository/filepicker.js                      | 43 +++++++++++++++++--
 .../filemanager_modal_generallayout.mustache  |  6 +--
 3 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/files/renderer.php b/files/renderer.php
index f5f39d83fb5..1cf7e3027f4 100644
--- a/files/renderer.php
+++ b/files/renderer.php
@@ -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>
diff --git a/repository/filepicker.js b/repository/filepicker.js
index 48e7ea3045f..bd3a83aba41 100644
--- a/repository/filepicker.js
+++ b/repository/filepicker.js
@@ -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)
diff --git a/theme/boost/templates/core/filemanager_modal_generallayout.mustache b/theme/boost/templates/core/filemanager_modal_generallayout.mustache
index f55f2d03b66..3e31b355820 100644
--- a/theme/boost/templates/core/filemanager_modal_generallayout.mustache
+++ b/theme/boost/templates/core/filemanager_modal_generallayout.mustache
@@ -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>