lms - revised classes and styling mechanics for login/register forms and added…

lms - revised classes and styling mechanics for login/register forms and added necessary screen-reader mixin for other visually hidden text in those pages

lms/static/sass/base/_base.scss

@@ -204,5 +204,6 @@ mark {
   }
 }
 
-
-
+.sr {
+  @include text-sr();
+}
\ No newline at end of file

lms/static/sass/base/_mixins.scss

@@ -7,10 +7,23 @@
   @return $body-line-height * $amount;
 }
 
-@mixin hide-text(){
-  text-indent: -9999px;
+// image-replacement hidden text
+@mixin text-hide() {
+  text-indent: 100%;
+  white-space: nowrap;
   overflow: hidden;
-  display: block;
+}
+
+// hidden elems - screenreaders
+@mixin text-sr() {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
 }
 
 @mixin vertically-and-horizontally-centered ( $height, $width ) {

lms/static/sass/multicourse/_account.scss

@@ -13,14 +13,15 @@
 // js-enabled
 .js {
 
-  // utility
-  .is-shown {
-    display: block;
-  }
+  #register-form, #login-form {
 
-  // hidden
-  .is-hidden {
+    .status.message {
       display: none;
+
+      &.is-shown {
+        display: block;
+      }
+    }
   }
 }
 

lms/templates/login.html

@@ -61,30 +61,30 @@
 
   <section role="main" class="content">
     <header>
-      <h2 class="is-hidden">Login Form</h2>
+      <h2 class="sr">Login Form</h2>
     </header>
 
     <form role="form" id="login-form" method="post" data-remote="true" action="/login_ajax">
       
       <!-- status messages -->
-      <div role="alert" class="status message is-hidden">
+      <div role="alert" class="status message">
         <h3 class="message-title">We're Sorry, edX accounts are unavailable currently</h3>
         <p class="message-copy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
       </div>
 
-      <div role="alert" class="status message submission-error is-hidden">
+      <div role="alert" class="status message submission-error">
         <h3 class="message-title">The following errors occured while logging you in: </h3>
         <ul class="message-copy">
           <li>Your email or password is incorrect</li>
         </ul>
       </div>
 
-      <p class="instructions is-hidden">
+      <p class="instructions sr">
         Please provide the following information to log into your edX account. Required fields are noted by <strong class="indicator">bold text and an asterisk (*)</strong>. 
       </p>
 
       <fieldset class="group group-form group-form-requiredinformation">
-        <legend class="is-hidden">Required Information</legend>
+        <legend class="sr">Required Information</legend>
 
         <ol class="list-input">
           <li class="field required text" id="field-email">
@@ -102,7 +102,7 @@
       </fieldset>
 
       <fieldset class="group group-form group-form-secondary group-form-accountpreferences">
-        <legend class="is-hidden">Account Preferences</legend>
+        <legend class="sr">Account Preferences</legend>
 
         <ol class="list-input">
           <li class="field required checkbox" id="field-remember">
@@ -120,7 +120,7 @@
 
   <aside role="complementary">
     <header>
-      <h2 class="is-hidden">Helpful Information</h2>
+      <h2 class="sr">Helpful Information</h2>
     </header>
 
     % if settings.MITX_FEATURES.get('AUTH_USE_OPENID'):

lms/templates/register.html

@@ -48,18 +48,18 @@
 
   <section role="main" class="content">
     <header>
-      <h2 class="is-hidden">Registration Form</h2>
+      <h2 class="sr">Registration Form</h2>
     </header>
 
     <form role="form" id="register-form" method="post" data-remote="true" action="/create_account">
       
       <!-- status messages -->
-      <div role="alert" class="status message is-hidden">
+      <div role="alert" class="status message">
         <h3 class="message-title">We're sorry, edX enrollment is not available in your region</h3>
         <p class="message-copy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
       </div>
 
-      <div role="alert" class="status message submission-error is-hidden">
+      <div role="alert" class="status message submission-error">
         <h3 class="message-title">The following errors occured while processing your registration: </h3>
         <ul class="message-copy">
           <li>You must accept the terms of service.</li>
@@ -68,12 +68,12 @@
         </ul>
       </div>
 
-      <div role="alert" class="status message submission-error is-hidden">
+      <div role="alert" class="status message submission-error">
         <h3 class="message-title">The following errors occured while processing your registration: </h3>
         <p class="message-copy">To enroll, you must follow the honor code</p>
       </div>
 
-      <div role="alert" class="status message system-error is-hidden">
+      <div role="alert" class="status message system-error">
         <h3 class="message-title">We're sorry, our systems seem to be having trouble processing your registration</h3>
         <p class="message-copy">Someone has been made aware of this issue. Please try again shortly. Please <a href="">contact us</a> about any concerns you have.</p>
       </div>
@@ -84,7 +84,7 @@
       </p>
 
       <fieldset class="group group-form group-form-requiredinformation">
-        <legend class="is-hidden">Required Information</legend>
+        <legend class="sr">Required Information</legend>
 
         % if has_extauth_info is UNDEFINED:
 
@@ -128,7 +128,7 @@
       </fieldset>
 
       <fieldset class="group group-form group-form-secondary group-form-personalinformation">
-        <legend class="is-hidden">Optional Personal Information</legend>
+        <legend class="sr">Optional Personal Information</legend>
 
         <ol class="list-input">
           <li class="field-group">
@@ -166,7 +166,7 @@
       </fieldset>
 
       <fieldset class="group group-form group-form-personalinformation2">
-        <legend class="is-hidden">Optional Personal Information</legend>
+        <legend class="sr">Optional Personal Information</legend>
 
         <ol class="list-input">
           <li class="field text" id="field-address-mailing">
@@ -182,7 +182,7 @@
       </fieldset>
 
       <fieldset class="group group-form group-form-accountacknowledgements">
-        <legend class="is-hidden">Account Acknowledgements</legend>
+        <legend class="sr">Account Acknowledgements</legend>
 
         <ol class="list-input">
           <li class="field-group">
@@ -207,7 +207,7 @@
 
   <aside role="complementary">
     <header>
-      <h3 class="is-hidden">Registration Help</h3>
+      <h3 class="sr">Registration Help</h3>
     </header>
 
     <div class="cta cta-welcome">