Merge pull request #6227 from svbergerem/accessibility

Improve accessibility of signin/signup/password and conversation pages

Changelog.md

@@ -44,6 +44,7 @@ With the port to Bootstrap 3, app/views/terms/default.haml has a new structure.
 
 ## Bug fixes
 * Destroy Participation when removing interactions with a post [#5852](https://github.com/diaspora/diaspora/pull/5852)
+* Improve accessibility of a couple pages [#6227](https://github.com/diaspora/diaspora/pull/6227)
 
 ## Features
 * Support color themes [#6033](https://github.com/diaspora/diaspora/pull/6033)

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;

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

app/views/conversations/_new.haml

 .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'

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"

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

app/views/registrations/_form.haml

 = 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")
-
-    %label.control-label{for: "user_username"}
-      = t('registrations.new.username')
+                    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#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_]+"
-
-    %label.control-label{for: "user_password"}
-      = t('registrations.new.password')
+    = 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#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: "......+"
-
-    %label.control-label{for: "user_password_confirmation"}
-      = t('registrations.new.password_confirmation')
+    = 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#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"}

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'

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?"