From 48195440304e7d391c768209bb3a62f032f3cd8e Mon Sep 17 00:00:00 2001 From: Steffen van Bergerem Date: Wed, 22 Jul 2015 12:24:09 +0200 Subject: [PATCH 1/2] Use sr-only and aria-labelledby on signup/signin/password pages --- app/assets/stylesheets/new_styles/_forms.scss | 7 --- app/views/devise/passwords/edit.haml | 25 ++++++--- app/views/devise/passwords/new.haml | 14 +++-- app/views/registrations/_form.haml | 52 +++++++++++++------ app/views/sessions/new.html.haml | 26 +++++----- 5 files changed, 79 insertions(+), 45 deletions(-) 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' From 5fd89961c4952832d1a22d5ca1c73381da80539d Mon Sep 17 00:00:00 2001 From: Steffen van Bergerem Date: Wed, 22 Jul 2015 13:02:16 +0200 Subject: [PATCH 2/2] Use aria-labelledby for conversations --- app/views/conversations/_messages.haml | 12 ++++++++++-- app/views/conversations/_new.haml | 20 ++++++++++++++------ config/locales/diaspora/en.yml | 1 + 3 files changed, 25 insertions(+), 8 deletions(-) diff --git a/app/views/conversations/_messages.haml b/app/views/conversations/_messages.haml index 43580d158..8aba41429 100644 --- a/app/views/conversations/_messages.haml +++ b/app/views/conversations/_messages.haml @@ -7,8 +7,16 @@ = owner_image_tag(:thumb_small) .media-body = form_for [conversation, Message.new], html: {class: "control-group"} do |message| - = message.text_area :text, rows: 5, tabindex: 1, class: "form-control form-group" - = message.submit t("conversations.show.reply").capitalize, + .form-group + %label#messageLabel.sr-only{for: "message_text"} + = t("conversations.new.message") + = message.text_area :text, + rows: 5, + tabindex: 1, + class: "form-control form-group", + aria: {labelledby: "messageLabel"} + + = message.submit t("conversations.show.reply"), "data-disable-with" => t("conversations.show.replying"), class: "btn btn-primary pull-right", tabindex: 2 .clearfix diff --git a/app/views/conversations/_new.haml b/app/views/conversations/_new.haml index 398682402..2358b8b19 100644 --- a/app/views/conversations/_new.haml +++ b/app/views/conversations/_new.haml @@ -1,14 +1,22 @@ .container-fluid = form_for Conversation.new, html: {class: "form-horizontal form_do_not_clear"}, remote: true do |conversation| .form-group - %label{ for: 'contact_ids' } - = t('.to') + %label#toLabel{for: "contact_ids"} + = t(".to") = text_field_tag "contact_autocomplete", nil, class: "form-control" .form-group - %label{ for: 'conversation_subject' } - = t('.subject') - = conversation.text_field :subject, class: 'input-block-level form-control' + %label#subjectLabel{for: "conversation_subject"} + = t(".subject") + = conversation.text_field :subject, + class: "input-block-level form-control", + aria: {labelledby: "subjectLabel"} .form-group - = text_area_tag "conversation[text]", '', rows: 5, class: 'input-block-level form-control' + %label#messageLabel.sr-only{for: "conversation_text"} + = t(".message") + = text_area_tag "conversation[text]", + "", + rows: 5, + class: "input-block-level form-control", + aria: {labelledby: "messageLabel"} .form-group = conversation.submit t('.send'), 'data-disable-with' => t('.sending'), class: 'btn btn-primary pull-right' diff --git a/config/locales/diaspora/en.yml b/config/locales/diaspora/en.yml index 8226ffb1f..969360426 100644 --- a/config/locales/diaspora/en.yml +++ b/config/locales/diaspora/en.yml @@ -352,6 +352,7 @@ en: to: "To" subject: "Subject" subject_default: "No subject" + message: "Message" send: "Send" sending: "Sending..." abandon_changes: "Abandon changes?"