<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>
*/
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" /> <span class="{!}fp-repo-name"></span></a></li>
+ <li class="{!}fp-repo"><a href="#"><img class="{!}fp-repo-icon" alt=" " width="16" height="16" /> <span class="{!}fp-repo-name"></span></a></li>
</ul>
</div>
<div class="fp-repo-items" tabindex="0">
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,
},
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,