refactor: placeholders

- removed placeholder when no necessary info is provided (eg. doubled the lable text) - display label where useful - added '...' when an empty input looked weird - removed unused translations
Dataport · Nov 27, 2024 · e6ae89e · e6ae89e
1 parent 1c36862
commit e6ae89e
Show file tree

Hide file tree

Showing 9 changed files with 17 additions and 33 deletions.
diff --git a/src/app/create-appointment/create-appointment.component.html b/src/app/create-appointment/create-appointment.component.html
@@ -39,7 +39,6 @@ <h1 class="text-center" id="change-details-heading">
                 data-id="titleInput"
                 formControlName="title"
                 id="title"
-                placeholder="{{ 'poll.title.title' | translate }}"
                 type="text"
                 aria-describedby="required-title invalid-title maxLength-title">
               @if ((title.dirty || title.touched) && !!title.errors?.required) {
@@ -96,7 +95,6 @@ <h1 class="text-center" id="change-details-heading">
                 data-id="nameInput"
                 formControlName="name"
                 id="name"
-                placeholder="{{ 'poll.details.name.name' | translate }}"
                 type="text"
                 aria-describedby="required-name invalid-name long-name"
               >
@@ -152,7 +150,6 @@ <h1 class="text-center" id="change-details-heading">
                 data-id="locationInput"
                 formControlName="location"
                 id="location"
-                placeholder="{{ 'poll.details.place.place' | translate }}"
                 type="text"
                 aria-describedby="invalid-location maxLength-location"
               >
@@ -201,7 +198,6 @@ <h1 class="text-center" id="change-details-heading">
                 data-id="descriptionInput"
                 formControlName="description"
                 id="description"
-                placeholder="{{ 'poll.details.description.description' | translate }}"
                 rows="4"
                 type="text"
                 aria-describedby="maxLength-description"

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -34,7 +34,7 @@ <h1 class="text-center">
               data-id="createPollInput"
               formControlName="title"
               id="title"
-              placeholder="{{ 'poll.title.placeholder' | translate }}"
+              placeholder="{{ 'home.placeholder' | translate }}"
               aria-describedby="required-title invalid-title long-title"
               type="text">
             @if ((title.dirty || title.touched) && !!title.errors?.required) {

diff --git a/src/app/password/password.component.html b/src/app/password/password.component.html
@@ -35,7 +35,7 @@ <h1 class="text-center" data-id="locked">
               data-id="passwordInput"
               formControlName="password"
               id="password"
-              placeholder="{{ 'password.placeholder' | translate }}"
+              placeholder="{{ 'home.placeholder' | translate }}"
               type="password"
               aria-describedby="invalid"
             >

diff --git a/src/app/poll/mobile-poll-table.component.html b/src/app/poll/mobile-poll-table.component.html
@@ -42,7 +42,7 @@
         <ng-container [formGroup]="formHelper.getParticipantForm()">
           <div class="col d-flex align-items-center">
             <!-- text input for entering/editing the participant name -->
-            <label class="sr-only" for="name-add">{{ 'participant.name' | translate }}</label>
+            <label for="name-add">{{ 'participant.name' | translate }}</label>
             <input
               required
               [ngClass]="{'has-error': formHelper.getParticipantFormName().invalid

diff --git a/src/app/poll/poll.component.html b/src/app/poll/poll.component.html
@@ -120,16 +120,16 @@ <h1 class="text-center" data-id="pollHeading">
                         <div
                           [ngClass]="{'has-error': formHelper.getParticipantFormName().invalid
                   && (formHelper.getParticipantFormName().dirty || formHelper.getParticipantFormName().touched)}"
-                          class="col-10 form-group">
-                          <label class="sr-only" for="name-add">{{ 'poll.details.name.name' | translate }}</label>
+                          class="form-group">
+                          <label for="name-add">{{ 'poll.details.name.name' | translate }}</label>
                           <input
                             required
                             appAutoFocus
                             class="form-control ml-2 name-add"
                             data-id="nameInput"
                             formControlName="name"
                             id="name-add"
-                            placeholder="{{ 'participant.name' | translate }}"
+                            placeholder="{{ 'home.placeholder' | translate }}"
                             type="text"
                             aria-describedby="no-name-add invalid-add-name too-long-add"
                           >
@@ -260,13 +260,9 @@ <h1 class="text-center" data-id="pollHeading">
                              'has-error': formHelper.getParticipantFormName().invalid
                                && (formHelper.getParticipantFormName().dirty || formHelper.getParticipantFormName().touched)
                              }"
-                            class="col-10 form-group"
+                            class="form-group"
                           >
-                            <label
-                              class="sr-only"
-                              data-id="nameEditLabel"
-                              for="name-edit"
-                            >
+                            <label data-id="nameEditLabel" for="name-edit">
                               {{ 'poll.details.name.name' | translate }}
                             </label>
                             <input
@@ -275,7 +271,7 @@ <h1 class="text-center" data-id="pollHeading">
                               data-id="nameEditInput"
                               formControlName="name"
                               id="name-edit"
