nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use sr-only and aria-labelledby on signup/signin/password pages

Browse source
This commit is contained in:
Steffen van Bergerem 2015-07-22 12:24:09 +02:00
parent 6e2a2d420c
commit 4819544030
5 changed files with 79 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/assets/stylesheets/new_styles/_forms.scss
View file

@ -27,13 +27,6 @@ input:-webkit-autofill{
form.block-form { form.block-form {
margin: 20px auto; margin: 20px auto;
label {
color : $text-dark-grey;
position: absolute;
top: -9999px;
left: -9999px;
}
fieldset { fieldset {
margin-bottom: 1em; margin-bottom: 1em;
background-color: #fff; background-color: #fff;

25
app/views/devise/passwords/edit.haml
View file

@ -12,17 +12,30 @@
= f.error_messages = f.error_messages
%fieldset.form %fieldset.form
%label{for: "user_password"} %label#passwordLabel.sr-only{for: "user_password"}
= t('devise.passwords.edit.new_password') = t("devise.passwords.edit.new_password")
%i.entypo-lock %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 = f.hidden_field :reset_password_token
%label{for: "user_password_confirmation"} %label#passwordConfirmationLabel.sr-only{for: "user_password_confirmation"}
= t('devise.passwords.edit.confirm_password') = t("devise.passwords.edit.confirm_password")
%i.entypo-lock %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) = hidden_field(:user, :remember_me, value: 1)
= f.submit t('devise.passwords.edit.change_password'), class: "btn btn-block btn-default" = f.submit t('devise.passwords.edit.change_password'), class: "btn btn-block btn-default"

14
app/views/devise/passwords/new.haml
View file

@ -14,10 +14,18 @@
%i %i
= t('devise.passwords.new.no_account') # this is an error message and should not be displayed as a legend = t('devise.passwords.new.no_account') # this is an error message and should not be displayed as a legend
%fieldset %fieldset
%label{for: "user_email"} %label#emailLabel.sr-only{for: "user_email"}
= t('devise.passwords.new.email') = t("devise.passwords.new.email")
%i.entypo-mail %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" = f.submit t('devise.passwords.new.send_password_instructions'), class: "btn btn-block btn-default"
.text-center .text-center

42
app/views/registrations/_form.haml
View file

@ -1,8 +1,7 @@
= form_for(resource, url: registration_path(resource_name), html: {class: "form-horizontal block-form", autocomplete: "off"}) do |f| = form_for(resource, url: registration_path(resource_name), html: {class: "form-horizontal block-form", autocomplete: "off"}) do |f|
%fieldset %fieldset
%label = f.label :email, t("registrations.new.email"), class: "sr-only control-label", id: "emailLabel"
= f.label :user_email, t("registrations.new.email"), class: "control-label"
%i.entypo-mail %i.entypo-mail
= f.email_field :email, = f.email_field :email,
autofocus: true, autofocus: true,
@ -10,22 +9,41 @@
data: {content: t("users.edit.your_email_private")}, data: {content: t("users.edit.your_email_private")},
placeholder: t("registrations.new.email"), placeholder: t("registrations.new.email"),
required: true, required: true,
title: t("registrations.new.enter_email") title: t("registrations.new.enter_email"),
aria: {labelledby: "emailLabel"}
%label.control-label{for: "user_username"} %label#usernameLabel.sr-only.control-label{for: "user_username"}
= t('registrations.new.username') = t("registrations.new.username")
%i.entypo-user %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"} %label#passwordLabel.sr-only.control-label{for: "user_password"}
= t('registrations.new.password') = t("registrations.new.password")
%i.entypo-lock %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"} %label#passwordConfirmationLabel.sr-only.control-label{for: "user_password_confirmation"}
= t('registrations.new.password_confirmation') = t("registrations.new.password_confirmation")
%i.entypo-lock %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? - if AppConfig.settings.captcha.enable?
= show_simple_captcha object: 'user', :code_type => 'numeric', input_html: {class: "form-control"} = show_simple_captcha object: 'user', :code_type => 'numeric', input_html: {class: "form-control"}

26
app/views/sessions/new.html.haml
View file

@ -9,27 +9,29 @@
= form_for resource, as: resource_name, url: session_path(resource_name), html: {class: 'block-form'}, autocomplete: 'off' do |f| = form_for resource, as: resource_name, url: session_path(resource_name), html: {class: 'block-form'}, autocomplete: 'off' do |f|
%fieldset %fieldset
%label{for: "user_username"} %label#usernameLabel.sr-only{for: "user_username"}
= t('registrations.new.username') = t('registrations.new.username')
%i.entypo-user %i.entypo-user
= f.text_field :username, = f.text_field :username,
placeholder: t('registrations.new.username'), placeholder: t("registrations.new.username"),
class: 'input-block-level form-control', class: "input-block-level form-control",
required: true, required: true,
pattern: '[A-Za-z0-9_.@\-]+', pattern: "[A-Za-z0-9_.@\-]+",
autocapitalize: 'none', autocapitalize: "none",
autocorrect: 'off', autocorrect: "off",
autofocus: true autofocus: true,
aria: {labelledby: "usernameLabel"}
%label{for: "user_password"} %label#passwordLabel.sr-only{for: "user_password"}
= t('registrations.new.password') = t('registrations.new.password')
%i.entypo-lock %i.entypo-lock
= f.password_field :password, = f.password_field :password,
placeholder: t('registrations.new.password'), placeholder: t("registrations.new.password"),
class: 'input-block-level form-control', class: "input-block-level form-control",
required: true, required: true,
autocapitalize: 'none', autocapitalize: "none",
autocorrect: 'off' autocorrect: "off",
aria: {labelledby: "passwordLabel"}
= f.hidden_field :remember_me, value: 1 = f.hidden_field :remember_me, value: 1
= f.submit t('devise.sessions.new.sign_in'), class: 'btn btn-large btn-block btn-default' = f.submit t('devise.sessions.new.sign_in'), class: 'btn btn-large btn-block btn-default'