Merge pull request #38984 from code-dot-org/revert-38967-revert-38761…

…-create-button-screen-reader Nav Bar Create Button Screen Reader Accessible
code-dot-org · Feb 10, 2021 · 866a305 · 866a305
2 parents 7b10653 + 2271977
commit 866a305
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/dashboard/app/assets/stylesheets/application.scss b/dashboard/app/assets/stylesheets/application.scss
@@ -284,6 +284,16 @@ img.video_thumbnail {
     }
   }
 
+  .create_menu {
+    box-shadow: none;
+    // button:active in this file uses !important for a styling scheme that doesn't
+    // match this button. We use !important here to override that scheme for only this
+    // specific button.
+    &:active {
+      border: 2px solid $white !important;
+    }
+  }
+
   .user_menu, .create_menu, .help_button {
     margin-top: 6px;
     .create_button, .display_name, .pairing_name {

diff --git a/shared/css/user-menu.scss b/shared/css/user-menu.scss
@@ -139,6 +139,8 @@
     width: max-content;
     z-index: 10000;
     border-bottom: 0;
+    display: flex;
+    flex-direction: column;
     a {
       font-family: 'Gotham 5r', sans-serif;
       min-width: 240px;
@@ -151,14 +153,16 @@
     img {
       height: 70px;
       width: 70px;
+      float: left;
     }
     .project_link_box {
       display: block;
     }
     .project_link {
       display: inline-block;
-      padding: 0 10px 0 4px;
-      line-height: 67px;
+      padding: 0 10px 0 8px;
+      line-height: 70px;
+      float: left;
     }
     #view_all_projects {
       height: 70px;

diff --git a/shared/haml/user_header.haml b/shared/haml/user_header.haml
@@ -18,7 +18,7 @@
   should_show_create_menu = !level || level.try(:is_project_level)
 
 - if should_show_create_menu
-  .header_button.create_menu
+  %button.header_button.create_menu.no-mc
     %span.create_button
       = I18n.t("#{loc_prefix}create")
     &nbsp;
@@ -148,12 +148,14 @@
           $('.create_options').slideDown();
           $('.create_menu_arrow_down').hide();
           $('.create_menu_arrow_up').show();
-          $(document).on('click', hideCreateOptions);
+          $(document).on('keypress click', hideCreateOptions);
           hideUserOptions()
           $("#hamburger-icon").removeClass('active');
           $("#help-icon").removeClass('active');
           $('#hamburger #hamburger-contents').slideUp();
           $('#help-button #help-contents').slideUp();
+        } else {
+          hideCreateOptions();
         }
       });
       $('.create_options').click(function (e) {