[ACS-10264] Add aria-labelledby so that placeholder is announced only… (#12222)

* [ACS-10264] Add aria-labelledby so that placeholder is announced only once

* [ACS-10264] Add unit test

* [ACS-10264] CR fixes

lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.html

@@ -1,9 +1,9 @@
 <div class="adf-search-logical-filter-container">
     <div *ngFor="let field of fields" class="adf-search-input">
-        <mat-label data-automation-id="adf-search-input-label">{{('SEARCH.LOGICAL_SEARCH.' + field + '_LABEL') | translate}}</mat-label>
+        <mat-label [id]="`adf-search-input-label-${field}`" data-automation-id="adf-search-input-label">{{('SEARCH.LOGICAL_SEARCH.' + field + '_LABEL') | translate}}</mat-label>
         <input type="text"
             [(ngModel)]="searchCondition[LogicalSearchFields[field]]"
             placeholder="{{ ('SEARCH.LOGICAL_SEARCH.' + field + '_HINT') | translate }}"
-            [attr.aria-label]="('SEARCH.LOGICAL_SEARCH.' + field + '_HINT') | translate"/>
+            [attr.aria-labelledby]="`adf-search-input-label-${field}`"/>
     </div>
 </div>

lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.spec.ts

@@ -19,10 +19,12 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { LogicalSearchCondition, LogicalSearchFields, SearchLogicalFilterComponent } from './search-logical-filter.component';
 import { ReplaySubject } from 'rxjs';
+import { UnitTestingUtils } from '@alfresco/adf-core';
 
 describe('SearchLogicalFilterComponent', () => {
     let component: SearchLogicalFilterComponent;
     let fixture: ComponentFixture<SearchLogicalFilterComponent>;
+    let unitTestingUtils: UnitTestingUtils;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
@@ -41,6 +43,7 @@ describe('SearchLogicalFilterComponent', () => {
             execute: jasmine.createSpy('execute')
         } as any;
         component.settings = { field: 'field1,field2', allowUpdateOnChange: true, hideDefaultAction: false };
+        unitTestingUtils = new UnitTestingUtils(fixture.debugElement);
         fixture.detectChanges();
     });
 
@@ -204,4 +207,17 @@ describe('SearchLogicalFilterComponent', () => {
         expect(component.searchCondition).toEqual({ matchAll: 'test', matchAny: 'test2', matchExact: '', exclude: '' });
         expect(component.context.filterLoaded.next).toHaveBeenCalled();
     });
+
+    describe('Accessibility', () => {
+        it('should use aria-labelledby attribute for input fields', () => {
+            const inputs = getInputs();
+            const fieldset = unitTestingUtils.getAllByDataAutomationId('adf-search-input-label');
+
+            inputs.forEach((input, index) => {
+                const fieldsetId = fieldset[index].nativeElement.getAttribute('id');
+                expect(input.getAttribute('aria-labelledby')).toBe(fieldsetId);
+                expect(input.hasAttribute('aria-label')).toBe(false);
+            });
+        });
+    });
 });