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(atomic): made facet values focus when pressing show more/show less #2043

Merged
merged 7 commits into from
Jun 6, 2022
Merged

fix(atomic): made facet values focus when pressing show more/show less #2043

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
25ffc96
swapped showMoreFocus and showLessFocus
btaillon-coveo May 27, 2022
83ab776
improved atomic-facet
btaillon-coveo May 27, 2022
2815aab
Merge branch 'master' of https://github.com/coveo/ui-kit into KIT-1680
btaillon-coveo May 27, 2022
e15d637
focus first value
btaillon-coveo May 31, 2022
cff55ff
added e2e tests
btaillon-coveo Jun 2, 2022
40904ad
Merge branch 'master' of https://github.com/coveo/ui-kit into KIT-1680
btaillon-coveo Jun 3, 2022
f706092
Merge branch 'master' of https://github.com/coveo/ui-kit into KIT-1680
btaillon-coveo Jun 6, 2022
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
26 changes: 13 additions & 13 deletions packages/atomic/src/components/facets/atomic-category-facet/atomic-category-facet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,10 +192,7 @@ export class AtomicCategoryFacet
@MapProp() @Prop() public dependsOn: Record<string, string> = {};

@FocusTarget()
private showMoreFocus!: FocusTargetController;

@FocusTarget()
private showLessFocus!: FocusTargetController;
private showMoreLessFocus!: FocusTargetController;

@FocusTarget()
private headerFocus!: FocusTargetController;
Expand Down Expand Up @@ -422,7 +419,10 @@ export class AtomicCategoryFacet
);
}

private renderValue(facetValue: CategoryFacetValue) {
private renderValue(
facetValue: CategoryFacetValue,
isShowMoreLessFocusTarget: boolean
) {
const displayValue = getFieldValueCaption(
this.field,
facetValue.value,
Expand All @@ -440,6 +440,9 @@ export class AtomicCategoryFacet
this.facet.toggleSelect(facetValue);
}}
searchQuery={this.facetState.facetSearch.query}
buttonRef={(element) =>
isShowMoreLessFocusTarget && this.showMoreLessFocus.setTarget(element)
}
>
<FacetValueLabelHighlight
displayValue={displayValue}
Expand All @@ -456,7 +459,9 @@ export class AtomicCategoryFacet

return (
<ul part="values" class={this.hasParents ? 'pl-9' : 'mt-3'}>
{this.facetState.values.map((value) => this.renderValue(value))}
{this.facetState.values.map((value, i) =>
this.renderValue(value, i === 0)
)}
</ul>
);
}
Expand Down Expand Up @@ -492,26 +497,21 @@ export class AtomicCategoryFacet
}

private renderShowMoreLess() {
if (this.facetState.canShowMoreValues) {
this.showLessFocus.disableForCurrentSearch();
}
return (
<div class={this.hasParents ? 'pl-9' : ''}>
<FacetShowMoreLess
label={this.label}
i18n={this.bindings.i18n}
onShowMore={() => {
this.showLessFocus.focusAfterSearch();
this.showMoreLessFocus.focusAfterSearch();
this.facet.showMoreValues();
}}
onShowLess={() => {
this.showMoreFocus.focusAfterSearch();
this.showMoreLessFocus.focusAfterSearch();
this.facet.showLessValues();
}}
canShowLessValues={this.facetState.canShowLessValues}
canShowMoreValues={this.facetState.canShowMoreValues}
showMoreRef={this.showMoreFocus.setTarget}
showLessRef={this.showLessFocus.setTarget}
></FacetShowMoreLess>
</div>
);
Expand Down
37 changes: 21 additions & 16 deletions packages/atomic/src/components/facets/atomic-color-facet/atomic-color-facet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,10 +178,7 @@ export class AtomicColorFacet
@MapProp() @Prop() public dependsOn: Record<string, string> = {};

@FocusTarget()
private showMoreFocus!: FocusTargetController;

@FocusTarget()
private showLessFocus!: FocusTargetController;
private showMoreLessFocus!: FocusTargetController;

@FocusTarget()
private headerFocus!: FocusTargetController;
Expand Down Expand Up @@ -295,7 +292,11 @@ export class AtomicColorFacet
);
}

