Add labels to icon-only buttons

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'

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>
 

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>

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;
   }

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>

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) {}
 }

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>