Use sr-only and aria-labelledby on signup/signin/password pages
This commit is contained in:
Steffen van Bergerem
parent
6e2a2d420c
commit
4819544030
5 changed files with 79 additions and 45 deletions
|
|
@ -27,13 +27,6 @@ input:-webkit-autofill{
|
|||
form.block-form {
|
||||
margin: 20px auto;
|
||||
|
||||
label {
|
||||
color : $text-dark-grey;
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin-bottom: 1em;
|
||||
background-color: #fff;
|
||||
|
|
|
|||
|
|
@ -12,17 +12,30 @@
|
|||
= f.error_messages
|
||||
|
||||
%fieldset.form
|
||||
%label{for: "user_password"}
|
||||
= t('devise.passwords.edit.new_password')
|
||||
%label#passwordLabel.sr-only{for: "user_password"}
|
||||
= t("devise.passwords.edit.new_password")
|
||||
%i.entypo-lock
|
||||
= f.password_field :password, class: "input-block-level form-control", required: true, placeholder: t('devise.passwords.edit.new_password'), autocapitalize: "none", autocorrect: "off", autofocus: true
|
||||
= f.password_field :password,
|
||||
class: "input-block-level form-control",
|
||||
required: true,
|
||||
placeholder: t("devise.passwords.edit.new_password"),
|
||||
autocapitalize: "none",
|
||||
autocorrect: "off",
|
||||
autofocus: true,
|
||||
aria: {labelledby: "passwordLabel"}
|
||||
|
||||
= f.hidden_field :reset_password_token
|
||||
|
||||
%label{for: "user_password_confirmation"}
|
||||
= t('devise.passwords.edit.confirm_password')
|
||||
%label#passwordConfirmationLabel.sr-only{for: "user_password_confirmation"}
|
||||
= t("devise.passwords.edit.confirm_password")
|
||||
%i.entypo-lock
|
||||
= f.password_field :password_confirmation, class: "input-block-level form-control", required: true, placeholder: t('devise.passwords.edit.confirm_password'), autocapitalize: "none", autocorrect: "off"
|
||||
= f.password_field :password_confirmation,
|
||||
class: "input-block-level form-control",
|
||||
required: true,
|
||||
placeholder: t("devise.passwords.edit.confirm_password"),
|
||||
autocapitalize: "none",
|
||||
autocorrect: "off",
|
||||
aria: {labelledby: "passwordConfirmationLabel"}
|
||||
|
||||
= hidden_field(:user, :remember_me, value: 1)
|
||||
= f.submit t('devise.passwords.edit.change_password'), class: "btn btn-block btn-default"
|
||||
|
|
|
|||
|
|
@ -14,10 +14,18 @@
|
|||
%i
|
||||
= t('devise.passwords.new.no_account') # this is an error message and should not be displayed as a legend
|
||||
%fieldset
|
||||
%label{for: "user_email"}
|
||||
= t('devise.passwords.new.email')
|
||||
%label#emailLabel.sr-only{for: "user_email"}
|
||||
= t("devise.passwords.new.email")
|
||||
%i.entypo-mail
|
||||
= f.text_field :email, class: "input-block-level form-control", required: true, autocapitalize: "off", placeholder: t('devise.passwords.new.email'), autocorrect: "off", autofocus: true
|
||||
= f.text_field :email,
|
||||
class: "input-block-level form-control",
|
||||
required: true,
|
||||
autocapitalize: "off",
|
||||
placeholder: t("devise.passwords.new.email"),
|
||||
autocorrect: "off",
|
||||
autofocus: true,
|
||||
aria: {labelledby: "passwordLabel"}
|
||||
|
||||
= f.submit t('devise.passwords.new.send_password_instructions'), class: "btn btn-block btn-default"
|
||||
|
||||
.text-center
|
||||
|
|
|
|||
|
|
@ -1,31 +1,49 @@
|
|||
= form_for(resource, url: registration_path(resource_name), html: {class: "form-horizontal block-form", autocomplete: "off"}) do |f|
|
||||
|
||||
%fieldset
|
||||
%label
|
||||
= f.label :user_email, t("registrations.new.email"), class: "control-label"
|
||||
= f.label :email, t("registrations.new.email"), class: "sr-only control-label", id: "emailLabel"
|
||||
%i.entypo-mail
|
||||
= f.email_field :email,
|
||||
autofocus: true,
|
||||
class: "input-block-level form-control",
|
||||
data: {content: t("users.edit.your_email_private")},
|
||||
placeholder: t("registrations.new.email"),
|
||||
required: true,
|
||||
title: t("registrations.new.enter_email")
|
||||
autofocus: true,
|
||||
class: "input-block-level form-control",
|
||||
data: {content: t("users.edit.your_email_private")},
|
||||
placeholder: t("registrations.new.email"),
|
||||
required: true,
|
||||
title: t("registrations.new.enter_email"),
|
||||
aria: {labelledby: "emailLabel"}
|
||||
|
||||
%label.control-label{for: "user_username"}
|
||||
= t('registrations.new.username')
|
||||
%label#usernameLabel.sr-only.control-label{for: "user_username"}
|
||||
= t("registrations.new.username")
|
||||
%i.entypo-user
|
||||
= f.text_field :username, class: "input-block-level form-control", placeholder: t('registrations.new.username'), title: t('registrations.new.enter_username'), required: true, pattern: "[A-Za-z0-9_]+"
|
||||
= f.text_field :username,
|
||||
class: "input-block-level form-control",
|
||||
placeholder: t("registrations.new.username"),
|
||||
title: t("registrations.new.enter_username"),
|
||||
required: true,
|
||||
pattern: "[A-Za-z0-9_]+",
|
||||
aria: {labelledby: "usernameLabel"}
|
||||
|
||||
%label.control-label{for: "user_password"}
|
||||
= t('registrations.new.password')
|
||||
%label#passwordLabel.sr-only.control-label{for: "user_password"}
|
||||
= t("registrations.new.password")
|
||||
%i.entypo-lock
|
||||
= f.password_field :password, class: "input-block-level form-control", placeholder: t('registrations.new.password'), title: t('registrations.new.enter_password'), required: true, pattern: "......+"
|
||||
= f.password_field :password,
|
||||
class: "input-block-level form-control",
|
||||
placeholder: t("registrations.new.password"),
|
||||
title: t("registrations.new.enter_password"),
|
||||
required: true,
|
||||
pattern: "......+",
|
||||
aria: {labelledby: "passwordLabel"}
|
||||
|
||||
%label.control-label{for: "user_password_confirmation"}
|
||||
= t('registrations.new.password_confirmation')
|
||||
%label#passwordConfirmationLabel.sr-only.control-label{for: "user_password_confirmation"}
|
||||
= t("registrations.new.password_confirmation")
|
||||
%i.entypo-lock
|
||||
= f.password_field :password_confirmation, class: "input-block-level form-control", placeholder: t('registrations.new.password_confirmation'), title: t('registrations.new.enter_password_again'), required: true, pattern: "......+"
|
||||
= f.password_field :password_confirmation,
|
||||
class: "input-block-level form-control",
|
||||
placeholder: t("registrations.new.password_confirmation"),
|
||||
title: t("registrations.new.enter_password_again"),
|
||||
required: true,
|
||||
pattern: "......+",
|
||||
aria: {labelledby: "passwordConfirmationLabel"}
|
||||
|
||||
- if AppConfig.settings.captcha.enable?
|
||||
= show_simple_captcha object: 'user', :code_type => 'numeric', input_html: {class: "form-control"}
|
||||
|
|
|
|||
|
|
@ -9,27 +9,29 @@
|
|||
|
||||
= form_for resource, as: resource_name, url: session_path(resource_name), html: {class: 'block-form'}, autocomplete: 'off' do |f|
|
||||
%fieldset
|
||||
%label{for: "user_username"}
|
||||
%label#usernameLabel.sr-only{for: "user_username"}
|
||||
= t('registrations.new.username')
|
||||
%i.entypo-user
|
||||
= f.text_field :username,
|
||||
placeholder: t('registrations.new.username'),
|
||||
class: 'input-block-level form-control',
|
||||
placeholder: t("registrations.new.username"),
|
||||
class: "input-block-level form-control",
|
||||
required: true,
|
||||
pattern: '[A-Za-z0-9_.@\-]+',
|
||||
autocapitalize: 'none',
|
||||
autocorrect: 'off',
|
||||
autofocus: true
|
||||
pattern: "[A-Za-z0-9_.@\-]+",
|
||||
autocapitalize: "none",
|
||||
autocorrect: "off",
|
||||
autofocus: true,
|
||||
aria: {labelledby: "usernameLabel"}
|
||||
|
||||
%label{for: "user_password"}
|
||||
%label#passwordLabel.sr-only{for: "user_password"}
|
||||
= t('registrations.new.password')
|
||||
%i.entypo-lock
|
||||
= f.password_field :password,
|
||||
placeholder: t('registrations.new.password'),
|
||||
class: 'input-block-level form-control',
|
||||
placeholder: t("registrations.new.password"),
|
||||
class: "input-block-level form-control",
|
||||
required: true,
|
||||
autocapitalize: 'none',
|
||||
autocorrect: 'off'
|
||||
autocapitalize: "none",
|
||||
autocorrect: "off",
|
||||
aria: {labelledby: "passwordLabel"}
|
||||
|
||||
= f.hidden_field :remember_me, value: 1
|
||||
= f.submit t('devise.sessions.new.sign_in'), class: 'btn btn-large btn-block btn-default'
|
||||
|
|
|
|||
Loading…
Reference in a new issue