From 3305f4129c45c39869b07c7663b3b44ec6863ba7 Mon Sep 17 00:00:00 2001
From: rojansen <128360689+rojansen@users.noreply.github.com>
Date: Wed, 28 Aug 2024 16:23:18 +0200
Subject: [PATCH] 189 accessibility reachability per tab and screenreader
 (#191)

---
 package.json                                              | 2 +-
 .../xc-form-autocomplete.component.html                   | 6 ++++++
 xc/xc-form/xc-form-base/xc-form-baseinput.component.ts    | 8 +++-----
 xc/xc-form/xc-form-input/xc-form-input.component.html     | 3 +++
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 1551164..325cc01 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "zeta",
     "title": "Zeta",
-    "version": "17.0.5",
+    "version": "17.0.6",
     "private": true,
     "engines": {
         "node": "^18.13.0 || ^20.9.0"
diff --git a/xc/xc-form/xc-form-autocomplete/xc-form-autocomplete.component.html b/xc/xc-form/xc-form-autocomplete/xc-form-autocomplete.component.html
index db0a91d..67e91da 100644
--- a/xc/xc-form/xc-form-autocomplete/xc-form-autocomplete.component.html
+++ b/xc/xc-form/xc-form-autocomplete/xc-form-autocomplete.component.html
@@ -59,8 +59,14 @@
 
     <mat-icon
         matSuffix
+        aria-label="{{suffixContent}}"
+        tabindex="0"
         *ngIf="suffixVisible && !readonly"
         (mousedown)="suffixMouseDown($event)"
         (click)="suffixClick($event)"
+        (keydown.space)="suffixClick($event)"
+        [attr.alt]="suffixContent"
+        xc-tooltip="{{iconTooltip || (suffixContent | xcI18n)}}"
+        xc-i18n
     >{{suffixContent}}</mat-icon>
 </mat-form-field>
diff --git a/xc/xc-form/xc-form-base/xc-form-baseinput.component.ts b/xc/xc-form/xc-form-base/xc-form-baseinput.component.ts
index a24d513..9807170 100644
--- a/xc/xc-form/xc-form-base/xc-form-baseinput.component.ts
+++ b/xc/xc-form/xc-form-base/xc-form-baseinput.component.ts
@@ -99,22 +99,20 @@ export class XcFormBaseInputComponent extends XcFormBaseComponent {
     }
 
 
-    suffixClick(event: MouseEvent) {
+    suffixClick(event: MouseEvent | KeyboardEvent) {
         event.stopPropagation();
         if (!this.disabled && !this.readonly) {
             this.suffixToggled = !this.suffixToggled;
 
             if (this.suffix === 'clear') {
                 this.formControl.setValue('');
+                this.formControl.markAsDirty();
             } else if (this.suffix === 'nullify') {
                 this.formControl.setValue(null);
+                this.formControl.markAsDirty();
             } else if (this.suffix === 'password') {
                 this.type = this.suffixToggled ? 'text' : 'password';
             }
-            if (this.suffix === 'clear' || this.suffix === 'nullify') {
-                this.formControl.markAsDirty();
-                this.suffixClickChangedValue(this.suffixUnfocusedInput);
-            }
         }
         this.suffixUnfocusedInput = false;
     }
diff --git a/xc/xc-form/xc-form-input/xc-form-input.component.html b/xc/xc-form/xc-form-input/xc-form-input.component.html
index 5a133fa..39aa330 100644
--- a/xc/xc-form/xc-form-input/xc-form-input.component.html
+++ b/xc/xc-form/xc-form-input/xc-form-input.component.html
@@ -35,9 +35,12 @@
 
     <mat-icon
         matSuffix
+        aria-label="{{suffixContent}}"
+        tabindex="0"
         *ngIf="suffixVisible"
         (mousedown)="suffixMouseDown($event)"
         (click)="suffixClick($event)"
+        (keydown.space)="suffixClick($event)"
         [attr.alt]="suffixContent"
         xc-tooltip="{{iconTooltip || (suffixContent | xcI18n)}}"
         xc-i18n