templates: add ARIA markup to dropdown menus

An hook into Bootstrap JS toggles aria-hidden and aria-expanded
for dropdowns it manages.

This improves the announcements screen readers make.

kallithea/templates/base/base.html

@@ -1,534 +1,549 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="root.html"/>
 
 <!-- CONTENT -->
 <div id="content">
     ${self.flash_msg()}
     <div id="main">
         ${next.main()}
     </div>
 </div>
 <!-- END CONTENT -->
 
 <!-- FOOTER -->
 <div id="footer">
    <div id="footer-inner" class="title">
        <div>
            <p class="footer-link">
                ${_('Server instance: %s') % c.instance_id if c.instance_id else ''}
            </p>
            <p class="footer-link-right">
                This site is powered by
                %if c.visual.show_version:
                    <a href="${h.url('kallithea_project_url')}" target="_blank">Kallithea</a> ${c.kallithea_version},
                %else:
                    <a href="${h.url('kallithea_project_url')}" target="_blank">Kallithea</a>,
                %endif
                which is
                <a href="${h.canonical_url('about')}#copyright">&copy; 2010&ndash;2016 by various authors &amp; licensed under GPLv3</a>.
                %if c.issues_url:
                    &ndash; <a href="${c.issues_url}" target="_blank">${_('Support')}</a>
                %endif
            </p>
        </div>
    </div>
 </div>
 
 <!-- END FOOTER -->
 
 ### MAKO DEFS ###
 
 <%block name="branding_title">
     %if c.site_name:
     &middot; ${c.site_name}
     %endif
 </%block>
 
 <%def name="flash_msg()">
     <%include file="/base/flash_msg.html"/>
 </%def>
 
 <%def name="breadcrumbs()">
     <div class="breadcrumbs">
     ${self.breadcrumbs_links()}
     </div>
 </%def>
 
 <%def name="admin_menu()">
   <ul class="dropdown-menu" role="menu">
       <li><a href="${h.url('admin_home')}"><i class="icon-book"></i> ${_('Admin Journal')}</a></li>
       <li><a href="${h.url('repos')}"><i class="icon-database"></i> ${_('Repositories')}</a></li>
       <li><a href="${h.url('repos_groups')}"><i class="icon-folder"></i> ${_('Repository Groups')}</a></li>
       <li><a href="${h.url('users')}"><i class="icon-user"></i> ${_('Users')}</a></li>
       <li><a href="${h.url('users_groups')}"><i class="icon-users"></i> ${_('User Groups')}</a></li>
       <li><a href="${h.url('admin_permissions')}"><i class="icon-block"></i> ${_('Default Permissions')}</a></li>
       <li><a href="${h.url('auth_home')}"><i class="icon-key"></i> ${_('Authentication')}</a></li>
       <li><a href="${h.url('defaults')}"><i class="icon-wrench"></i> ${_('Repository Defaults')}</a></li>
       <li class="last"><a href="${h.url('admin_settings')}"><i class="icon-gear"></i> ${_('Settings')}</a></li>
   </ul>
 
 </%def>
 
 
 ## admin menu used for people that have some admin resources
 <%def name="admin_menu_simple(repositories=None, repository_groups=None, user_groups=None)">
   <ul class="dropdown-menu" role="menu">
    %if repositories:
       <li><a href="${h.url('repos')}"><i class="icon-database"></i> ${_('Repositories')}</a></li>
    %endif
    %if repository_groups:
       <li><a href="${h.url('repos_groups')}"><i class="icon-folder"></i> ${_('Repository Groups')}</a></li>
    %endif
    %if user_groups:
       <li><a href="${h.url('users_groups')}"><i class="icon-users"></i> ${_('User Groups')}</a></li>
    %endif
   </ul>
 </%def>
 
 <%def name="repotag(repo)">
   %if h.is_hg(repo):
     <span class="repotag" title="${_('Mercurial repository')}">hg</span>
   %endif
   %if h.is_git(repo):
     <span class="repotag" title="${_('Git repository')}">git</span>
   %endif
 </%def>
 
 <%def name="repo_context_bar(current=None, rev=None)">
   <% rev = None if rev == 'tip' else rev %>
   <%
     def is_current(selected):
         if selected == current:
             return h.literal('class="current"')
     %>
 
   <!--- CONTEXT BAR -->
   <div id="context-bar" class="box">
       <h2>
         ${repotag(c.db_repo)}
 
         ## public/private
         %if c.db_repo.private:
           <i class="icon-keyhole-circled"></i>
         %else:
           <i class="icon-globe"></i>
         %endif
         ${h.repo_breadcrumbs(c.db_repo.groups_and_repo)}
 
         %if current == 'createfork':
          - ${_('Create Fork')}
         %endif
       </h2>
       <!--
       <div id="breadcrumbs">
         ${h.link_to(_('Repositories'),h.url('home'))}
         &raquo;
         ${h.repo_breadcrumbs(c.db_repo.groups_and_repo)}
       </div>
       -->
       <ul id="context-pages" class="horizontal-list">
         <li ${is_current('summary')} data-context="summary"><a href="${h.url('summary_home', repo_name=c.repo_name)}"><i class="icon-doc-text"></i> ${_('Summary')}</a></li>
         %if rev:
         <li ${is_current('changelog')} data-context="changelog"><a href="${h.url('changelog_file_home', repo_name=c.repo_name, revision=rev, f_path='')}"><i class="icon-clock"></i> ${_('Changelog')}</a></li>
         %else:
         <li ${is_current('changelog')} data-context="changelog"><a href="${h.url('changelog_home', repo_name=c.repo_name)}"><i class="icon-clock"></i> ${_('Changelog')}</a></li>
         %endif
         <li ${is_current('files')} data-context="files"><a href="${h.url('files_home', repo_name=c.repo_name, revision=rev or 'tip')}"><i class="icon-doc-inv"></i> ${_('Files')}</a></li>
         <li ${is_current('switch-to')} data-context="switch-to">
           <input id="branch_switcher" name="branch_switcher" type="hidden">
         </li>
         <li ${is_current('options')} data-context="options" class="dropdown">
              %if h.HasRepoPermissionAny('repository.admin')(c.repo_name):
