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

Revert "[ACS-10518]: Search input keyboard navigation accessibility fixes (#11270)"

Browse Source 
This reverts commit 82b9b18891.
This commit is contained in:
Anton Ramanovich
2025-11-03 16:32:27 +01:00
parent 7f4fd3e2d4
commit 10039ff711
5 changed files with 37 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component-search.spec.ts
+19 -38
View File
@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { Node, NodeEntry, NodePaging, RequestScope, ResultSetPaging, SiteEntry, SitePaging, SitePagingList } from '@alfresco/js-api';
@@ -30,7 +30,6 @@ import { SearchQueryBuilderService } from '../../search';
import { mockSearchRequest } from '../../mock/search-query.mock';
import { SitesService } from '../../common/services/sites.service';
import { NodesApiService } from '../../common/services/nodes-api.service';
import { UnitTestingUtils } from '../../../../../core/src/lib/testing/unit-testing-utils';
const fakeResultSetPaging: ResultSetPaging = {
list: {
@@ -61,18 +60,15 @@ describe('ContentNodeSelectorPanelComponent', () => {
const fakeNodeEntry = new Node({ id: 'fakeId' });
const nodeEntryEvent = new NodeEntryEvent(fakeNodeEntry);
let searchQueryBuilderService: SearchQueryBuilderService;
let testingUtils: UnitTestingUtils;
const typeToSearchBox = (searchTerm = 'string-to-search'): void => {
const searchInput = testingUtils.getByCSS('[data-automation-id="content-node-selector-search-input"]');
const typeToSearchBox = (searchTerm = 'string-to-search') => {
const searchInput = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-input"]'));
searchInput.nativeElement.value = searchTerm;
component.searchInput.setValue(searchTerm);
fixture.detectChanges();
};
const getSearchIcon = (type: string): DebugElement => testingUtils.getByCSS(`[data-automation-id="content-node-selector-search-${type}"]`);
const triggerSearchResults = (searchResults: ResultSetPaging): void => {
const triggerSearchResults = (searchResults: ResultSetPaging) => {
const service = fixture.debugElement.injector.get(SearchQueryBuilderService);
service.executed.next(searchResults);
};
@@ -96,8 +92,6 @@ describe('ContentNodeSelectorPanelComponent', () => {
searchQueryBuilderService = fixture.debugElement.injector.get(SearchQueryBuilderService);
searchQueryBuilderService.resetToDefaults();
testingUtils = new UnitTestingUtils(fixture.debugElement);
spyOn(nodeService, 'getNode').and.returnValue(
of(
new Node({
@@ -202,7 +196,7 @@ describe('ContentNodeSelectorPanelComponent', () => {
spyOn(component, 'clearSearch');
fixture.detectChanges();
const clearIcon = getSearchIcon('clear');
const clearIcon = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-clear"]'));
clearIcon.nativeElement.click();
fixture.detectChanges();
@@ -363,8 +357,8 @@ describe('ContentNodeSelectorPanelComponent', () => {
fixture.detectChanges();
tick(debounceSearch);
const searchIcon = getSearchIcon('icon');
const clearIcon = getSearchIcon('clear');
const searchIcon = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-icon"]'));
const clearIcon = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-clear"]'));
expect(searchIcon).not.toBeNull();
expect(clearIcon).toBeNull();
@@ -377,26 +371,13 @@ describe('ContentNodeSelectorPanelComponent', () => {
fixture.detectChanges();
const searchIcon = getSearchIcon('icon');
const clearIcon = getSearchIcon('clear');
const searchIcon = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-icon"]'));
const clearIcon = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-clear"]'));
expect(searchIcon).toBeNull();
expect(clearIcon).not.toBeNull();
}));
it('should call clear method on the X (clear) button click', fakeAsync(() => {
fixture.detectChanges();
typeToSearchBox('123');
tick(debounceSearch);
fixture.detectChanges();
spyOn(component, 'clear');
const clearButton = getSearchIcon('clear');
clearButton.nativeElement.click();
expect(component.clear).toHaveBeenCalled();
}));
it('should clear the search field, nodes and chosenNode when clicking on the X (clear) icon', async () => {
component.chosenNode = [entry];
@@ -572,7 +553,7 @@ describe('ContentNodeSelectorPanelComponent', () => {
}));
it('should show the current folder content instead of search results if search was not performed', async () => {
const documentList = testingUtils.getByDirective(DocumentListComponent);
const documentList = fixture.debugElement.query(By.directive(DocumentListComponent));
expect(documentList).not.toBeNull();
expect(documentList.componentInstance.currentFolderId).toBe('cat-girl-nuku-nuku');
});
@@ -584,7 +565,7 @@ describe('ContentNodeSelectorPanelComponent', () => {
fixture.detectChanges();
const documentList = testingUtils.getByDirective(DocumentListComponent);
const documentList = fixture.debugElement.query(By.directive(DocumentListComponent));
expect(documentList).not.toBeNull();
expect(
documentList.componentInstance.rowFilter({
@@ -612,7 +593,7 @@ describe('ContentNodeSelectorPanelComponent', () => {
fixture.detectChanges();
const documentList = testingUtils.getByDirective(DocumentListComponent);
const documentList = fixture.debugElement.query(By.directive(DocumentListComponent));
expect(documentList).not.toBeNull();
expect(documentList.componentInstance.rowFilter).toBeTruthy();
@@ -626,7 +607,7 @@ describe('ContentNodeSelectorPanelComponent', () => {
fixture.detectChanges();
const documentList = testingUtils.getByDirective(DocumentListComponent);
const documentList = fixture.debugElement.query(By.directive(DocumentListComponent));
expect(documentList).not.toBeNull();
expect(documentList.componentInstance.imageResolver).toBe(resolver);
});
@@ -638,7 +619,7 @@ describe('ContentNodeSelectorPanelComponent', () => {
triggerSearchResults(fakeResultSetPaging);
fixture.detectChanges();
const documentList = testingUtils.getByCSS('[data-automation-id="content-node-selector-document-list"]');
const documentList = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-document-list"]'));
expect(documentList).not.toBeNull();
expect(component.hasValidQuery).toEqual(true);
expect(documentList.componentInstance.currentFolderId).toBeNull();
@@ -683,12 +664,12 @@ describe('ContentNodeSelectorPanelComponent', () => {
fixture.detectChanges();
fixture.whenStable().then(() => {
const clearButton = getSearchIcon('clear');
const clearButton = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-search-clear"]'));
expect(clearButton).not.toBeNull();
clearButton.triggerEventHandler('click', {});
fixture.detectChanges();
const documentList = testingUtils.getByCSS('[data-automation-id="content-node-selector-document-list"]');
const documentList = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-document-list"]'));
expect(documentList).not.toBeNull();
expect(documentList.componentInstance.currentFolderId).toBe('cat-girl-nuku-nuku');
done();
@@ -715,13 +696,13 @@ describe('ContentNodeSelectorPanelComponent', () => {
component.siteChanged({ entry: { guid: 'Kame-Sennin Muten Roshi' } } as SiteEntry);
fixture.detectChanges();
let documentList = testingUtils.getByCSS('[data-automation-id="content-node-selector-document-list"]');
let documentList = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-document-list"]'));
expect(documentList.componentInstance.currentFolderId).toBe('Kame-Sennin Muten Roshi');
component.siteChanged({ entry: { guid: undefined } } as SiteEntry);
fixture.detectChanges();
documentList = testingUtils.getByCSS('[data-automation-id="content-node-selector-document-list"]');
documentList = fixture.debugElement.query(By.css('[data-automation-id="content-node-selector-document-list"]'));
expect(documentList.componentInstance.currentFolderId).toBe('cat-girl-nuku-nuku');
done();
@@ -730,7 +711,7 @@ describe('ContentNodeSelectorPanelComponent', () => {
describe('Pagination "Load more" button', () => {
it('should NOT be shown by default', () => {
fixture.detectChanges();
const pagination = testingUtils.getByCSS('[data-automation-id="adf-infinite-pagination-button"]');
const pagination = fixture.debugElement.query(By.css('[data-automation-id="adf-infinite-pagination-button"]'));
expect(pagination).toBeNull();
});
lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.html
+8 -16
View File
@@ -13,26 +13,18 @@
adf-auto-focus
data-automation-id="content-node-selector-search-input">
<button
matSuffix
mat-icon-button
*ngIf="searchTerm.length > 0"
data-automation-id="content-node-selector-search-clear"
class="adf-content-node-selector-search-clear-button"
(click)="clear()"
[attr.aria-label]="'COMMON.CLEAR' | translate"
[attr.title]="'COMMON.CLEAR' | translate"
>
<mat-icon class="adf-content-node-selector-content-input-icon">clear</mat-icon>
</button>
<mat-icon *ngIf="searchTerm.length > 0"
matSuffix (click)="clear()"
class="adf-content-node-selector-content-input-icon"
data-automation-id="content-node-selector-search-clear">clear
</mat-icon>
<mat-icon
*ngIf="searchTerm.length === 0"
<mat-icon *ngIf="searchTerm.length === 0"
matSuffix
class="adf-content-node-selector-content-input-icon"
data-automation-id="content-node-selector-search-icon"
>search
data-automation-id="content-node-selector-search-icon">search
</mat-icon>
</mat-form-field>
<adf-sites-dropdown
*ngIf="showDropdownSiteList"
lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.scss
+4 -17
View File
@@ -75,29 +75,16 @@ h2.adf-search-results-label {
width: 100%;
margin-bottom: 8px;
.adf-content-node-selector-content-input-icon:is(mat-icon) {
.adf-content-node-selector-content-input-icon {
color: var(--adf-theme-foreground-icon-color-054);
cursor: pointer;
padding: 0 0 8px;
width: 1em;
height: 1em;
font-size: 20px;
}
.adf-content-node-selector-search-clear-button {
padding: 0;
width: 20px;
height: 28px;
&:focus {
outline-offset: -1.5px;
}
.adf-content-node-selector-content-input-icon:is(mat-icon) {
cursor: pointer;
&:hover {
color: var(--adf-theme-foreground-base-color);
}
&:hover {
color: var(--adf-theme-foreground-base-color);
}
}
lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.html
+1 -2
View File
@@ -19,8 +19,7 @@
class="adf-permission-search-input-clear-button"
(click)="clearSearch()"
[attr.aria-label]="'COMMON.CLEAR' | translate"
[attr.title]="'COMMON.CLEAR' | translate"
>
[attr.title]="'COMMON.CLEAR' | translate">
<mat-icon class="adf-permission-search-icon">clear</mat-icon>
</button>
lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss
+5 -8
View File
@@ -80,6 +80,11 @@ $search-result-height: calc(100% - 60px);
width: 1em;
height: 1em;
font-size: 20px;
cursor: pointer;
&:hover {
color: var(--adf-theme-foreground-base-color);
}
}
.adf-permission-search-input-clear-button {
@@ -87,14 +92,6 @@ $search-result-height: calc(100% - 60px);
width: 20px;
height: 32px;
margin-right: 1.5px;
.adf-permission-search-icon:is(mat-icon) {
cursor: pointer;
&:hover {
color: var(--adf-theme-foreground-base-color);
}
}
}
}
}