UX: Fix various accesibility issues.

UX: Fix various accesibility issues.
  • UX: Show error messages in red.

  • UX: Make ‘Enter’ key press the primary button.

  • UX: Use labels instead of placeholders.

  • UX: Use proper autocomplete attributes.

From 4243ed6b8f8aa85b622a1535cf338ca45cfdf70b Mon Sep 17 00:00:00 2001
From: Dan Ungureanu <dan@ungureanu.me>
Date: Thu, 6 Dec 2018 00:17:56 +0200
Subject: [PATCH] UX: Fix various accesibility issues.

* UX: Show error messages in red.

* UX: Make 'Enter' key press the primary button.

* UX: Use labels instead of placeholders.

* UX: Use proper autocomplete attributes.

diff --git a/assets/javascripts/discourse/connectors/user-preferences-account/encrypt.hbs b/assets/javascripts/discourse/connectors/user-preferences-account/encrypt.hbs
index 05cb050..25fb139 100644
--- a/assets/javascripts/discourse/connectors/user-preferences-account/encrypt.hbs
+++ b/assets/javascripts/discourse/connectors/user-preferences-account/encrypt.hbs
@@ -6,38 +6,62 @@
         {{#if isActive}}
           <p>{{i18n 'encrypt.preferences.status_enabled'}}</p>
           {{#if passphraseInput}}
-            <p>{{input type="password" value=oldPassphrase disabled=inProgress placeholder=(i18n "encrypt.preferences.old_passphrase_placeholder")}}</p>
-            <p>{{input type="password" value=passphrase    disabled=inProgress placeholder=(i18n "encrypt.preferences.passphrase_placeholder")}}</p>
-            <p>{{input type="password" value=passphrase2   disabled=inProgress placeholder=(i18n "encrypt.preferences.passphrase2_placeholder")}}</p>
-            {{#if passphraseStatus}}
-              <p>{{i18n passphraseStatus}}</p>
-            {{/if}}
+            <form>
+              <p>
+                <label for="">{{i18n "encrypt.preferences.old_passphrase_label"}}</label>
+                {{input type="password" value=oldPassphrase id="oldPassphrase" autocomplete="current-password" disabled=inProgress}}
+              </p>
+              <p>
+                <label for="">{{i18n "encrypt.preferences.passphrase_label"}}</label>
+                {{input type="password" value=passphrase id="passphrase" autocomplete="new-password" disabled=inProgress}}
+              </p>
+              <p>
+                <label for="">{{i18n "encrypt.preferences.passphrase2_label"}}</label>
+                {{input type="password" value=passphrase2 id="passphrase2" autocomplete="new-password" disabled=inProgress}}
+              </p>
+              {{#if passphraseStatus}}
+                <p class="text-danger">{{i18n passphraseStatus}}</p>
+              {{/if}}
 
-            {{d-button class="btn-primary" icon="exchange" action="changeEncrypt" disabled=(or passphraseStatus inProgress) label="encrypt.preferences.change"}}
-            {{d-button action="hidePassphraseInput" disabled=inProgress label="cancel"}}
+              {{d-button class="btn-primary" icon="exchange" action="changeEncrypt" disabled=(or passphraseStatus inProgress) label="encrypt.preferences.change"}}
+              {{d-button action="hidePassphraseInput" disabled=inProgress label="cancel"}}
+            </form>
           {{else}}
             {{d-button icon="exchange" action="showPassphraseInput" label="encrypt.preferences.change"}}
             {{d-button icon="times" action="deactivateEncrypt" label="encrypt.preferences.deactivate"}}
           {{/if}}
         {{else}}
-          <p>{{i18n 'encrypt.preferences.status_enabled_but_inactive'}}</p>
-          {{{i18n 'encrypt.preferences.notice_active'}}}
-          <p>{{input type="password" value=passphrase  disabled=inProgress placeholder=(i18n "encrypt.preferences.passphrase_placeholder")}}</p>
-          <p>{{d-button class="btn-primary" icon="unlock" action="activateEncrypt" disabled=inProgress label="encrypt.preferences.activate"}}</p>
+          <form>
+            <p>{{i18n 'encrypt.preferences.status_enabled_but_inactive'}}</p>
+            {{{i18n 'encrypt.preferences.notice_active'}}}
+            <p>
+              <label for="">{{i18n "encrypt.preferences.passphrase_label"}}</label>
+              {{input type="password" value=passphrase id="passphrase" autocomplete="current-password" disabled=inProgress}}
+            </p>
+            <p>{{d-button class="btn-primary" icon="unlock" action="activateEncrypt" disabled=inProgress label="encrypt.preferences.activate"}}</p>
+          </form>
         {{/if}}
       {{else}}
         <p>{{i18n 'encrypt.preferences.status_disabled'}}</p>
         {{#if passphraseInput}}
-          {{{i18n 'encrypt.preferences.notice_enable'}}}
-          <p>{{input type="password" value=passphrase  disabled=inProgress placeholder=(i18n "encrypt.preferences.passphrase_placeholder")}}</p>
-          <p>{{input type="password" value=passphrase2 disabled=inProgress placeholder=(i18n "encrypt.preferences.passphrase2_placeholder")}}</p>
-          {{#if passphraseStatus}}
-            <p>{{i18n passphraseStatus}}</p>
-          {{/if}}
-          <p>
-            {{d-button class="btn-primary" icon="lock" action="enableEncrypt" disabled=(or passphraseStatus inProgress) label="encrypt.preferences.enable"}}
-            {{d-button action="hidePassphraseInput" disabled=inProgress label="cancel"}}
-          </p>
+          <form>
+            {{{i18n 'encrypt.preferences.notice_enable'}}}
+            <p>
+              <label for="">{{i18n "encrypt.preferences.passphrase_label"}}</label>
+              {{input type="password" value=passphrase id="passphrase" autocomplete="new-password" disabled=inProgress}}
+            </p>
+            <p>
+              <label for="">{{i18n "encrypt.preferences.passphrase2_label"}}</label>
+              {{input type="password" value=passphrase2 id="passphrase2" autocomplete="new-password" disabled=inProgress}}
+            </p>
+            {{#if passphraseStatus}}
+              <p class="text-danger">{{i18n passphraseStatus}}</p>
+            {{/if}}
+            <p>
+              {{d-button class="btn-primary" icon="lock" action="enableEncrypt" disabled=(or passphraseStatus inProgress) label="encrypt.preferences.enable"}}
+              {{d-button action="hidePassphraseInput" disabled=inProgress label="cancel"}}
+            </p>
+          </form>
         {{else}}
           {{d-button icon="lock" action="showPassphraseInput" label="encrypt.preferences.enable"}}
         {{/if}}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 95fbee3..60b6833 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -22,9 +22,9 @@ en:
         status_enabled_but_inactive: "You have enabled encryption, but did not activate it on this device."
         status_disabled: "You have not enabled encryption on this account."
 
-        old_passphrase_placeholder: "old passphrase"
-        passphrase_placeholder: "passphrase"
-        passphrase2_placeholder: "retype passphrase"
+        old_passphrase_label: "Old passphrase:"
+        passphrase_label: "Passphrase:"
+        passphrase2_label: "Retype passphrase:"
         passphrase_enter: "Please choose a secure passphrase to encrypt your key."
         passphrase_insecure: "Please choose a stronger passphrase (at least 15 characters)."
         passphrase_mismatch: "The two passphrases you entered do not match."

GitHub

2 Likes