-                              placeholder="{{ 'participant.name' | translate }}"
+                              placeholder="{{ 'home.placeholder' | translate }}"
                               type="text"
                               aria-describedby="no-name-edit invalid-edit-name too-long-edit"
                             >

diff --git a/src/locales/de-DE-du.json b/src/locales/de-DE-du.json
@@ -27,7 +27,8 @@
     "security": "Sicherheit",
     "networking": "Vernetzung",
     "slogan": "Erstelle Umfragen und komme mit deinen Leuten auf einen Nenner!",
-    "testEnvironmentBanner": "Dies ist die Testumgebung von {{value}}. Bitte verwende keine personenbezogenen Daten."
+    "testEnvironmentBanner": "Dies ist die Testumgebung von {{value}}. Bitte verwende keine personenbezogenen Daten.",
+    "placeholder": "..."
   },
   "poll": {
     "actions": "Aktionen",
@@ -233,9 +234,6 @@
     "minimum": "(mind. 8 Zeichen, eine Zahl, ein Großbuchstabe, ein Sonderzeichen)",
     "locked": "Diese Umfrage ist passwortgeschützt",
     "enter": "Bitte gib das Dir übermittelte Passwort ein, um die Umfrage beantworten zu können.",
-    "placeholder": "Passwort eingeben",
-    "placeholderEnter": "eingeben",
-    "placeholderChange": "ändern",
     "enterPassword": "Passwort eingeben",
     "changePassword": "Passwort ändern",
     "invalid": "Das eingegebene Passwort ist ungültig.",

diff --git a/src/locales/de-DE-sie.json b/src/locales/de-DE-sie.json
@@ -27,7 +27,8 @@
     "security": "Sicherheit",
     "networking": "Vernetzung",
     "slogan": "Sie suchen einen gemeinsamen Termin mit mehreren Personen? Erstellen Sie eine Termin-Umfrage.",
-    "testEnvironmentBanner": "Dies ist die Testumgebung von {{value}}. Bitte verwenden Sie keine personenbezogenen Daten."
+    "testEnvironmentBanner": "Dies ist die Testumgebung von {{value}}. Bitte verwenden Sie keine personenbezogenen Daten.",
+    "placeholder": "..."
   },
   "poll": {
     "actions": "Aktionen",
@@ -233,9 +234,6 @@
     "minimum": "(mind. 8 Zeichen, eine Zahl, ein Großbuchstabe, ein Sonderzeichen)",
     "locked": "Diese Umfrage ist passwortgeschützt",
     "enter": "Bitte geben Sie das Ihnen übermittelte Passwort ein, um die Umfrage beantworten zu können.",
-    "placeholder": "Passwort eingeben",
-    "placeholderEnter": "eingeben",
-    "placeholderChange": "ändern",
     "enterPassword": "Passwort eingeben",
     "changePassword": "Passwort ändern",
     "invalid": "Das eingegebene Passwort ist ungültig.",

diff --git a/src/locales/en-EN.json b/src/locales/en-EN.json
@@ -27,7 +27,8 @@
     "security": "Security",
     "networking": "Networking",
     "slogan": "Create appointments and get on the same page with your people!",
-    "testEnvironmentBanner": "This is a test environment of {{value}}. Please do not fill in personal data."
+    "testEnvironmentBanner": "This is a test environment of {{value}}. Please do not fill in personal data.",
+    "placeholder": "..."
   },
   "poll": {
     "actions": "Actions",
@@ -233,9 +234,6 @@
     "minimum": "(min. 8 characters, one number, one capital letter, one special character)",
     "locked": "This poll is protected with a password",
     "enter": "Enter the password to participate in this poll.",
-    "placeholder": "Enter password",
-    "placeholderEnter": "enter",
-    "placeholderChange": "change",
     "enterPassword": "Enter password",
     "changePassword": "Change password",
     "invalid": "The entered password is invalid.",

diff --git a/src/locales/platt.json b/src/locales/platt.json
@@ -14,7 +14,8 @@
     "security": "Sekerheit",
     "networking": "Wessel",
     "slogan": "Stell Umfragen un kaam mit dien Lüüd op en Nömer!",
-    "testEnvironmentBanner": "Dat is de Testwelt vun {{value}}. Bitte bruukt keen persönlichen Daten."
+    "testEnvironmentBanner": "Dat is de Testwelt vun {{value}}. Bitte bruukt keen persönlichen Daten.",
+    "placeholder": "..."
   },
   "header": {
     "navLabel": "Hauptmenü",
@@ -190,9 +191,6 @@
     "minimum": "(8 Teken, en Tall, en Grootbookstack, en Sünnerteken)",
     "locked": "Disse Umfraag is passlich schuulsch.",
     "enter": "Bitte geef dat Dir inbrocht Passwoort in, üm de Umfraag antern köönt.",
-    "placeholder": "Kennwoord ingeven",
-    "placeholderEnter": "ingeven",
-    "placeholderChange": "ännern",
     "enterPassword": "Kennwoord ingeven",
     "changePassword": "Kennwoord ännern",
     "invalid": "Dat inföhrt Kennwoord is ungültig.",