From 2eaaae00be0312c971de246bfaef1bc43d5d1957 Mon Sep 17 00:00:00 2001
From: Jason Fowler <phalacee@gmail.com>
Date: Tue, 30 Jul 2013 08:57:44 +0800
Subject: [PATCH] MDL-35925 File picker - Improving accessibility by adding
 focus and removing unnecessary alt attribs

---
 files/renderer.php                            | 10 +++++-----
 ...moodle-core-notification-dialogue-debug.js | 20 +++++++++++++++++++
 .../moodle-core-notification-dialogue-min.js  |  2 +-
 .../moodle-core-notification-dialogue.js      | 20 +++++++++++++++++++
 lib/yui/src/notification/js/dialogue.js       | 20 +++++++++++++++++++
 repository/filepicker.js                      |  6 ++++--
 6 files changed, 70 insertions(+), 8 deletions(-)

diff --git a/files/renderer.php b/files/renderer.php
index 199d1eb6724..8ccb757539b 100644
--- a/files/renderer.php
+++ b/files/renderer.php
@@ -201,9 +201,9 @@ class core_files_renderer extends plugin_renderer_base {
     <div class="fp-navbar">
         <div class="filemanager-toolbar">
             <div class="fp-toolbar">
-                <div class="{!}fp-btn-add"><a href="#"><img src="'.$this->pix_url('a/add_file').'" /> '.$straddfile.'</a></div>
-                <div class="{!}fp-btn-mkdir"><a href="#"><img src="'.$this->pix_url('a/create_folder').'" /> '.$strmakedir.'</a></div>
-                <div class="{!}fp-btn-download"><a href="#"><img src="'.$this->pix_url('a/download_all').'" /> '.$strdownload.'</a></div>
+                <div class="{!}fp-btn-add"><a role="button" href="#"><img src="'.$this->pix_url('a/add_file').'" /> '.$straddfile.'</a></div>
+                <div class="{!}fp-btn-mkdir"><a role="button" href="#"><img src="'.$this->pix_url('a/create_folder').'" /> '.$strmakedir.'</a></div>
+                <div class="{!}fp-btn-download"><a role="button" href="#"><img src="'.$this->pix_url('a/download_all').'" /> '.$strdownload.'</a></div>
             </div>
             <div class="{!}fp-viewbar">
                 <a title="'. get_string('displayicons', 'repository') .'" class="{!}fp-vb-icons" href="#"></a>
@@ -521,10 +521,10 @@ class core_files_renderer extends plugin_renderer_base {
      */
     private function fp_js_template_generallayout() {
         $rv = '
-<div class="file-picker fp-generallayout">
+<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="'. get_string('repositoryicon', 'repository') .'" width="16" height="16" />&nbsp;<span class="{!}fp-repo-name"></span></a></li>
+            <li class="{!}fp-repo"><a href="#"><img class="{!}fp-repo-icon" alt=" " width="16" height="16" />&nbsp;<span class="{!}fp-repo-name"></span></a></li>
         </ul>
     </div>
     <div class="fp-repo-items" tabindex="0">
diff --git a/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-debug.js b/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-debug.js
index 60490eae120..7aded0b999a 100644
--- a/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-debug.js
+++ b/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-debug.js
@@ -334,6 +334,26 @@ Y.extend(DIALOGUE, Y.Panel, {
     shouldResizeFullscreen : function() {
         return (window === window.parent) && this.get('responsive') &&
                Math.floor(Y.one(document.body).get('winWidth')) < this.get('responsiveWidth');
+    },
+
+    /**
+     * Override the show method to set keyboard focus on the dialogue.
+     *
+     * @method show
+     * @return void
+     */
+    show : function() {
+        var result = null,
+            header = this.headerNode,
+            content = this.bodyNode;
+
+        result = DIALOGUE.superclass.show.call(this);
+        if (header && header !== '') {
+            header.focus();
+        } else if (content && content !== '') {
+            content.focus();
+        }
+        return result;
     }
 }, {
     NAME : DIALOGUE_NAME,
diff --git a/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-min.js b/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-min.js
index 17172da75f1..897a54387f8 100644
--- a/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-min.js
+++ b/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-min.js
@@ -1 +1 @@
-YUI.add("moodle-core-notification-dialogue",function(e,t){var n,r,i,s,o,u,a,f;n="moodle-dialogue",r="notificationBase",i=0,s="yesLabel",o="noLabel",u="title",a="question",f={BASE:"moodle-dialogue-base",WRAP:"moodle-dialogue-wrap",HEADER:"moodle-dialogue-hd",BODY:"moodle-dialogue-bd",CONTENT:"moodle-dialogue-content",FOOTER:"moodle-dialogue-ft",HIDDEN:"hidden",LIGHTBOX:"moodle-dialogue-lightbox"},M.core=M.core||{};var l="Moodle dialogue",c,h,p,d,v;DIALOGUE_MODAL_CLASS="yui3-widget-modal",h=n+"-fullscreen",p=n+"-hidden",d="[role=dialog]",v="no-scrolling",c=function(t){i++;var n="moodle-dialogue-"+i;t.notificationBase=e.Node.create('<div class="'+f.BASE+'">').append(e.Node.create('<div id="'+n+'" role="dialog" aria-labelledby="'+n+'-header-text" class="'+f.WRAP+'"></div>').append(e.Node.create('<div id="'+n+'-header-text" class="'+f.HEADER+' yui3-widget-hd"></div>')).append(e.Node.create('<div class="'+f.BODY+' yui3-widget-bd"></div>')).append(e.Node.create('<div class="'+f.FOOTER+' yui3-widget-ft"></div>'))),e.one(document.body).append(t.notificationBase),t.additionalBaseClass&&t.notificationBase.addClass(t.additionalBaseClass),t.srcNode="#"+n,t.width=t.width||"400px",t.visible=t.visible||!1,t.center=t.centered||!0,t.centered=!1,t.COUNT=i,t.width==="auto"&&delete t.width,t.lightbox!==!1&&(t.modal=!0),delete t.lightbox,t.closeButton===!1?t.buttons=null:t.buttons=[{section:e.WidgetStdMod.HEADER,classNames:"closebutton",action:function(){this.hide()}}],c.superclass.constructor.apply(this,[t]),t.closeButton!==!1&&this.get("buttons").header[0].setAttribute("title",this.get("closeButtonTitle"))},e.extend(c,e.Panel,{_resizeevent:null,_orientationevent:null,initializer:function(t){var n;this.render(),this.show(),this.after("visibleChange",this.visibilityChanged,this),t.center&&this.centerDialogue(),t.visible||this.hide(),this.set("COUNT",i),n=this.get("boundingBox"),t.extraClasses&&e.Array.each(t.extraClasses,n.addClass,n),t.visible&&this.applyZIndex()},applyZIndex:function(){var t=0,n,r;r=this.get("boundingBox"),this.get("zIndex")?r.setStyle("zIndex",this.get("zIndex")):(e.all(d).each(function(e){n=e.getStyle("zIndex"),n||(n=e.get("parentNode").getStyle("zIndex")),n&&(n=parseInt(n,10),n>t&&(t=n))}),t>0&&r.setStyle("zIndex",t+1))},toggleDocumentScrolling:function(){var t=e.one(e.config.doc.body),n=!0,r;r="."+h+", ."+DIALOGUE_MODAL_CLASS,e.all(r).each(function(e){e.hasClass(p)||(n=!1)}),e.UA.ie>0&&(t=e.one("html")),n?t.hasClass(v)&&t.removeClass(v):t.addClass(v)},visibilityChanged:function(t){var n;t.attrName==="visible"&&(this.get("maskNode").addClass(f.LIGHTBOX),t.prevVal&&!t.newVal&&(this._resizeevent&&(this._resizeevent.detach(),this._resizeevent=null),this._orientationevent&&(this._orientationevent.detach(),this._orientationevent=null)),!t.prevVal&&t.newVal&&(this.applyZIndex(),this.makeResponsive(),this.shouldResizeFullscreen()||this.get("draggable")&&(n="#"+this.get("id")+" ."+f.HEADER,this.plug(e.Plugin.Drag,{handles:[n]}),e.one(n).setStyle("cursor","move"))),this.get("center")&&!t.prevVal&&t.newVal&&this.centerDialogue(),this.toggleDocumentScrolling())},makeResponsive:function(){var t=this.get("boundingBox"),r;this.shouldResizeFullscreen()?(t.addClass(n+"-fullscreen"),t.setStyles({left:null,top:null,width:null,height:null}),r=e.one("#"+this.get("id")+" ."+f.BODY),r.setStyle("overflow","auto")):this.get("responsive")&&(t.removeClass(n+"-fullscreen").setStyles({overflow:"inherit",width:this.get("width"),height:this.get("height")}),r=e.one("#"+this.get("id")+" ."+f.BODY),r.setStyle("overflow","inherit"))},centerDialogue:function(){var t=this.get("boundingBox"),n=t.hasClass(p),r,i;if(this.shouldResizeFullscreen())return;n&&t.setStyle("top","-1000px").removeClass(p),r=Math.max(Math.round((t.get("winWidth")-t.get("offsetWidth"))/2),15),i=Math.max(Math.round((t.get("winHeight")-t.get("offsetHeight"))/2),15)+e.one(window).get("scrollTop"),t.setStyles({left:r,top:i}),n&&t.addClass(p)},shouldResizeFullscreen:function(){return window===window.parent&&this.get("responsive")&&Math.floor(e.one(document.body).get("winWidth"))<this.get("responsiveWidth")}},{NAME:l,CSS_PREFIX:n,ATTRS:{notificationBase:{},lightbox:{validator:e.Lang.isBoolean,value:!0},closeButton:{validator:e.Lang.isBoolean,value:!0},closeButtonTitle:{validator:e.Lang.isString,value:"Close"},center:{validator:e.Lang.isBoolean,value:!0},draggable:{validator:e.Lang.isBoolean,value:!1},COUNT:{value:0},responsive:{validator:e.Lang.isBoolean,value:!0},responsiveWidth:{value:768}}}),M.core.dialogue=c},"@VERSION@",{requires:["base","node","panel","event-key","dd-plugin"]});
+YUI.add("moodle-core-notification-dialogue",function(e,t){var n,r,i,s,o,u,a,f;n="moodle-dialogue",r="notificationBase",i=0,s="yesLabel",o="noLabel",u="title",a="question",f={BASE:"moodle-dialogue-base",WRAP:"moodle-dialogue-wrap",HEADER:"moodle-dialogue-hd",BODY:"moodle-dialogue-bd",CONTENT:"moodle-dialogue-content",FOOTER:"moodle-dialogue-ft",HIDDEN:"hidden",LIGHTBOX:"moodle-dialogue-lightbox"},M.core=M.core||{};var l="Moodle dialogue",c,h,p,d,v;DIALOGUE_MODAL_CLASS="yui3-widget-modal",h=n+"-fullscreen",p=n+"-hidden",d="[role=dialog]",v="no-scrolling",c=function(t){i++;var n="moodle-dialogue-"+i;t.notificationBase=e.Node.create('<div class="'+f.BASE+'">').append(e.Node.create('<div id="'+n+'" role="dialog" aria-labelledby="'+n+'-header-text" class="'+f.WRAP+'"></div>').append(e.Node.create('<div id="'+n+'-header-text" class="'+f.HEADER+' yui3-widget-hd"></div>')).append(e.Node.create('<div class="'+f.BODY+' yui3-widget-bd"></div>')).append(e.Node.create('<div class="'+f.FOOTER+' yui3-widget-ft"></div>'))),e.one(document.body).append(t.notificationBase),t.additionalBaseClass&&t.notificationBase.addClass(t.additionalBaseClass),t.srcNode="#"+n,t.width=t.width||"400px",t.visible=t.visible||!1,t.center=t.centered||!0,t.centered=!1,t.COUNT=i,t.width==="auto"&&delete t.width,t.lightbox!==!1&&(t.modal=!0),delete t.lightbox,t.closeButton===!1?t.buttons=null:t.buttons=[{section:e.WidgetStdMod.HEADER,classNames:"closebutton",action:function(){this.hide()}}],c.superclass.constructor.apply(this,[t]),t.closeButton!==!1&&this.get("buttons").header[0].setAttribute("title",this.get("closeButtonTitle"))},e.extend(c,e.Panel,{_resizeevent:null,_orientationevent:null,initializer:function(t){var n;this.render(),this.show(),this.after("visibleChange",this.visibilityChanged,this),t.center&&this.centerDialogue(),t.visible||this.hide(),this.set("COUNT",i),n=this.get("boundingBox"),t.extraClasses&&e.Array.each(t.extraClasses,n.addClass,n),t.visible&&this.applyZIndex()},applyZIndex:function(){var t=0,n,r;r=this.get("boundingBox"),this.get("zIndex")?r.setStyle("zIndex",this.get("zIndex")):(e.all(d).each(function(e){n=e.getStyle("zIndex"),n||(n=e.get("parentNode").getStyle("zIndex")),n&&(n=parseInt(n,10),n>t&&(t=n))}),t>0&&r.setStyle("zIndex",t+1))},toggleDocumentScrolling:function(){var t=e.one(e.config.doc.body),n=!0,r;r="."+h+", ."+DIALOGUE_MODAL_CLASS,e.all(r).each(function(e){e.hasClass(p)||(n=!1)}),e.UA.ie>0&&(t=e.one("html")),n?t.hasClass(v)&&t.removeClass(v):t.addClass(v)},visibilityChanged:function(t){var n;t.attrName==="visible"&&(this.get("maskNode").addClass(f.LIGHTBOX),t.prevVal&&!t.newVal&&(this._resizeevent&&(this._resizeevent.detach(),this._resizeevent=null),this._orientationevent&&(this._orientationevent.detach(),this._orientationevent=null)),!t.prevVal&&t.newVal&&(this.applyZIndex(),this.makeResponsive(),this.shouldResizeFullscreen()||this.get("draggable")&&(n="#"+this.get("id")+" ."+f.HEADER,this.plug(e.Plugin.Drag,{handles:[n]}),e.one(n).setStyle("cursor","move"))),this.get("center")&&!t.prevVal&&t.newVal&&this.centerDialogue(),this.toggleDocumentScrolling())},makeResponsive:function(){var t=this.get("boundingBox"),r;this.shouldResizeFullscreen()?(t.addClass(n+"-fullscreen"),t.setStyles({left:null,top:null,width:null,height:null}),r=e.one("#"+this.get("id")+" ."+f.BODY),r.setStyle("overflow","auto")):this.get("responsive")&&(t.removeClass(n+"-fullscreen").setStyles({overflow:"inherit",width:this.get("width"),height:this.get("height")}),r=e.one("#"+this.get("id")+" ."+f.BODY),r.setStyle("overflow","inherit"))},centerDialogue:function(){var t=this.get("boundingBox"),n=t.hasClass(p),r,i;if(this.shouldResizeFullscreen())return;n&&t.setStyle("top","-1000px").removeClass(p),r=Math.max(Math.round((t.get("winWidth")-t.get("offsetWidth"))/2),15),i=Math.max(Math.round((t.get("winHeight")-t.get("offsetHeight"))/2),15)+e.one(window).get("scrollTop"),t.setStyles({left:r,top:i}),n&&t.addClass(p)},shouldResizeFullscreen:function(){return window===window.parent&&this.get("responsive")&&Math.floor(e.one(document.body).get("winWidth"))<this.get("responsiveWidth")},show:function(){var e=null,t=this.headerNode,n=this.bodyNode;return e=c.superclass.show.call(this),t&&t!==""?t.focus():n&&n!==""&&n.focus(),e}},{NAME:l,CSS_PREFIX:n,ATTRS:{notificationBase:{},lightbox:{validator:e.Lang.isBoolean,value:!0},closeButton:{validator:e.Lang.isBoolean,value:!0},closeButtonTitle:{validator:e.Lang.isString,value:"Close"},center:{validator:e.Lang.isBoolean,value:!0},draggable:{validator:e.Lang.isBoolean,value:!1},COUNT:{value:0},responsive:{validator:e.Lang.isBoolean,value:!0},responsiveWidth:{value:768}}}),M.core.dialogue=c},"@VERSION@",{requires:["base","node","panel","event-key","dd-plugin"]});
diff --git a/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue.js b/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue.js
index 60490eae120..7aded0b999a 100644
--- a/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue.js
+++ b/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue.js
@@ -334,6 +334,26 @@ Y.extend(DIALOGUE, Y.Panel, {
     shouldResizeFullscreen : function() {
         return (window === window.parent) && this.get('responsive') &&
                Math.floor(Y.one(document.body).get('winWidth')) < this.get('responsiveWidth');
+    },
+
+    /**
+     * Override the show method to set keyboard focus on the dialogue.
+     *
+     * @method show
+     * @return void
+     */
+    show : function() {
+        var result = null,
+            header = this.headerNode,
+            content = this.bodyNode;
+
+        result = DIALOGUE.superclass.show.call(this);
+        if (header && header !== '') {
+            header.focus();
+        } else if (content && content !== '') {
+            content.focus();
+        }
+        return result;
     }
 }, {
     NAME : DIALOGUE_NAME,
diff --git a/lib/yui/src/notification/js/dialogue.js b/lib/yui/src/notification/js/dialogue.js
index 28d4729f4ad..ea12d5c1fcd 100644
--- a/lib/yui/src/notification/js/dialogue.js
+++ b/lib/yui/src/notification/js/dialogue.js
@@ -303,6 +303,26 @@ Y.extend(DIALOGUE, Y.Panel, {
     shouldResizeFullscreen : function() {
         return (window === window.parent) && this.get('responsive') &&
                Math.floor(Y.one(document.body).get('winWidth')) < this.get('responsiveWidth');
+    },
+
+    /**
+     * Override the show method to set keyboard focus on the dialogue.
+     *
+     * @method show
+     * @return void
+     */
+    show : function() {
+        var result = null,
+            header = this.headerNode,
+            content = this.bodyNode;
+
+        result = DIALOGUE.superclass.show.call(this);
+        if (header && header !== '') {
+            header.focus();
+        } else if (content && content !== '') {
+            content.focus();
+        }
+        return result;
     }
 }, {
     NAME : DIALOGUE_NAME,
diff --git a/repository/filepicker.js b/repository/filepicker.js
index b8e23de0a54..aefbb09c1c7 100644
--- a/repository/filepicker.js
+++ b/repository/filepicker.js
@@ -1288,13 +1288,15 @@ M.core_filepicker.init = function(Y, options) {
         },
         render: function() {
             var client_id = this.options.client_id;
+            var fpid = "filepicker-"+ client_id;
+            var labelid = 'fp-dialog-label_'+ client_id;
             this.fpnode = Y.Node.createWithFilesSkin(M.core_filepicker.templates.generallayout).
-                set('id', 'filepicker-'+client_id);
+                set('id', 'filepicker-'+client_id).set('aria-labelledby', labelid);
             this.mainui = new M.core.dialogue({
                 extraClasses : ['filepicker'],
                 draggable    : true,
                 bodyContent  : this.fpnode,
-                headerContent: M.str.repository.filepicker,
+                headerContent: '<span id="'+ labelid +'">'+ M.str.repository.filepicker +'</span>',
                 centered     : true,
                 modal        : true,
                 visible      : false,