-               <a href="${h.url('edit_repo',repo_name=c.repo_name)}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"><i class="icon-wrench"></i> ${_('Options')} <i class="caret"></i></a>
+               <a href="${h.url('edit_repo',repo_name=c.repo_name)}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true"><i class="icon-wrench"></i> ${_('Options')} <i class="caret"></i></a>
              %else:
-               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"><i class="icon-wrench"></i> ${_('Options')} <i class="caret"></i></a>
+               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true"><i class="icon-wrench"></i> ${_('Options')} <i class="caret"></i></a>
              %endif
-          <ul class="dropdown-menu" role="menu">
+          <ul class="dropdown-menu" role="menu" aria-hidden="yes">
              %if h.HasRepoPermissionAny('repository.admin')(c.repo_name):
                    <li><a href="${h.url('edit_repo',repo_name=c.repo_name)}"><i class="icon-gear"></i> ${_('Settings')}</a></li>
              %endif
               %if c.db_repo.fork:
                <li><a href="${h.url('compare_url',repo_name=c.db_repo.fork.repo_name,org_ref_type=c.db_repo.landing_rev[0],org_ref_name=c.db_repo.landing_rev[1], other_repo=c.repo_name,other_ref_type='branch' if request.GET.get('branch') else c.db_repo.landing_rev[0],other_ref_name=request.GET.get('branch') or c.db_repo.landing_rev[1], merge=1)}">
                    <i class="icon-git-compare"></i> ${_('Compare Fork')}</a></li>
               %endif
               <li><a href="${h.url('compare_home',repo_name=c.repo_name)}"><i class="icon-git-compare"></i> ${_('Compare')}</a></li>
 
               <li><a href="${h.url('search_repo',repo_name=c.repo_name)}"><i class="icon-search"></i> ${_('Search')}</a></li>
 
               %if h.HasRepoPermissionAny('repository.write','repository.admin')(c.repo_name) and c.db_repo.enable_locking:
                 %if c.db_repo.locked[0]:
                   <li><a href="${h.url('toggle_locking', repo_name=c.repo_name)}"><i class="icon-lock"></i> ${_('Unlock')}</a></li>
                 %else:
                   <li><a href="${h.url('toggle_locking', repo_name=c.repo_name)}"><i class="icon-lock-open-alt"></i> ${_('Lock')}</li>
                 %endif
               %endif
               ## TODO: this check feels wrong, it would be better to have a check for permissions
               ## also it feels like a job for the controller
               %if c.authuser.username != 'default':
                   <li>
                    <a class="${'following' if c.repository_following else 'follow'}" onclick="toggleFollowingRepo(this, ${c.db_repo.repo_id});">
                     <span class="show-follow"><i class="icon-heart-empty"></i> ${_('Follow')}</span>
                     <span class="show-following"><i class="icon-heart"></i> ${_('Unfollow')}</span>
                    </a>
                   </li>
                   <li><a href="${h.url('repo_fork_home',repo_name=c.repo_name)}"><i class="icon-git-pull-request"></i> ${_('Fork')}</a></li>
                   <li><a href="${h.url('pullrequest_home',repo_name=c.repo_name)}"><i class="icon-git-pull-request"></i> ${_('Create Pull Request')}</a></li>
               %endif
              </ul>
         </li>
         <li ${is_current('showpullrequest')} data-context="showpullrequest">
           <a href="${h.url('pullrequest_show_all',repo_name=c.repo_name)}" title="${_('Show Pull Requests for %s') % c.repo_name}"> <i class="icon-git-pull-request"></i> ${_('Pull Requests')}
             %if c.repository_pull_requests:
               <span class="badge">${c.repository_pull_requests}</span>
             %endif
           </a>
         </li>
       </ul>
   </div>
   <script type="text/javascript">
     $(document).ready(function() {
       var bcache = {};
 
       $("#branch_switcher").select2({
           placeholder: '<i class="icon-exchange"></i> ${_('Switch To')} <span class="caret"></span>',
           dropdownAutoWidth: true,
           sortResults: prefixFirstSort,
           formatResult: function(obj) {
               return obj.text;
           },
           formatSelection: function(obj) {
               return obj.text;
           },
           formatNoMatches: function(term) {
               return "${_('No matches found')}";
           },
           escapeMarkup: function(m) {
               // don't escape our custom placeholder
               if (m.substr(0, 29) == '<i class="icon-exchange"></i>') {
                   return m;
               }
 
               return Select2.util.escapeMarkup(m);
           },
           containerCssClass: "repo-switcher",
           dropdownCssClass: "repo-switcher-dropdown",
           query: function(query) {
               var key = 'cache';
               var cached = bcache[key];
               if (cached) {
                   var data = {
                       results: []
                   };
                   // filter results
                   $.each(cached.results, function() {
                       var section = this.text;
                       var children = [];
                       $.each(this.children, function() {
                           if (query.term.length === 0 || this.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0) {
                               children.push({
                                   'id': this.id,
                                   'text': this.text,
                                   'type': this.type,
                                   'obj': this.obj
                               });
                           }
                       });
                       if (children.length !== 0) {
                           data.results.push({
                               'text': section,
                               'children': children
                           });
                       }
 
                   });
                   query.callback(data);
               } else {
                   $.ajax({
                       url: pyroutes.url('repo_refs_data', {
                           'repo_name': '${c.repo_name}'
                       }),
                       data: {},
                       dataType: 'json',
                       type: 'GET',
                       success: function(data) {
                           bcache[key] = data;
                           query.callback(data);
                       }
                   });
               }
           }
       });
 
       $("#branch_switcher").on('select2-selecting', function(e) {
           e.preventDefault();
           var context = $('#context-bar .current').data('context');
           if (context == 'files') {
               window.location = pyroutes.url('files_home', {
                   'repo_name': REPO_NAME,
                   'revision': e.choice.id,
                   'f_path': '',
                   'at': e.choice.text
               });
           } else if (context == 'changelog') {
               if (e.choice.type == 'tag' || e.choice.type == 'book') {
                   $("#branch_filter").append($('<'+'option/>').val(e.choice.text));
               }
               $("#branch_filter").val(e.choice.text).change();
           } else {
               window.location = pyroutes.url('changelog_home', {
                   'repo_name': '${c.repo_name}',
                   'branch': e.choice.text
               });
           }
       });
     });
   </script>
   <!--- END CONTEXT BAR -->
 </%def>
 
 <%def name="menu(current=None)">
   <%
   def is_current(selected):
       if selected == current:
           return h.literal('class="current"')
   %>
 
   <ul id="quick" class="horizontal-list">
     <!-- repo switcher -->
     <li ${is_current('repositories')}>
       <input id="repo_switcher" name="repo_switcher" type="hidden">
     </li>
 
     ##ROOT MENU
     %if c.authuser.username != 'default':
       <li ${is_current('journal')}>
         <a class="menu_link" title="${_('Show recent activity')}"  href="${h.url('journal')}">
           <i class="icon-book"></i> ${_('Journal')}
         </a>
       </li>
     %else:
       <li ${is_current('journal')}>
         <a class="menu_link" title="${_('Public journal')}"  href="${h.url('public_journal')}">
           <i class="icon-book"></i> ${_('Public journal')}
         </a>
       </li>
     %endif
       <li ${is_current('gists')} class="dropdown">
         <a class="menu_link dropdown-toggle" data-toggle="dropdown" role="button" title="${_('Show public gists')}"  href="${h.url('gists')}">
           <i class="icon-clippy"></i> ${_('Gists')} <span class="caret"></span>
         </a>
           <ul class="dropdown-menu" role="menu">
             <li><a href="${h.url('new_gist', public=1)}"><i class="icon-paste"></i> ${_('Create New Gist')}</a></li>
             <li><a href="${h.url('gists')}"><i class="icon-globe"></i> ${_('All Public Gists')}</a></li>
             %if c.authuser.username != 'default':
               <li><a href="${h.url('gists', public=1)}"><i class="icon-user"></i> ${_('My Public Gists')}</a></li>
               <li><a href="${h.url('gists', private=1)}"><i class="icon-keyhole-circled"></i> ${_('My Private Gists')}</a></li>
             %endif
           </ul>
       </li>
     <li ${is_current('search')}>
         <a class="menu_link" title="${_('Search in repositories')}"  href="${h.url('search')}">
           <i class="icon-search"></i> ${_('Search')}
         </a>
     </li>
     % if h.HasPermissionAny('hg.admin')('access admin main page'):
       <li ${is_current('admin')} class="dropdown">
         <a class="menu_link dropdown-toggle" data-toggle="dropdown" role="button" title="${_('Admin')}" href="${h.url('admin_home')}">
           <i class="icon-gear"></i> ${_('Admin')} <span class="caret"></span>
         </a>
         ${admin_menu()}
       </li>
     % elif c.authuser.repositories_admin or c.authuser.repository_groups_admin or c.authuser.user_groups_admin:
     <li ${is_current('admin')} class="dropdown">
         <a class="menu_link dropdown-toggle" data-toggle="dropdown" role="button" title="${_('Admin')}">
           <i class="icon-gear"></i> ${_('Admin')}
         </a>
         ${admin_menu_simple(c.authuser.repositories_admin,
                             c.authuser.repository_groups_admin,
                             c.authuser.user_groups_admin or h.HasPermissionAny('hg.usergroup.create.true')())}
     </li>
     % endif
 
     <li ${is_current('my_pullrequests')}>
       <a class="menu_link" title="${_('My Pull Requests')}" href="${h.url('my_pullrequests')}">
         <i class="icon-git-pull-request"></i> ${_('My Pull Requests')}
         %if c.my_pr_count != 0:
           <span class="badge">${c.my_pr_count}</span>
         %endif
       </a>
     </li>
 
     ## USER MENU
     <li class="dropdown">
       <a class="menu_link dropdown-toggle" data-toggle="dropdown" role="button" id="quick_login_link"
