From f6d48cb85c6f06daa538c2f7d14a7e95d68b587f Mon Sep 17 00:00:00 2001
From: Mykyta Maliarchuk <84377976+nikita-web-ua@users.noreply.github.com>
Date: Tue, 10 Oct 2023 14:46:09 +0200
Subject: [PATCH] [ACS-5348] Fixed accessibility issues for the Date facet
 (#8982)

* [ACS-5348] fixed accessibility issues

* [ACS-5348] removed .mat customizations
---
 lib/content-services/src/lib/i18n/en.json     |  3 ++
 .../search-date-range-advanced.component.html | 15 +++---
 .../search-date-range-advanced.component.scss | 53 ++++++-------------
 3 files changed, 27 insertions(+), 44 deletions(-)

diff --git a/lib/content-services/src/lib/i18n/en.json b/lib/content-services/src/lib/i18n/en.json
index 7b10cb8cf7..2d6e5b5bd6 100644
--- a/lib/content-services/src/lib/i18n/en.json
+++ b/lib/content-services/src/lib/i18n/en.json
@@ -450,6 +450,9 @@
           "REQUIRED": "End Date required",
           "INVALID_FORMAT": "End Date invalid"
         }
+      },
+      "ARIA_LABEL": {
+        "NUMBER_INPUT": "Number input"
       }
     },
     "SEARCH_PROPERTIES": {
diff --git a/lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.component.html b/lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.component.html
index d30351fbfe..55ff6bee57 100644
--- a/lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.component.html
+++ b/lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.component.html
@@ -1,16 +1,19 @@
-<ng-container [formGroup]="form">
+<div class="adf-search-date-range-container" [formGroup]="form">
   <mat-radio-group formControlName="dateRangeType">
-    <span class="adf-search-date-range-horizontal-container">
+    <span class="adf-search-date-range-container-row">
       <mat-radio-button [value]="DateRangeType.ANY" data-automation-id="date-range-advanced-anytime">
         {{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.ANYTIME' | translate }}
       </mat-radio-button>
     </span>
-    <span class="adf-search-date-range-horizontal-container">
+    <span class="adf-search-date-range-container-row">
       <mat-radio-button [value]="DateRangeType.IN_LAST" data-automation-id="date-range-advanced-in-last">
         {{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.IN_LAST' | translate }}
       </mat-radio-button>
       <mat-form-field class="adf-search-date-range-form-field adf-search-date-range-input-field">
-        <input matInput type="number" min="1" formControlName="inLastValue" data-automation-id="date-range-advanced-in-last-input" (input)="narrowDownAllowedCharacters($event)" (keydown)="preventIncorrectNumberCharacters($event)">
+        <input matInput [attr.aria-label]="'SEARCH.DATE_RANGE_ADVANCED.ARIA_LABEL.NUMBER_INPUT' | translate"
+               type="number" min="1" formControlName="inLastValue"
+               data-automation-id="date-range-advanced-in-last-input" (input)="narrowDownAllowedCharacters($event)"
+               (keydown)="preventIncorrectNumberCharacters($event)">
         <mat-error *ngIf="form.controls.inLastValue.errors?.required">{{ 'SEARCH.DATE_RANGE_ADVANCED.ERROR.IN_LAST' | translate }}</mat-error>
       </mat-form-field>
       <mat-form-field class="adf-search-date-range-form-field">
@@ -21,7 +24,7 @@
         </mat-select>
       </mat-form-field>
     </span>
-    <span class="adf-search-date-range-horizontal-container">
+    <span class="adf-search-date-range-container-row">
       <mat-radio-button [value]="DateRangeType.BETWEEN" data-automation-id="date-range-advanced-between">
         {{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.BETWEEN' | translate }}
       </mat-radio-button>
@@ -42,4 +45,4 @@
       </mat-form-field>
     </span>
   </mat-radio-group>
-</ng-container>
+</div>
diff --git a/lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.component.scss b/lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.component.scss
index a24ad08732..cc2c68873b 100644
--- a/lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.component.scss
+++ b/lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.component.scss
@@ -1,44 +1,21 @@
-.adf-search-date-range-advanced {
-    .mat-radio-group {
-        display: flex;
-        flex-direction: column;
-        padding: 5px;
-    }
+adf-search-date-range-advanced {
+    .adf-search-date-range-container {
+        margin-top: 20px;
+        padding: 10px;
 
-    .mat-radio-button {
-        margin: 5px;
-    }
+        &-row {
+            display: flex;
+            flex-direction: row;
+            padding-bottom: 15px;
+            align-items: center;
 
-    .adf-search-date-range-horizontal-container {
-        display: flex;
-        flex-direction: row;
-        padding-bottom: 15px;
+            .adf-search-date-range-input-field {
+                width: 75px;
+            }
 
-        .adf-search-date-range-input-field {
-            width: 75px;
-        }
-
-        .adf-search-date-range-form-field {
-            padding-left: 10px;
-            flex: 1;
-
-            .mat-form-field-wrapper {
-                padding-bottom: 0;
-                margin-bottom: 1.25em;
-                border: 1px solid var(--adf-theme-mat-grey-color-a400);
-                border-radius: 5px;
-
-                .mat-form-field-infix {
-                    border: 0;
-                }
-
-                .mat-form-field-underline {
-                    display: none;
-                }
-
-                .mat-form-field-subscript-wrapper {
-                    margin-top: 2em;
-                }
+            .adf-search-date-range-form-field {
+                padding-left: 10px;
+                flex: 1;
             }
         }
     }