add aria attributes for filebrowser

diff --git a/view/theme/frio/templates/filebrowser.tpl b/view/theme/frio/templates/filebrowser.tpl
index 6fc091d95250db2b882c6546d8e40e4b75d189aa..48ed01a01f9d1f3d12c0d660c4e59d52fde1ed0a 100644 (file)
--- a/view/theme/frio/templates/filebrowser.tpl
+++ b/view/theme/frio/templates/filebrowser.tpl
@@ -13,17 +13,17 @@
                <input id="fb-type" type="hidden" name="type" value="{{$type}}" />
 
                <div class="error hidden">
-                       <span></span> <button type="button" class="btn btn-link" class="close">X</a>
+                       <span></span> <button type="button" class="btn btn-link" class="close" aria-label="Close">X</a>
                </div>
 
                {{* The breadcrumb navigation *}}
-               <ol class="path breadcrumb">
-                       {{foreach $path as $p}}<li><a href="#" data-folder="{{$p.0}}">{{$p.1}}</a></li>{{/foreach}}
+               <ol class="path breadcrumb" aria-label="Breadcrumb" role="navigation">
+                       {{foreach $path as $p}}<li role="presentation"><a href="#" data-folder="{{$p.0}}">{{$p.1}}</a></li>{{/foreach}}
 
                        {{* Switch between image and file mode *}}
-                       <div class="fbswitcher btn-group btn-group-xs pull-right">
-                               <button type="button" class="btn btn-default" data-mode="image"><i class="fa fa-picture-o" aria-hidden="true"></i></button>
-                               <button type="button" class="btn btn-default" data-mode="file"><i class="fa fa-file-o" aria-hidden="true"></i></button>
+                       <div class="fbswitcher btn-group btn-group-xs pull-right" aria-label="Switch between image and file mode">
+                               <button type="button" class="btn btn-default" data-mode="image" aria-label="Image Mode"><i class="fa fa-picture-o" aria-hidden="true"></i></button>
+                               <button type="button" class="btn btn-default" data-mode="file" aria-label="File Mode"><i class="fa fa-file-o" aria-hidden="true"></i></button>
                        </div>
                </ol>
 
@@ -31,15 +31,19 @@
 
                        {{* List of photo albums *}}
                        {{if $folders }}
-                       <div class="folders media-left">
-                               <ul>
-                                       {{foreach $folders as $f}}<li><a href="#" data-folder="{{$f.0}}">{{$f.1}}</a></li>{{/foreach}}
+                       <div class="folders media-left" role="navigation" aria-label="Album Navigation">
+                               <ul role="menu">
+                                       {{foreach $folders as $f}}
+                                       <li role="presentation">
+                                               <a href="#" data-folder="{{$f.0}}" role="menuitem">{{$f.1}}</a>
+                                       </li>
+                                       {{/foreach}}
                                </ul>
                        </div>
                        {{/if}}
 
                        {{* The main content (images or files) *}}
-                       <div class="list {{$type}} media-body">
+                       <div class="list {{$type}} media-body" role="main" aria-label="Browser Content">
                                <div class="fbrowser-content-container">
                                        {{foreach $files as $f}}
                                        <div class="photo-album-image-wrapper">
@@ -59,7 +63,7 @@
        </div>
 
        {{* This part contains the conent loader icon which is visible when new conent is loaded *}}
-       <div class="profile-rotator-wrapper" style="display: none;">
+       <div class="profile-rotator-wrapper" aria-hidden="true" style="display: none;">
                <i class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></i>
        </div>
 </div>

diff --git a/view/theme/frio/templates/jot.tpl b/view/theme/frio/templates/jot.tpl
index 2ebd1c1ddc3920f0b851f13cc98cd384b4a1b5db..2258a6f4f0309564e1aa60bb15471a8821478042 100644 (file)
--- a/view/theme/frio/templates/jot.tpl
+++ b/view/theme/frio/templates/jot.tpl
@@ -9,7 +9,7 @@
                        {{* Note: We need 2 modal close buttons here to bypass a bug in bootstrap.
                        The second is for mobile view. The first one doesnt work with dropdowns. To get a working close button
                        in with dropdows the close button needs to be inserted after the dropdown. *}}
-                       <button type="button" class="close hidden-xs" data-dismiss="modal" style="float: right;">&times;</button>
+                       <button type="button" class="close hidden-xs" data-dismiss="modal" aria-label="Close" style="float: right;">&times;</button>
 
                        {{* The Jot navigation menu for desktop user (text input, permissions, preview, filebrowser) *}}
                        <ul class="nav nav-tabs hidden-xs jot-nav" role="tablist" data-tabs="tabs">