Commit f7088061 by Xavier Antoviaque

accessibility: Add `aria-describedby` to login/forgot password (LMS-602)

Also adding the email description to the login page and applying the
same aria attribute to the correspondin input on that page.

From LMS-602:

> There is additional explanatory text, marked up in a span element after
> the email input. The input elements should be explicitly associated with
> this additional text using the aria-describedby attribute. This will
> require an ID to be assigned to the span element.
parent 9c6987d0
...@@ -19,8 +19,8 @@ ...@@ -19,8 +19,8 @@
<ol class="list-input"> <ol class="list-input">
<li class="field required text" id="field-email"> <li class="field required text" id="field-email">
<label for="pwd_reset_email">${_("Your E-mail Address")}</label> <label for="pwd_reset_email">${_("Your E-mail Address")}</label>
<input class="" id="pwd_reset_email" type="email" name="email" value="" placeholder="example: username@domain.com" /> <input class="" id="pwd_reset_email" type="email" name="email" value="" placeholder="example: username@domain.com" aria-describedby="pwd_reset_email-tip" />
<span class="tip tip-input">${_("This is the email address you used to register with {platform}").format(platform=settings.PLATFORM_NAME)}</span> <span class="tip tip-input" id="pwd_reset_email-tip">${_("This is the e-mail address you used to register with {platform}").format(platform=settings.PLATFORM_NAME)}</span>
</li> </li>
</ol> </ol>
</fieldset> </fieldset>
......
...@@ -113,7 +113,8 @@ ...@@ -113,7 +113,8 @@
<ol class="list-input"> <ol class="list-input">
<li class="field required text" id="field-email"> <li class="field required text" id="field-email">
<label for="email">${_('E-mail')}</label> <label for="email">${_('E-mail')}</label>
<input class="" id="email" type="email" name="email" value="" placeholder="example: username@domain.com" required aria-required="true" /> <input class="" id="email" type="email" name="email" value="" placeholder="example: username@domain.com" required aria-required="true" aria-described-by="email-tip" />
<span class="tip tip-input" id="email-tip">${_("This is the e-mail address you used to register with {platform}").format(platform=settings.PLATFORM_NAME)}</span>
</li> </li>
<li class="field required password" id="field-password"> <li class="field required password" id="field-password">
<label for="password">${_('Password')}</label> <label for="password">${_('Password')}</label>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment