add aria attributes for filebrowser

This commit is contained in:
rabuzarus 2017-04-05 12:34:00 +02:00
parent 0542cd6a14
commit 190b03e706
2 changed files with 16 additions and 12 deletions

View file

@ -13,17 +13,17 @@
<input id="fb-type" type="hidden" name="type" value="{{$type}}" /> <input id="fb-type" type="hidden" name="type" value="{{$type}}" />
<div class="error hidden"> <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> </div>
{{* The breadcrumb navigation *}} {{* The breadcrumb navigation *}}
<ol class="path breadcrumb"> <ol class="path breadcrumb" aria-label="Breadcrumb" role="navigation">
{{foreach $path as $p}}<li><a href="#" data-folder="{{$p.0}}">{{$p.1}}</a></li>{{/foreach}} {{foreach $path as $p}}<li role="presentation"><a href="#" data-folder="{{$p.0}}">{{$p.1}}</a></li>{{/foreach}}
{{* Switch between image and file mode *}} {{* Switch between image and file mode *}}
<div class="fbswitcher btn-group btn-group-xs pull-right"> <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"><i class="fa fa-picture-o" aria-hidden="true"></i></button> <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"><i class="fa fa-file-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> </div>
</ol> </ol>
@ -31,15 +31,19 @@
{{* List of photo albums *}} {{* List of photo albums *}}
{{if $folders }} {{if $folders }}
<div class="folders media-left"> <div class="folders media-left" role="navigation" aria-label="Album Navigation">
<ul> <ul role="menu">
{{foreach $folders as $f}}<li><a href="#" data-folder="{{$f.0}}">{{$f.1}}</a></li>{{/foreach}} {{foreach $folders as $f}}
<li role="presentation">
<a href="#" data-folder="{{$f.0}}" role="menuitem">{{$f.1}}</a>
</li>
{{/foreach}}
</ul> </ul>
</div> </div>
{{/if}} {{/if}}
{{* The main content (images or files) *}} {{* 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"> <div class="fbrowser-content-container">
{{foreach $files as $f}} {{foreach $files as $f}}
<div class="photo-album-image-wrapper"> <div class="photo-album-image-wrapper">
@ -59,7 +63,7 @@
</div> </div>
{{* This part contains the conent loader icon which is visible when new conent is loaded *}} {{* 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> <i class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></i>
</div> </div>
</div> </div>

View file

@ -9,7 +9,7 @@
{{* Note: We need 2 modal close buttons here to bypass a bug in bootstrap. {{* 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 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. *}} 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) *}} {{* 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"> <ul class="nav nav-tabs hidden-xs jot-nav" role="tablist" data-tabs="tabs">