[AAE-36983] Updated translation keys in search-text-input.component.html (#11083)

This commit is contained in:
Alex Molodyh
2025-07-30 15:00:12 -07:00
committed by GitHub
parent bf7f7ebf9f
commit 8978e24c79
3 changed files with 53 additions and 6 deletions

View File

@@ -292,7 +292,19 @@
},
"SEARCH": {
"TOGGLE_ASC_DESC_ORDER": "Toggle results between ascending and descending order",
"SORT_BY": "Sort by"
"SORT_BY": "Sort by",
"BUTTON": {
"TOOLTIP": "Search",
"ARIA-LABEL": "Search button"
},
"INPUT": {
"ARIA-LABEL": "Search input"
},
"FILTER": {
"BUTTONS": {
"CLOSE": "Close"
}
}
},
"FEATURE-FLAGS": {
"OVERRIDES": "Feature flag overrides",

View File

@@ -7,16 +7,16 @@
id="adf-search-button"
class="adf-search-button"
[ngClass]="{'adf-search-button-inactive': subscriptAnimationState.value === 'inactive'}"
[title]="'SEARCH.BUTTON.TOOLTIP' | translate"
[title]="'CORE.SEARCH.BUTTON.TOOLTIP' | translate"
(click)="toggleSearchBar()"
(keyup.enter)="toggleSearchBar()">
<mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
<mat-icon [attr.aria-label]="'CORE.SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
</button>
<mat-form-field class="adf-input-form-field-divider" [hintLabel]="hintLabel">
<mat-label *ngIf='label'>{{label}}</mat-label>
<input matInput
#searchInput
[attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"
[attr.aria-label]="'CORE.SEARCH.INPUT.ARIA-LABEL' | translate"
[attr.type]="inputType"
[autocomplete]="getAutoComplete()"
id="adf-control-input"
@@ -34,7 +34,7 @@
matSuffix
data-automation-id="adf-clear-search-button"
class="adf-clear-search-button"
[title]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate"
[title]="'CORE.SEARCH.FILTER.BUTTONS.CLOSE' | translate"
(click)="resetSearch()"
(keyup.enter)="resetSearch()">
<mat-icon>close</mat-icon>

View File

@@ -21,6 +21,8 @@ import { DebugElement } from '@angular/core';
import { Subject } from 'rxjs';
import { UserPreferencesService } from '../common/services/user-preferences.service';
import { UnitTestingUtils } from '../testing/unit-testing-utils';
import { NoopTranslateModule } from '../testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
describe('SearchTextInputComponent', () => {
let fixture: ComponentFixture<SearchTextInputComponent>;
@@ -31,7 +33,7 @@ describe('SearchTextInputComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [SearchTextInputComponent]
imports: [NoopAnimationsModule, SearchTextInputComponent, NoopTranslateModule]
});
fixture = TestBed.createComponent(SearchTextInputComponent);
component = fixture.componentInstance;
@@ -356,4 +358,37 @@ describe('SearchTextInputComponent', () => {
});
});
});
describe('Translations', () => {
beforeEach(fakeAsync(() => {
component.expandable = true;
component.showClearButton = true;
fixture.detectChanges();
component.subscriptAnimationState.value = 'active';
fixture.detectChanges();
tick(200);
}));
it('should contain correct translation key for search button tooltip', () => {
const searchButton = testingUtils.getByCSS('#adf-search-button');
expect(searchButton.nativeElement.getAttribute('title')).toBe('CORE.SEARCH.BUTTON.TOOLTIP');
});
it('should contain correct translation key for search button aria-label', () => {
const searchButton = testingUtils.getByCSS('#adf-search-button');
// eslint-disable-next-line @alfresco/eslint-angular/no-angular-material-selectors
const searchIcon = searchButton.nativeElement.querySelector('mat-icon');
expect(searchIcon.getAttribute('aria-label')).toBe('CORE.SEARCH.BUTTON.ARIA-LABEL');
});
it('should contain correct translation key for search input aria-label', () => {
const searchInput = testingUtils.getByCSS('#adf-control-input');
expect(searchInput.nativeElement.getAttribute('aria-label')).toBe('CORE.SEARCH.INPUT.ARIA-LABEL');
});
it('should contain correct translation key for clear button title', () => {
const clearButton = testingUtils.getByDataAutomationId('adf-clear-search-button');
expect(clearButton.nativeElement.getAttribute('title')).toBe('CORE.SEARCH.FILTER.BUTTONS.CLOSE');
});
});
});