Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix issue for classic facet search popup #1980

Merged
merged 2 commits into from
Jun 17, 2024
+12 −21
Merged

fix issue for classic facet search popup #1980

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dcc467e
fix issue for classic facet search popup
olamothe Jun 12, 2024
2a16930
Merge branch 'master' into JSUI-3519
louis-bompart Jun 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 7 additions & 9 deletions src/ui/Facet/FacetSearchElement.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export class FacetSearchElement {
this.clear.style.display = 'none';
this.search.appendChild(this.clear);

this.combobox = this.buildCombobox();
this.combobox = this.buildSearchInputWrapper();
this.search.appendChild(this.combobox);

this.input = this.buildInputElement();
Expand Down Expand Up @@ -116,11 +116,9 @@ export class FacetSearchElement {
this.searchDropdownNavigator = SearchDropdownNavigatorFactory(this.facetSearch, config);
}

private buildCombobox() {
private buildSearchInputWrapper() {
return $$('div', {
className: 'coveo-facet-search-middle',
ariaHaspopup: 'listbox',
ariaExpanded: 'true'
className: 'coveo-facet-search-middle'
}).el;
}

Expand Down Expand Up @@ -315,8 +313,8 @@ export class FacetSearchElement {
return;
}

this.combobox.setAttribute('role', 'combobox');
this.combobox.setAttribute('aria-owns', this.facetSearchId);
this.input.setAttribute('role', 'combobox');
this.input.setAttribute('aria-owns', this.facetSearchId);
this.input.setAttribute('aria-controls', this.facetSearchId);
this.input.setAttribute('aria-expanded', 'true');
this.facetSearch.setExpandedFacetSearchAccessibilityAttributes(this.searchResults);
Expand All @@ -327,8 +325,8 @@ export class FacetSearchElement {
return;
}

this.combobox.removeAttribute('role');
this.combobox.removeAttribute('aria-owns');
this.input.removeAttribute('role');
this.input.removeAttribute('aria-owns');
this.input.removeAttribute('aria-controls');
this.input.removeAttribute('aria-activedescendant');
this.input.setAttribute('aria-expanded', 'false');
Expand Down
2 changes: 0 additions & 2 deletions src/ui/Facet/FacetSearchValuesList.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,6 @@ export class FacetSearchValuesList {
});
return _.map(valuesToBuildWith, facetValue => {
const valueElement = new this.facetValueElementKlass(this.facet, facetValue, this.facet.keepDisplayedValuesNextTime).build();
valueElement.renderer.excludeIcon.setAttribute('aria-hidden', 'true');
valueElement.renderer.label.setAttribute('aria-hidden', 'true');
return valueElement.renderer.listItem;
});
}
Expand Down
2 changes: 1 addition & 1 deletion src/ui/Facet/ValueElementRenderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ export class ValueElementRenderer {
}

private initAndAppendLabel() {
this.label = $$('label', { className: 'coveo-facet-value-label', role: 'group' }).el;
this.label = $$('label', { className: 'coveo-facet-value-label' }).el;
this.tryToInitAndAppendComputedField();
this.initAndAppendFacetValueLabelWrapper();
this.listItem.appendChild(this.label);
Expand Down
8 changes: 4 additions & 4 deletions unitTests/ui/FacetSearchTest.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,12 +97,12 @@ export function FacetSearchTest() {
expect(setExpandedFacetSearchAccessibilityAttributes).toHaveBeenCalledWith(facetSearch.facetSearchElement['searchResults']);
});

it('should give the "combobox" role to the combobox', () => {
expect(facetSearch.facetSearchElement.combobox.getAttribute('role')).toEqual('combobox');
it('should give the "combobox" role to the input', () => {
expect(facetSearch.facetSearchElement.input.getAttribute('role')).toEqual('combobox');
});

it('should give the combobox the aria-owns attribute', () => {
expect(facetSearch.facetSearchElement.combobox.getAttribute('aria-owns')).toEqual(facetSearchId);
it('should give the input the aria-owns attribute', () => {
expect(facetSearch.facetSearchElement.input.getAttribute('aria-owns')).toEqual(facetSearchId);
});

it('should give the input the aria-controls attribute', () => {
Expand Down
5 changes: 0 additions & 5 deletions unitTests/ui/ValueElementRendererTest.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,6 @@ export function ValueElementRendererTest() {
expect(valueRenderer.build().listItem.getAttribute('data-value')).toBe('foo');
});

it('should give the label the "group" role to avoid overriding child labels', () => {
valueRenderer = new ValueElementRenderer(facet, FacetValue.createFromFieldValue(FakeResults.createFakeFieldValue('foo', 1234)));
expect(valueRenderer.build().label.getAttribute('role')).toEqual('group');
});

it('should add a hover class for the list element', () => {
valueRenderer = new ValueElementRenderer(facet, FacetValue.createFromFieldValue(FakeResults.createFakeFieldValue('foo', 1234)));
expect($$(valueRenderer.build().listItem).hasClass('coveo-with-hover')).toBe(true);
Expand Down
Loading