Merge pull request #7412 from edx/will/ecom-1233

A11y fixes for EdX header.
2015-03-23 11:34:54 -04:00
parent 30058b913c cb21a0819c
commit 072dbcd50f
5 changed files with 126 additions and 95 deletions
--- a/common/static/js/utils/rwd_header_footer.js
+++ b/common/static/js/utils/rwd_header_footer.js
@@ -17,8 +17,8 @@
            init: function() {
                _fn.$header = $( _fn.header );
                _fn.$footer = $( _fn.footer );
-                _fn.$nav = _fn.$header.find('nav');
-                _fn.$globalNav = _fn.$nav.find('.nav-global');
+                _fn.$navContainer = _fn.$header.find('.nav-container');
+                _fn.$globalNav = _fn.$header.find('.nav-global');

                _fn.add.elements();
                _fn.add.classes();
@@ -38,7 +38,7 @@
                },

                burger: function() {
-                    _fn.$nav.prepend([
+                    _fn.$navContainer.prepend([
                        '<a href="#" class="mobile-menu-button" aria-label="menu">',
                            '<i class="icon fa fa-bars" aria-hidden="true"></i>',
                        '</a>'
@@ -46,7 +46,7 @@
                },

                registerLink: function() {
-                    var $register = _fn.$nav.find('.cta-register'),
+                    var $register = _fn.$header.find('.cta-register'),
                        $li = {},
                        $a = {},
                        count = 0;
@@ -77,7 +77,7 @@

                click: function() {
                    // Toggle menu
-                    _fn.$nav.on( 'click', '.mobile-menu-button', _fn.toggleMenu );
+                    _fn.$header.on( 'click', '.mobile-menu-button', _fn.toggleMenu );
                }
            },

--- a/lms/static/sass/course/layout/_courseware_header.scss
+++ b/lms/static/sass/course/layout/_courseware_header.scss
@@ -7,7 +7,7 @@
  width: 100%;

  .course-material{
-    @extend %inner-wrapper; 
+    @extend %inner-wrapper;
  }

  ol.course-tabs {
@@ -76,6 +76,14 @@ header.global.slim {
  border-bottom: 1px solid $outer-border-color;
  background: $header-bg;

+  .wrapper-header {
+    padding-top: ($baseline/4);
+  }
+
+  .nav-account-management {
+    padding: 0;
+  }
+
  .guest .secondary {
    margin-right: 0;
  }
@@ -147,6 +155,7 @@ header.global.slim {
    }
  }

+  .nav-main,
  .nav-global {
    display: none;
  }
--- a/lms/static/sass/shared/_header.scss
+++ b/lms/static/sass/shared/_header.scss
@@ -10,13 +10,13 @@ header.global {
  position: relative;
  width: 100%;

-  nav {
+  .wrapper-header {
    @include clearfix();
    height: 40px;
    margin: 0 auto;
    padding: 18px ($baseline/2) 0;
    max-width: grid-width(12);
-    min-width: 760px;
+    width: 100%;
  }

  h1.logo {
@@ -29,6 +29,15 @@ header.global {
    }
  }

+  nav {
+    @include clearfix();
+    height: 40px;
+    margin: 0 auto;
+    padding: 18px ($baseline/2) 0;
+    max-width: grid-width(12);
+    min-width: 760px;
+  }
+
  .left {
    @include float(left);
  }
@@ -119,6 +128,7 @@ header.global {
      > a {
        margin: 0;
        @include border-right-radius(0px);
+        background-image: none;
      }

      &:last-child {
@@ -148,7 +158,7 @@ header.global {
      .icon {
        display: inline-block;
        @include float(left);
-        margin: 3px 0 -3px 0;
+        @include margin(2px, 6px, -3px, 3px);
        font-size: 1.2em;
        color: $m-gray;
      }
@@ -191,6 +201,7 @@ header.global {
      box-shadow: 0 2px 24px 0 rgba(0,0,0, 0.3);
      border: 1px solid $border-color-3;
      display: none;
+      margin-top: 0;
      padding: 5px 10px;
      position: absolute;
      @include right(0px);
@@ -216,7 +227,7 @@ header.global {
        height: 0px;
        position: absolute;
        @include transform(rotate(-45deg));
-        @include right(12px);
+        @include right(7px);
        top: -6px;
        width: 0px;
      }
@@ -349,13 +360,17 @@ header.global-new {
  box-shadow: 0 1px 5px 0 $shadow-l1;
  background: $header-bg;

-  nav {
+  .wrapper-header {
    @include clearfix();
    @include box-sizing(border-box);
-    width: grid-width(12);
    height: 74px;
    margin: 0 auto;
    padding: 17px 0;
+    max-width: grid-width(12);
+
+    &:not(.rwd) {
+      min-width: grid-width(9);
+    }
  }

  h1.logo {
@@ -372,6 +387,10 @@ header.global-new {
    @include float(left);
  }

+  .nav-account-management {
+    margin: 0 auto;
+  }
+
  .guest {
    @include float(right);
  }
@@ -455,6 +474,7 @@ header.global-new {
      > a {
        margin: 0;
        @include border-right-radius(0);
+        background-image: none;
      }

      &:last-child {
@@ -483,7 +503,7 @@ header.global-new {
      .icon {
        display: inline-block;
        @include float(left);
-        margin: 3px 0 -3px 0;
+        @include margin(2px, 6px, -3px, 3px);
        font-size: 1.2em;
        color: $m-gray;
      }
@@ -526,6 +546,7 @@ header.global-new {
      box-shadow: 0 2px 24px 0 rgba(0,0,0, 0.3);
      border: 1px solid $border-color-3;
      display: none;
+      margin-top: 0;
      padding: 5px 10px;
      position: absolute;
      @include right(0);
@@ -551,7 +572,7 @@ header.global-new {
        height: 0px;
        position: absolute;
        @include transform(rotate(-45deg));
-        @include right(12px);
+        @include right(7px);
        top: -6px;
        width: 0px;
      }
@@ -607,7 +628,7 @@ header.global-new {
        padding: 3px 10px;
        font-size: 18px;
        line-height: 24px;
-        font-weight: 500;
+        font-weight: 600;
        font-family: $header-sans-serif;
        color: $courseware-navigation-color;

@@ -657,14 +678,13 @@ header.global-new {
  }

  &.rwd {
-    nav {
-      max-width: 1180px;
+    .wrapper-header {
      width: 320px;
    }

    .mobile-menu-button {
+      @include float(left);
      display: inline;
-      float: left;
      text-decoration: none;
      color: $m-gray;
      font-size: 18px;
@@ -679,9 +699,9 @@ header.global-new {

    .logo {
      position: absolute;
-      width: 54px;
-      left: calc( 50% - 90px );
      top: 20px;
+      @include left(calc(50% - 90px));
+      width: 54px;

      img {
        width: 54px;
@@ -721,7 +741,7 @@ header.global-new {
      a {
        color: white;
        padding: 10px;
-        font-weight: 300;
+        font-weight: 400;

        &:hover,
        &:focus {
@@ -746,8 +766,9 @@ header.global-new {
    }

    @include media( $desktop ) {
-      nav {
+      .wrapper-header {
        width: 100%;
+        min-width: 800px;
      }

      .mobile-menu-button {
@@ -756,10 +777,9 @@ header.global-new {

      .logo {
        position: relative;
+        top: 0;
+        @include left(0);
        width: auto;
-        top: inherit;
-        left: inherit;
-        margin-left: ($baseline/2);

        img {
          width: auto;
@@ -778,7 +798,7 @@ header.global-new {
        a {
          color: $courseware-navigation-color;
          padding: 3px 10px;
-          font-weight: 500;
+          font-weight: 600;

          &:hover,
          &:focus {
@@ -809,8 +829,8 @@ header.global-new {
    }

    @include media( $xl-desktop ) {
-      nav {
-        padding: 17px 10px;
+      .wrapper-header {
+        padding: 17px 0;
      }

      .nav-global,
@@ -819,10 +839,6 @@ header.global-new {
          font-size: 18px;
        }
      }
-
-      .logo {
-        margin-left: 0;
-      }
    }
  }
 }
--- a/lms/templates/main.html
+++ b/lms/templates/main.html
@@ -149,7 +149,7 @@
    </div>

    <%block name="footer">
-      ## Can be overridden by child templates wanting to hide the footer. 
+      ## Can be overridden by child templates wanting to hide the footer.
      <%
        if theme_enabled() and not is_microsite():
          footer_file = 'theme-footer.html'
--- a/lms/templates/navigation-edx.html
+++ b/lms/templates/navigation-edx.html
@@ -37,11 +37,12 @@ site_status_msg = get_site_status_msg(course_id)
 </%block>

 <header class="${"global slim" if course and not disable_courseware_header else "global-new"}" aria-label="Main" role="banner">
-  <nav aria-label="Main">
+  <div class="${'rwd ' if responsive else ''}wrapper-header nav-container">
    <h1 class="logo" itemscope="" itemtype="http://schema.org/Organization">
      <a href="${marketing_link('ROOT')}" title="Home page" itemprop="url">
        <%block name="navigation_logo">
            <img src="${static.url(branding.get_logo_url())}" alt="${platform_name()}" title="${platform_name()}" itemprop="url" />
+            <span class="sr">${_("Home Page")}</span>
        </%block>
      </a>
    </h1>
@@ -51,28 +52,30 @@ site_status_msg = get_site_status_msg(course_id)
    % endif

    % if user.is_authenticated():
-    <div class="left nav-global authenticated">
-      <%block name="navigation_global_links_authenticated">
-          <li class="nav-global-01">
-            <a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
-          </li>
-          <li class="nav-global-02">
-            <a href="${marketing_link('COURSES')}">${_("Find Courses")}</a>
-          </li>
-          <li class="nav-global-03">
-            <a href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</a>
-          </li>
-      </%block>
-    </div>
+      % if not course or disable_courseware_header:
+    <nav aria-label="Main" class="nav-main">
+      <ul class="left nav-global authenticated">
+        <%block name="navigation_global_links_authenticated">
+            <li class="nav-global-01">
+              <a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
+            </li>
+            <li class="nav-global-02">
+              <a href="${marketing_link('COURSES')}">${_("Find Courses")}</a>
+            </li>
+            <li class="nav-global-03">
+              <a href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</a>
+            </li>
+        </%block>
+      </ul>
+    </nav>
+      % endif

-    <ol class="user">
+    <ul class="user">
      <li class="primary">
        <a href="${reverse('dashboard')}" class="user-link">
          <i class="icon fa fa-home" aria-hidden="true"></i>
          <span class="sr">${_("Dashboard for:")}</span>
-          <div>
-          ${user.username}
-          </div>
+          <div>${user.username}</div>
        </a>
      </li>
      <li class="primary">
@@ -86,58 +89,61 @@ site_status_msg = get_site_status_msg(course_id)
          <li><a href="${reverse('logout')}" role="menuitem">${_("Sign out")}</a></li>
        </ul>
      </li>
-    </ol>
+    </ul>

      % if should_display_shopping_cart_func(): # see shoppingcart.context_processor.user_has_cart_context_processor
-        <ol class="user">
-          <li class="primary">
-            <a class="shopping-cart" href="${reverse('shoppingcart.views.show_cart')}">
-              <i class="icon fa fa-shopping-cart"></i> ${_("Shopping Cart")}
-            </a>
-          </li>
-        </ol>
+    <ul class="user">
+      <li class="primary">
+        <a class="shopping-cart" href="${reverse('shoppingcart.views.show_cart')}">
+          <i class="icon fa fa-shopping-cart" aria-hidden="true"></i> ${_("Shopping Cart")}
+        </a>
+      </li>
+    </ul>
      % endif
-    % else:
-    <ol class="left nav-global">
-      <%block name="navigation_global_links">
-        % if microsite.get_value('ENABLE_MKTG_SITE', settings.FEATURES.get('ENABLE_MKTG_SITE', False)):
-          <li class="nav-global-01">
-            <a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
-          </li>
-          <li class="nav-global-02">
-            <a href="${marketing_link('COURSES')}">${_("Find Courses")}</a>
-          </li>
-          <li class="nav-global-03">
-            <a href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</a>
-          </li>
-        % endif
-      </%block>
-    </ol>

-    <div class="right nav-courseware">
-      % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
-        % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
-        <div class="nav-courseware-01">
-          <a class="cta cta-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
-        </div>
-        % else:
-        <div class="nav-courseware-01">
-          <a class="cta cta-register" href="/register">${_("Register")}</a>
-        </div>
-        % endif
-      % endif
-      <div class="nav-courseware-02">
+    % else:
+    <nav aria-label="Main" class="nav-main">
+      <ul class="left nav-global">
+        <%block name="navigation_global_links">
+            <li class="nav-global-01">
+              <a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
+            </li>
+            <li class="nav-global-02">
+              <a href="${marketing_link('COURSES')}">${_("Find Courses")}</a>
+            </li>
+            <li class="nav-global-03">
+              <a href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</a>
+            </li>
+        </%block>
+      </ul>
+    </nav>
+
+    <nav aria-label="Account" class="nav-account-management">
+      <div class="right nav-courseware">
        % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
-            % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
-            <a class="cta cta-login nav-courseware-button" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
-            % else:
-            <a class="cta cta-login nav-courseware-button" href="/login${login_query()}">${_("Sign in")}</a>
-            % endif
+          % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
+          <div class="nav-courseware-01">
+            <a class="cta cta-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
+          </div>
+          % else:
+          <div class="nav-courseware-01">
+            <a class="cta cta-register" href="/register">${_("Register")}</a>
+          </div>
+          % endif
        % endif
+        <div class="nav-courseware-02">
+          % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
+              % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
+              <a class="cta cta-login nav-courseware-button" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
+              % else:
+              <a class="cta cta-login nav-courseware-button" href="/login${login_query()}">${_("Sign in")}</a>
+              % endif
+          % endif
+        </div>
      </div>
-    </div>
+    </nav>
    % endif
-  </nav>
+  </div>
 </header>
 % if course:
 <!--[if lte IE 8]>