+        aria-expanded="false" aria-controls="quick_login"
         %if c.authuser.username != 'default':
           href="${h.url('notifications')}"
         %endif
       >
-          ${h.gravatar_div(c.authuser.email, size=20, div_class="icon", div_style="display:inline")}
+          ${h.gravatar_div(c.authuser.email, size=20, div_class="icon", div_style="display:inline", div_aria_hidden="true")}
           %if c.authuser.username != 'default':
             <span class="menu_link_user">${c.authuser.username}</span>
             %if c.unread_notifications != 0:
               <span class="badge">${c.unread_notifications}</span>
             %endif
           %else:
               <span>${_('Not Logged In')}</span>
           %endif
       </a>
 
-      <div class="user-menu">
-        <div id="quick_login" class="dropdown-menu">
+      <div class="user-menu" role="menu">
+        <div id="quick_login" role="form" aria-describedby="quick_login_h" aria-hidden="true" class="dropdown-menu">
           %if c.authuser.username == 'default' or c.authuser.user_id is None:
-            <h4>${_('Login to Your Account')}</h4>
+            <h4 id="quick_login_h">${_('Login to Your Account')}</h4>
             ${h.form(h.url('login_home', came_from=request.path_qs))}
             <div class="form">
                 <div class="fields">
                     <div class="field">
                         <div class="label">
                             <label for="username">${_('Username')}:</label>
                         </div>
                         <div class="input">
                             ${h.text('username',class_='focus')}
                         </div>
 
                     </div>
                     <div class="field">
                         <div class="label">
                             <label for="password">${_('Password')}:</label>
                         </div>
                         <div class="input">
                             ${h.password('password',class_='focus')}
                         </div>
 
                     </div>
                     <div class="buttons">
                         <div class="password_forgoten">${h.link_to(_('Forgot password ?'),h.url('reset_password'))}</div>
                         <div class="register">
                         %if h.HasPermissionAny('hg.admin', 'hg.register.auto_activate', 'hg.register.manual_activate')():
                          ${h.link_to(_("Don't have an account ?"),h.url('register'))}
                         %endif
                         </div>
                         <div class="submit">
                             ${h.submit('sign_in',_('Log In'),class_="btn btn-mini")}
                         </div>
                     </div>
                 </div>
             </div>
             ${h.end_form()}
           %else:
             <div class="links_left">
                 ${h.gravatar_div(c.authuser.email, size=48, div_class="big_gravatar")}
                 <div class="full_name">${c.authuser.full_name_or_username}</div>
                 <div class="email">${c.authuser.email}</div>
             </div>
             <div class="links_right">
             <ol class="links">
               <li><a href="${h.url('notifications')}">${_('Notifications')}: ${c.unread_notifications}</a></li>
               <li>${h.link_to(_('My Account'),h.url('my_account'))}</li>
               %if not c.authuser.is_external_auth:
                 ## Cannot log out if using external (container) authentication.
                 <li class="logout">${h.link_to(_('Log Out'), h.url('logout_home'))}</li>
               %endif
             </ol>
             </div>
           %endif
         </div>
       </div>
     </li>
 
     <script type="text/javascript">
         $(document).ready(function(){
             var visual_show_public_icon = "${c.visual.show_public_icon}" == "True";
             var cache = {}
             /*format the look of items in the list*/
             var format = function(state){
                 if (!state.id){
                   return state.text; // optgroup
                 }
                 var obj_dict = state.obj;
                 var tmpl = '';
 
                 if(obj_dict && state.type == 'repo'){
                     tmpl += '<span class="repo-icons">';
                     if(obj_dict['repo_type'] === 'hg'){
                         tmpl += '<span class="repotag">hg</span> ';
                     }
                     else if(obj_dict['repo_type'] === 'git'){
                         tmpl += '<span class="repotag">git</span> ';
                     }
                     if(obj_dict['private']){
                         tmpl += '<i class="icon-keyhole-circled"></i> ';
                     }
                     else if(visual_show_public_icon){
                         tmpl += '<i class="icon-globe"></i> ';
                     }
                     tmpl += '</span>';
                 }
                 if(obj_dict && state.type == 'group'){
                         tmpl += '<i class="icon-folder"></i> ';
                 }
                 tmpl += state.text;
                 return tmpl;
             }
 
             $("#repo_switcher").select2({
                 placeholder: '<i class="icon-database"></i> ${_('Repositories')} <span class="caret"></span>',
                 dropdownAutoWidth: true,
                 sortResults: prefixFirstSort,
                 formatResult: format,
                 formatSelection: format,
                 formatNoMatches: function(term){
                     return "${_('No matches found')}";
                 },
                 containerCssClass: "repo-switcher",
                 dropdownCssClass: "repo-switcher-dropdown",
                 escapeMarkup: function(m){
                     // don't escape our custom placeholder
                     if(m.substr(0,29) == '<i class="icon-database"></i>'){
                         return m;
                     }
 
                     return Select2.util.escapeMarkup(m);
                 },
                 query: function(query){
                   var key = 'cache';
                   var cached = cache[key] ;
                   if(cached) {
                     var data = {results: []};
                     //filter results
                     $.each(cached.results, function(){
                         var section = this.text;
                         var children = [];
                         $.each(this.children, function(){
                             if(query.term.length == 0 || this.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0 ){
                                 children.push({'id': this.id, 'text': this.text, 'type': this.type, 'obj': this.obj});
                             }
                         });
                         if(children.length !== 0){
                             data.results.push({'text': section, 'children': children});
                         }
 
                     });
                     query.callback(data);
                   }else{
                       $.ajax({
                         url: "${h.url('repo_switcher_data')}",
                         data: {},
                         dataType: 'json',
                         type: 'GET',
                         success: function(data) {
                           cache[key] = data;
                           query.callback({results: data.results});
                         }
                       });
                   }
                 }
             });
 
             $("#repo_switcher").on('select2-selecting', function(e){
                 e.preventDefault();
                 window.location = pyroutes.url('summary_home', {'repo_name': e.val});
             });
+
+            $(document).on('shown.bs.dropdown', function(event) {
+                var dropdown = $(event.target);
+
+                dropdown.attr('aria-expanded', true);
+                dropdown.find('.dropdown-menu').attr('aria-hidden', false);
+            });
+
+            $(document).on('hidden.bs.dropdown', function(event) {
+                var dropdown = $(event.target);
+
+                dropdown.attr('aria-expanded', false);
+                dropdown.find('.dropdown-menu').attr('aria-hidden', true);
+            });
         });
     </script>
 </%def>