Adding WAI-ARIA attributes to the header dropdown (Fix by Aleksej Serdjukov)

This fixes issue #754

Thanks Aleksej!

diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css
index 9087034b51d3b55c0c0ed45cea24e79d4cf5a1e7..0bd58738bba76048b784cdb0712922cb174be97b 100644 (file)
--- a/mediagoblin/static/css/base.css
+++ b/mediagoblin/static/css/base.css
@@ -132,17 +132,17 @@ header {
   line-height: 1.6em;
 }
 
-.header_dropdown {
+#header_dropdown {
   margin-bottom: 20px;
   padding: 0px 10px 0px 10px;
 }
 
-.header_dropdown li {
+#header_dropdown li {
   margin: 4px 0;
   list-style: none;
 }
 
-.header_dropdown p {
+#header_dropdown p {
   margin-top: 12px;
   margin-bottom: 10px;
 }

diff --git a/mediagoblin/static/js/header_dropdown.js b/mediagoblin/static/js/header_dropdown.js
index 1b2fb00f9fbb24a741850518d81befe03376953e..3ee46228f20fed1ad8703df3448cd563d0b5aff5 100644 (file)
--- a/mediagoblin/static/js/header_dropdown.js
+++ b/mediagoblin/static/js/header_dropdown.js
@@ -17,11 +17,11 @@
  */
 
 $(document).ready(function(){
-  $(".header_dropdown").hide();
+  $("#header_dropdown").hide();
   $(".header_dropdown_up").hide();
   $(".header_dropdown_down,.header_dropdown_up").click(function() {
     $(".header_dropdown_down").toggle();
     $(".header_dropdown_up").toggle();
-    $(".header_dropdown").slideToggle();
+    $("#header_dropdown").slideToggle();
   });
 });

diff --git a/mediagoblin/templates/mediagoblin/base.html b/mediagoblin/templates/mediagoblin/base.html
index ffc471d2a5d6a2ecc58d58ec872fecaa854806ff..015fcba8298c7b072f73f84d6e846f5230678049 100644 (file)
--- a/mediagoblin/templates/mediagoblin/base.html
+++ b/mediagoblin/templates/mediagoblin/base.html
@@ -78,11 +78,17 @@
 
                   {% set notification_count = get_notification_count(request.user.id) %}
                   {% if notification_count %}
-                    <a href="javascript:;" class="notification-gem button_action button_info" title="Notifications">
+                    <a href="javascript:;"
+                       class="notification-gem button_action button_info"
+                       title="Notifications">
                     {{ notification_count }}</a>
                   {% endif %}
-                  <a href="javascript:;" class="button_action header_dropdown_down">&#9660;</a>
-                  <a href="javascript:;" class="button_action header_dropdown_up">&#9650;</a>
+                  <a href="javascript:;"
+                     class="button_action header_dropdown_down"
+                     aria-controls="header_dropdown">&#9660;</a>
+                  <a href="javascript:;"
+                     class="button_action header_dropdown_up"
+                     aria-controls="header_dropdown">&#9650;</a>
                 {% elif request.user and not request.user.has_privilege('active') %}
                 {# the following link should only appear when verification is needed #}
                   <a href="{{ request.urlgen('mediagoblin.user_pages.user_home',
@@ -119,7 +125,7 @@
             </div>
             <div class="clear"></div>
             {% if request.user and request.user.has_privilege('active') %}
-              <div class="header_dropdown">
+              <div id="header_dropdown">
                 <p>
                   <span class="dropdown_title">
                     {% trans user_url=request.urlgen('mediagoblin.user_pages.user_home',