edx.org - replaces login/register semantically verbose fieldset and legend…

edx.org - replaces login/register semantically verbose fieldset and legend elements with simpler markup

lms/static/sass/multicourse/_account.scss

@@ -208,7 +208,7 @@
       margin-bottom: $baseline;
     }
 
-    fieldset {
+    .group-form {
       margin: 0;
       padding-top: 0;
       padding-bottom: $baseline;

lms/templates/login.html

@@ -114,8 +114,8 @@
         ${_('Please provide the following information to log into your {platform_name} account. Required fields are noted by <strong class="indicator">bold text and an asterisk (*)</strong>.').format(platform_name=settings.PLATFORM_NAME)}
       </p>
 
-      <fieldset class="group group-form group-form-requiredinformation">
-        <legend class="sr">${_('Required Information')}</legend>
+      <div class="group group-form group-form-requiredinformation">
+        <h2 class="sr">${_('Required Information')}</h2>
 
         <ol class="list-input">
           <li class="field required text" id="field-email">
@@ -131,10 +131,10 @@
             </span>
           </li>
         </ol>
-      </fieldset>
+      </div>
 
-      <fieldset class="group group-form group-form-secondary group-form-accountpreferences">
-        <legend class="sr">${_('Account Preferences')}</legend>
+      <div class="group group-form group-form-secondary group-form-accountpreferences">
+        <h2 class="sr">${_('Account Preferences')}</h2>
 
         <ol class="list-input">
           <li class="field required checkbox" id="field-remember">
@@ -142,7 +142,7 @@
             <label for="remember-yes">${_('Remember me')}</label>
           </li>
         </ol>
-      </fieldset>
+      </div>
 
 % if course_id and enrollment_action:
       <input type="hidden" name="enrollment_action" value="${enrollment_action | h}" />

lms/templates/register.html

@@ -113,8 +113,8 @@
         ${_('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="sr">${_('Required Information')}</legend>
+      <div class="group group-form group-form-requiredinformation">
+        <h2 class="sr">${_('Required Information')}</h2>
 
         % if has_extauth_info is UNDEFINED:
 
@@ -176,10 +176,10 @@
         </ol>
 
         % endif
-      </fieldset>
+      </div>
 
-      <fieldset class="group group-form group-form-secondary group-form-personalinformation">
-        <legend class="sr">${_("Optional Personal Information")}</legend>
+      <div class="group group-form group-form-secondary group-form-personalinformation">
+        <h2 class="sr">${_("Optional Personal Information")}</h2>
 
         <ol class="list-input">
           <li class="field-group">
@@ -214,10 +214,10 @@
             </div>
           </li>
         </ol>
-      </fieldset>
+      </div>
 
-      <fieldset class="group group-form group-form-personalinformation2">
-        <legend class="sr">${_("Optional Personal Information")}</legend>
+      <div class="group group-form group-form-personalinformation2">
+        <h2 class="sr">${_("Optional Personal Information")}</h2>
 
         <ol class="list-input">
           <li class="field text" id="field-address-mailing">
@@ -230,10 +230,10 @@
             <textarea id="goals" name="goals" value=""></textarea>
           </li>
         </ol>
-      </fieldset>
+      </div>
 
-      <fieldset class="group group-form group-form-accountacknowledgements">
-        <legend class="sr">${_("Account Acknowledgements")}</legend>
+      <div class="group group-form group-form-accountacknowledgements">
+        <h2 class="sr">${_("Account Acknowledgements")}</h2>
 
         <ol class="list-input">
           <li class="field-group">
@@ -264,7 +264,7 @@
             </div>
           </li>
         </ol>
-      </fieldset>
+      </div>
 
 % if course_id and enrollment_action:
       <input type="hidden" name="enrollment_action" value="${enrollment_action | h}" />