diff --git a/app/assets/stylesheets/new_styles/_forms.scss b/app/assets/stylesheets/new_styles/_forms.scss index c85b786bc..881e87b59 100644 --- a/app/assets/stylesheets/new_styles/_forms.scss +++ b/app/assets/stylesheets/new_styles/_forms.scss @@ -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; diff --git a/app/views/devise/passwords/edit.haml b/app/views/devise/passwords/edit.haml index 12559f89e..16a5a38d4 100644 --- a/app/views/devise/passwords/edit.haml +++ b/app/views/devise/passwords/edit.haml @@ -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" diff --git a/app/views/devise/passwords/new.haml b/app/views/devise/passwords/new.haml index a96376900..0dd942247 100644 --- a/app/views/devise/passwords/new.haml +++ b/app/views/devise/passwords/new.haml @@ -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 diff --git a/app/views/registrations/_form.haml b/app/views/registrations/_form.haml index 950844eb8..407ccb1fe 100644 --- a/app/views/registrations/_form.haml +++ b/app/views/registrations/_form.haml @@ -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"} diff --git a/app/views/sessions/new.html.haml b/app/views/sessions/new.html.haml index faaed135d..e2f8e9019 100644 --- a/app/views/sessions/new.html.haml +++ b/app/views/sessions/new.html.haml @@ -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'