private renderValue(facetValue: FacetValue, onClick: () => void) {
private renderValue(
facetValue: FacetValue,
onClick: () => void,
isShowMoreLessFocusTarget: boolean
) {
const displayValue = getFieldValueCaption(
this.facetId!,
facetValue.value,
Expand All @@ -314,6 +315,10 @@ export class AtomicColorFacet
i18n={this.bindings.i18n}
onClick={onClick}
searchQuery={this.facetState.facetSearch.query}
buttonRef={(element) =>
isShowMoreLessFocusTarget &&
this.showMoreLessFocus.setTarget(element)
}
>
<FacetValueLabelHighlight
displayValue={displayValue}
Expand All @@ -331,6 +336,10 @@ export class AtomicColorFacet
i18n={this.bindings.i18n}
onClick={onClick}
searchQuery={this.facetState.facetSearch.query}
buttonRef={(element) =>
isShowMoreLessFocusTarget &&
this.showMoreLessFocus.setTarget(element)
}
>
<div
part={`value-${partValueWithDisplayValue} value-${partValueWithAPIValue} default-color-value`}
Expand Down Expand Up @@ -365,22 +374,23 @@ export class AtomicColorFacet

private renderValues() {
return this.renderValuesContainer(
this.facetState.values.map((value) =>
this.renderValue(value, () => this.facet.toggleSelect(value))
this.facetState.values.map((value, i) =>
this.renderValue(value, () => this.facet.toggleSelect(value), i === 0)
)
);
}

private renderSearchResults() {
return this.renderValuesContainer(
this.facetState.facetSearch.values.map((value) =>
this.facetState.facetSearch.values.map((value, i) =>
this.renderValue(
{
state: 'idle',
numberOfResults: value.count,
value: value.rawValue,
},
() => this.facet.facetSearch.select(value)
() => this.facet.facetSearch.select(value),
i === 0
)
),
this.facetState.facetSearch.query
Expand All @@ -399,25 +409,20 @@ export class AtomicColorFacet
}

private renderShowMoreLess() {
if (this.facetState.canShowMoreValues) {
this.showLessFocus.disableForCurrentSearch();
}
return (
<FacetShowMoreLess
label={this.label}
i18n={this.bindings.i18n}
onShowMore={() => {
this.showLessFocus.focusAfterSearch();
this.showMoreLessFocus.focusAfterSearch();
this.facet.showMoreValues();
}}
onShowLess={() => {
this.showMoreFocus.focusAfterSearch();
this.showMoreLessFocus.focusAfterSearch();
this.facet.showLessValues();
}}
canShowLessValues={this.facetState.canShowLessValues}
canShowMoreValues={this.facetState.canShowMoreValues}
showMoreRef={this.showMoreFocus.setTarget}
showLessRef={this.showLessFocus.setTarget}
></FacetShowMoreLess>
);
}
Expand Down
48 changes: 30 additions & 18 deletions packages/atomic/src/components/facets/atomic-facet/atomic-facet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,10 +179,7 @@ export class AtomicFacet implements InitializableComponent, BaseFacet<Facet> {
@MapProp() @Prop() public dependsOn: Record<string, string> = {};

@FocusTarget()
private showMoreFocus!: FocusTargetController;

@FocusTarget()
private showLessFocus!: FocusTargetController;
private showMoreLessFocus!: FocusTargetController;

@FocusTarget()
private headerFocus!: FocusTargetController;
Expand Down Expand Up @@ -303,7 +300,11 @@ export class AtomicFacet implements InitializableComponent, BaseFacet<Facet> {
);
}

private renderValue(facetValue: FacetValue, onClick: () => void) {
private renderValue(
facetValue: FacetValue,
onClick: () => void,
isShowMoreLessFocusTarget: boolean
) {
const displayValue = getFieldValueCaption(
this.field,
facetValue.value,
Expand All @@ -320,6 +321,10 @@ export class AtomicFacet implements InitializableComponent, BaseFacet<Facet> {
i18n={this.bindings.i18n}
onClick={onClick}
searchQuery={this.facetState.facetSearch.query}
buttonRef={(element) =>
isShowMoreLessFocusTarget &&
this.showMoreLessFocus.setTarget(element)
}
>
<FacetValueLabelHighlight
displayValue={displayValue}
Expand All @@ -337,6 +342,10 @@ export class AtomicFacet implements InitializableComponent, BaseFacet<Facet> {
i18n={this.bindings.i18n}
onClick={onClick}
searchQuery={this.facetState.facetSearch.query}
buttonRef={(element) =>
isShowMoreLessFocusTarget &&
this.showMoreLessFocus.setTarget(element)
}
>
<FacetValueLabelHighlight
displayValue={displayValue}
Expand All @@ -354,6 +363,10 @@ export class AtomicFacet implements InitializableComponent, BaseFacet<Facet> {
i18n={this.bindings.i18n}
onClick={onClick}
searchQuery={this.facetState.facetSearch.query}
buttonRef={(element) =>
isShowMoreLessFocusTarget &&
this.showMoreLessFocus.setTarget(element)
}
>
<FacetValueLabelHighlight
displayValue={displayValue}
Expand Down Expand Up @@ -384,11 +397,14 @@ export class AtomicFacet implements InitializableComponent, BaseFacet<Facet> {

private renderValues() {
return this.renderValuesContainer(
this.facetState.values.map((value) =>
this.renderValue(value, () =>
this.displayValuesAs === 'link'
? this.facet.toggleSingleSelect(value)
: this.facet.toggleSelect(value)
this.facetState.values.map((value, i) =>
this.renderValue(
value,
() =>
this.displayValuesAs === 'link'
? this.facet.toggleSingleSelect(value)
: this.facet.toggleSelect(value),
i === 0
)
)
);
Expand All @@ -406,7 +422,8 @@ export class AtomicFacet implements InitializableComponent, BaseFacet<Facet> {
() =>
this.displayValuesAs === 'link'
? this.facet.facetSearch.singleSelect(value)
: this.facet.facetSearch.select(value)
: this.facet.facetSearch.select(value),
false
)
),
this.facetState.facetSearch.query
Expand All @@ -425,25 +442,20 @@ export class AtomicFacet implements InitializableComponent, BaseFacet<Facet> {
}

private renderShowMoreLess() {
if (this.facetState.canShowMoreValues) {
this.showLessFocus.disableForCurrentSearch();
}
return (
<FacetShowMoreLess
label={this.label}
i18n={this.bindings.i18n}
onShowMore={() => {
this.showLessFocus.focusAfterSearch();
this.showMoreLessFocus.focusAfterSearch();
this.facet.showMoreValues();
}}
onShowLess={() => {
this.showMoreFocus.focusAfterSearch();
this.showMoreLessFocus.focusAfterSearch();
this.facet.showLessValues();
}}
canShowMoreValues={this.facetState.canShowMoreValues}
canShowLessValues={this.facetState.canShowLessValues}
showMoreRef={this.showMoreFocus.setTarget}
showLessRef={this.showLessFocus.setTarget}
></FacetShowMoreLess>
);
}
Expand Down
1 change: 1 addition & 0 deletions packages/atomic/src/components/facets/facet-value-box/facet-value-box.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export const FacetValueBox: FunctionalComponent<FacetValueProps> = (
}`}
ariaPressed={props.isSelected.toString()}
ariaLabel={ariaLabel}
ref={props.buttonRef}
>
{children}
<span
Expand Down
1 change: 1 addition & 0 deletions packages/atomic/src/components/facets/facet-value-checkbox/facet-value-checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export const FacetValueCheckbox: FunctionalComponent<FacetValueProps> = (
: 'border border-neutral-dark'
}`}
aria-label={ariaLabel}
ref={props.buttonRef}
>
<atomic-icon
class={`w-3/5 svg-checkbox ${props.isSelected ? 'block' : 'hidden'}`}
Expand Down