From 14b11e50f409517bc5331b572e3e95f5a968c925 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20B=C3=A4dorf?= <b.baedorf@openproject.com>
Date: Thu, 3 Mar 2022 13:39:59 +0100
Subject: [PATCH] Add labels to icon-only buttons

---
 config/locales/js-en.yml                          |  6 ++++++
 .../project-include.component.html                |  2 +-
 .../drop-modal/drop-modal.component.html          |  2 +-
 .../components/drop-modal/drop-modal.component.ts |  7 +++++++
 .../filter-chip/filter-chip.component.html        | 13 +++++++++++--
 .../filter-chip/filter-chip.component.ts          | 15 +++++++++++++++
 frontend/src/app/spot/spot-docs.component.html    | 12 +++++++++++-
 7 files changed, 52 insertions(+), 5 deletions(-)

diff --git a/config/locales/js-en.yml b/config/locales/js-en.yml
index 2c7fa8998a..b2c36d39f7 100644
--- a/config/locales/js-en.yml
+++ b/config/locales/js-en.yml
@@ -1267,3 +1267,9 @@ en:
       load_error_message: 'There was an error loading the form'
       validation_error_message: 'Please fix the errors present in the form'
       advanced_settings: 'Advanced settings'
+    
+    spot:
+      filter_chip:
+        remove: 'Remove'
+      drop_modal:
+        Close: 'Close'
diff --git a/frontend/src/app/shared/components/project-include/project-include.component.html b/frontend/src/app/shared/components/project-include/project-include.component.html
index 91b108d3ff..6306721f01 100644
--- a/frontend/src/app/shared/components/project-include/project-include.component.html
+++ b/frontend/src/app/shared/components/project-include/project-include.component.html
@@ -41,7 +41,7 @@
       >
         <span
           slot="before"
-          class="op-icon icon-search"
+          class="spot-icon spot-icon_search"
         ></span>
       </spot-text-field>
 
diff --git a/frontend/src/app/spot/components/drop-modal/drop-modal.component.html b/frontend/src/app/spot/components/drop-modal/drop-modal.component.html
index 0cf769a450..4e6994f7bd 100644
--- a/frontend/src/app/spot/components/drop-modal/drop-modal.component.html
+++ b/frontend/src/app/spot/components/drop-modal/drop-modal.component.html
@@ -9,7 +9,7 @@
   <button
     class="spot-drop-modal--close-button spot-button"
     type="button"
-    aria-label="Close"
+    [attr.aria-label]="text.close"
     (click)="close()"
   >
     <span class="spot-icon spot-icon_close"></span>
diff --git a/frontend/src/app/spot/components/drop-modal/drop-modal.component.ts b/frontend/src/app/spot/components/drop-modal/drop-modal.component.ts
index 4b492a3a43..a52ebe24b8 100644
--- a/frontend/src/app/spot/components/drop-modal/drop-modal.component.ts
+++ b/frontend/src/app/spot/components/drop-modal/drop-modal.component.ts
@@ -7,6 +7,7 @@ import {
   OnDestroy,
 } from '@angular/core';
 import { KeyCodes } from 'core-app/shared/helpers/keyCodes.enum';
+import { I18nService } from 'core-app/core/i18n/i18n.service';
 
 enum SpotDropModalAlignmentOption {
   BottomCenter = 'bottom-center',
@@ -58,6 +59,12 @@ export class SpotDropModalComponent implements OnDestroy {
     return `spot-drop-modal--body_${this.alignment}`;
   }
 
+  public text = {
+    close: this.i18n.t('js.spot.drop_modal.close'),
+  };
+
+  constructor(readonly i18n:I18nService) {}
+
   close():void {
     this.open = false;
   }
diff --git a/frontend/src/app/spot/components/filter-chip/filter-chip.component.html b/frontend/src/app/spot/components/filter-chip/filter-chip.component.html
index 888b0f12a9..73e6c09a3f 100644
--- a/frontend/src/app/spot/components/filter-chip/filter-chip.component.html
+++ b/frontend/src/app/spot/components/filter-chip/filter-chip.component.html
@@ -3,5 +3,14 @@
   class="spot-filter-chip--remove"
   type="button"
   (click)="remove.emit()"
->x</button>
-<div class="spot-filter-chip--title">{{ title }}</div>
+  [attr.aria-label]="text.remove"
+>
+  <span class="spot-icon spot-icon_close"></span>
+</button>
+<div class="spot-filter-chip--title">
+  <span
+    *ngIf="icon"
+    [ngClass]="iconClasses"
+  ></span>
+  {{ title }}
+</div>
diff --git a/frontend/src/app/spot/components/filter-chip/filter-chip.component.ts b/frontend/src/app/spot/components/filter-chip/filter-chip.component.ts
index 4ab898ae89..528b7251da 100644
--- a/frontend/src/app/spot/components/filter-chip/filter-chip.component.ts
+++ b/frontend/src/app/spot/components/filter-chip/filter-chip.component.ts
@@ -5,6 +5,7 @@ import {
   Input,
   Output,
 } from '@angular/core';
+import { I18nService } from 'core-app/core/i18n/i18n.service';
 
 @Component({
   selector: 'spot-filter-chip',
@@ -16,6 +17,20 @@ export class SpotFilterChipComponent {
   @Input() removable = true;
 
   @Input() title = '';
+  @Input() icon = '';
 
   @Output() remove = new EventEmitter<void>();
+
+  public text = {
+    remove: this.i18n.t('js.spot.filter_chip.remove'),
+  };
+
+  public get iconClasses() {
+    return [
+      'spot-icon',
+      `spot-icon_${this.icon}`,
+    ]; 
+  }
+
+  constructor(readonly i18n:I18nService) {}
 }
diff --git a/frontend/src/app/spot/spot-docs.component.html b/frontend/src/app/spot/spot-docs.component.html
index 3f310e05d6..da5839270a 100644
--- a/frontend/src/app/spot/spot-docs.component.html
+++ b/frontend/src/app/spot/spot-docs.component.html
@@ -138,8 +138,18 @@ Currently selected value is {{ toggleValue }}
   (remove)="onRemoveChip()"
 ></spot-filter-chip>
 <spot-filter-chip
-  [removable]="false"
   title="Unremovable chip"
+  [removable]="false"
+></spot-filter-chip>
+<spot-filter-chip
+  title="Default chip with icon"
+  icon="bell"
+  (remove)="onRemoveChip()"
+></spot-filter-chip>
+<spot-filter-chip
+  icon="bell"
+  title="Unremovable chip with icon"
+  [removable]="false"
 ></spot-filter-chip>
 
 <h1>Text Field</h1>