inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-16 18:13:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

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

* [ACS-10264] Add unit test

* [ACS-10264] CR fixes
This commit is contained in:
Shivangi Shree
2026-09-15 17:46:55 +05:30
committed by GitHub
parent 62d7d9084d
commit 762eba8490
2 changed files with 18 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.html
+2 -2
View File
@@ -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
+16
View File
@@ -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);
});
});
});
});