props.setNewResultRef(element!, index)}
+ onClick={(event) => {
+ event.preventDefault();
+ interactiveResult.select();
+ window.open(
+ unfoldedResult.clickUri,
+ event.ctrlKey || event.metaKey
+ ? '_blank'
+ : props.gridCellLinkTarget,
+ 'noopener'
+ );
+ }}
>
= (
onCancelPendingSelect={() => interactiveResult.cancelPendingSelect()}
href={unfoldedResult.clickUri}
title={unfoldedResult.title}
- tabIndex={-1}
- ariaHidden={true}
- />
+ target={props.gridCellLinkTarget}
+ rel="noopener"
+ >
+ {unfoldedResult.title}
+
{props.renderResult({
key: props.getResultId(result),
result: result,
diff --git a/packages/atomic/src/components/common/result-list/result-list-common-interface.ts b/packages/atomic/src/components/common/result-list/result-list-common-interface.ts
index 806ea4427ef..4fd1617f19f 100644
--- a/packages/atomic/src/components/common/result-list/result-list-common-interface.ts
+++ b/packages/atomic/src/components/common/result-list/result-list-common-interface.ts
@@ -8,6 +8,7 @@ import {
ResultDisplayDensity,
ResultDisplayImageSize,
ResultDisplayLayout,
+ ResultTarget,
} from '../layout/display-options';
import {ResultTemplateProvider} from './result-template-provider';
@@ -25,6 +26,7 @@ export interface ResultListCommonProps<
loadingFlag: string;
resultTemplateProvider: ResultTemplateProvider;
nextNewResultTarget: FocusTargetController;
+ gridCellLinkTarget: ResultTarget;
getLayoutDisplay(): ResultDisplayLayout;
getResultDisplay(): ResultDisplayLayout;
getDensity(): ResultDisplayDensity;
diff --git a/packages/atomic/src/components/common/result-list/styles/mixins.pcss b/packages/atomic/src/components/common/result-list/styles/mixins.pcss
index 1d154c73a7a..00adfbe72d9 100644
--- a/packages/atomic/src/components/common/result-list/styles/mixins.pcss
+++ b/packages/atomic/src/components/common/result-list/styles/mixins.pcss
@@ -150,18 +150,27 @@
&:hover {
border: 1px solid var(--atomic-neutral);
box-shadow: 0px 10px 25px var(--atomic-neutral);
+ cursor: pointer;
}
}
}
}
- [part='result-list-grid-clickable'] {
- content: '';
+ [part='result-list-grid-clickable']:focus-visible {
+ border: 2px solid var(--atomic-primary);
+ border-radius: 2px;
+ color: var(--atomic-primary);
+ cursor: pointer;
+ display: inline-block;
+ text-decoration: underline;
+ text-align: center;
position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
+ }
+ [part='result-list-grid-clickable']:not(:focus) {
+ clip: rect(1px, 1px, 1px, 1px);
+ overflow: hidden;
+ position: absolute;
+ padding: 0;
}
}
diff --git a/packages/atomic/src/components/insight/result-lists/atomic-insight-folded-result-list/atomic-insight-folded-result-list.tsx b/packages/atomic/src/components/insight/result-lists/atomic-insight-folded-result-list/atomic-insight-folded-result-list.tsx
index 0211d9c8f46..ad0c6ca85f8 100644
--- a/packages/atomic/src/components/insight/result-lists/atomic-insight-folded-result-list/atomic-insight-folded-result-list.tsx
+++ b/packages/atomic/src/components/insight/result-lists/atomic-insight-folded-result-list/atomic-insight-folded-result-list.tsx
@@ -33,6 +33,7 @@ import {
ResultDisplayDensity,
ResultDisplayImageSize,
ResultDisplayLayout,
+ ResultTarget,
} from '../../../common/layout/display-options';
import {ResultListCommon} from '../../../common/result-list/result-list-common';
import {ResultRenderingFunction} from '../../../common/result-list/result-list-common-interface';
@@ -58,6 +59,7 @@ export class AtomicInsightFoldedResultList
private resultRenderingFunction: ResultRenderingFunction;
private loadingFlag = randomID('firstResultLoaded-');
private display: ResultDisplayLayout = 'list';
+ private gridCellLinkTarget: ResultTarget = '_self';
@Element() public host!: HTMLDivElement;
@@ -154,6 +156,7 @@ export class AtomicInsightFoldedResultList
getNumberOfPlaceholders: () => this.resultsPerPageState.numberOfResults,
host: this.host,
bindings: this.bindings,
+ gridCellLinkTarget: this.gridCellLinkTarget,
getDensity: () => this.density,
getResultDisplay: () => this.display,
getLayoutDisplay: () => this.display,
diff --git a/packages/atomic/src/components/insight/result-lists/atomic-insight-result-list/atomic-insight-result-list.tsx b/packages/atomic/src/components/insight/result-lists/atomic-insight-result-list/atomic-insight-result-list.tsx
index 1ae0f333ed5..3a0c07439e2 100644
--- a/packages/atomic/src/components/insight/result-lists/atomic-insight-result-list/atomic-insight-result-list.tsx
+++ b/packages/atomic/src/components/insight/result-lists/atomic-insight-result-list/atomic-insight-result-list.tsx
@@ -25,6 +25,7 @@ import {
ResultDisplayDensity,
ResultDisplayImageSize,
ResultDisplayLayout,
+ ResultTarget,
} from '../../../common/layout/display-options';
import {ResultListCommon} from '../../../common/result-list/result-list-common';
import {ResultRenderingFunction} from '../../../common/result-list/result-list-common-interface';
@@ -48,6 +49,7 @@ export class AtomicInsightResultList
private resultListCommon!: ResultListCommon;
private loadingFlag = randomID('firstInsightResultLoaded-');
private display: ResultDisplayLayout = 'list';
+ private gridCellLinkTarget: ResultTarget = '_self';
private resultRenderingFunction: ResultRenderingFunction;
@Element() public host!: HTMLDivElement;
@@ -72,7 +74,6 @@ export class AtomicInsightResultList
* The expected size of the image displayed in the results.
*/
@Prop({reflect: true}) imageSize: ResultDisplayImageSize = 'icon';
-
/**
* Sets a rendering function to bypass the standard HTML template mechanism for rendering results.
* You can use this function while working with web frameworks that don't use plain HTML syntax, e.g., React, Angular or Vue.
@@ -116,6 +117,7 @@ export class AtomicInsightResultList
getNumberOfPlaceholders: () => this.resultsPerPageState.numberOfResults,
host: this.host,
bindings: this.bindings,
+ gridCellLinkTarget: this.gridCellLinkTarget,
getDensity: () => this.density,
getResultDisplay: () => this.display,
getLayoutDisplay: () => this.display,
diff --git a/packages/atomic/src/components/recommendations/atomic-recs-list/atomic-recs-list.tsx b/packages/atomic/src/components/recommendations/atomic-recs-list/atomic-recs-list.tsx
index b232d84e60b..d2c99204a0f 100644
--- a/packages/atomic/src/components/recommendations/atomic-recs-list/atomic-recs-list.tsx
+++ b/packages/atomic/src/components/recommendations/atomic-recs-list/atomic-recs-list.tsx
@@ -32,6 +32,7 @@ import {
ResultDisplayDensity,
ResultDisplayImageSize,
ResultDisplayBasicLayout,
+ ResultTarget,
} from '../../common/layout/display-options';
import {ResultListCommon} from '../../common/result-list/result-list-common';
import {
@@ -90,6 +91,12 @@ export class AtomicRecsList implements InitializableComponent
{
* To modify the number of recommendations per column, modify the --atomic-recs-number-of-columns CSS variable.
*/
@Prop({reflect: true}) public display: ResultDisplayBasicLayout = 'list';
+ /**
+ * The target location to open the result link (see [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)).
+ * This property is only leveraged when `display` is `grid`.
+ * @defaultValue `_self`
+ */
+ @Prop() gridCellLinkTarget: ResultTarget = '_self';
/**
* The spacing of various elements in the result list, including the gap between results, the gap between parts of a result, and the font sizes of different parts in a result.
*/
@@ -190,6 +197,7 @@ export class AtomicRecsList implements InitializableComponent {
this.numberOfRecommendationsPerPage ?? this.numberOfRecommendations,
host: this.host,
bindings: this.bindings,
+ gridCellLinkTarget: this.gridCellLinkTarget,
getDensity: () => this.density,
getLayoutDisplay: () => 'grid',
getResultDisplay: () => this.display,
diff --git a/packages/atomic/src/components/search/result-lists/atomic-folded-result-list/atomic-folded-result-list.tsx b/packages/atomic/src/components/search/result-lists/atomic-folded-result-list/atomic-folded-result-list.tsx
index 29e2e97c980..2cc44b9c0b6 100644
--- a/packages/atomic/src/components/search/result-lists/atomic-folded-result-list/atomic-folded-result-list.tsx
+++ b/packages/atomic/src/components/search/result-lists/atomic-folded-result-list/atomic-folded-result-list.tsx
@@ -33,6 +33,7 @@ import {
ResultDisplayDensity,
ResultDisplayImageSize,
ResultDisplayLayout,
+ ResultTarget,
} from '../../../common/layout/display-options';
import {ResultListCommon} from '../../../common/result-list/result-list-common';
import {ResultRenderingFunction} from '../../../common/result-list/result-list-common-interface';
@@ -59,6 +60,7 @@ export class AtomicFoldedResultList implements InitializableComponent {
private resultRenderingFunction: ResultRenderingFunction;
private loadingFlag = randomID('firstResultLoaded-');
private display: ResultDisplayLayout = 'list';
+ private gridCellLinkTarget: ResultTarget = '_self';
@Element() public host!: HTMLDivElement;
@@ -161,6 +163,7 @@ export class AtomicFoldedResultList implements InitializableComponent {
getImageSize: () => this.imageSize,
nextNewResultTarget: this.nextNewResultTarget,
loadingFlag: this.loadingFlag,
+ gridCellLinkTarget: this.gridCellLinkTarget,
getResultListState: () => this.foldedResultListState,
getResultRenderingFunction: () => this.resultRenderingFunction,
renderResult: (props) => ,
diff --git a/packages/atomic/src/components/search/result-lists/atomic-result-list/atomic-result-list.tsx b/packages/atomic/src/components/search/result-lists/atomic-result-list/atomic-result-list.tsx
index dd09d0134e6..a499f879d05 100644
--- a/packages/atomic/src/components/search/result-lists/atomic-result-list/atomic-result-list.tsx
+++ b/packages/atomic/src/components/search/result-lists/atomic-result-list/atomic-result-list.tsx
@@ -23,6 +23,7 @@ import {
ResultDisplayDensity,
ResultDisplayImageSize,
ResultDisplayLayout,
+ ResultTarget,
} from '../../../common/layout/display-options';
import {ResultListCommon} from '../../../common/result-list/result-list-common';
import {ResultRenderingFunction} from '../../../common/result-list/result-list-common-interface';
@@ -81,6 +82,14 @@ export class AtomicResultList implements InitializableComponent {
* The spacing of various elements in the result list, including the gap between results, the gap between parts of a result, and the font sizes of different parts in a result.
*/
@Prop({reflect: true}) public density: ResultDisplayDensity = 'normal';
+
+ /**
+ * The target location to open the result link (see [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target)).
+ * This property is only leveraged when `display` is `grid`.
+ * @defaultValue `_self`
+ */
+ @Prop() gridCellLinkTarget: ResultTarget = '_self';
+
/**
* The expected size of the image displayed in the results.
*/
@@ -128,6 +137,7 @@ export class AtomicResultList implements InitializableComponent {
this.resultListCommon = new ResultListCommon({
resultTemplateProvider,
getNumberOfPlaceholders: () => this.resultsPerPageState.numberOfResults,
+ gridCellLinkTarget: this.gridCellLinkTarget,
host: this.host,
bindings: this.bindings,
getDensity: () => this.density,
diff --git a/packages/atomic/src/components/search/result-template-components/atomic-quickview/atomic-quickview.tsx b/packages/atomic/src/components/search/result-template-components/atomic-quickview/atomic-quickview.tsx
index e4b54aa17dc..3a5790173d7 100644
--- a/packages/atomic/src/components/search/result-template-components/atomic-quickview/atomic-quickview.tsx
+++ b/packages/atomic/src/components/search/result-template-components/atomic-quickview/atomic-quickview.tsx
@@ -126,7 +126,8 @@ export class AtomicQuickview implements InitializableComponent {
}
}
- private onClick() {
+ private onClick(event?: MouseEvent) {
+ event?.stopPropagation();
this.quickview.fetchResultContent();
}
@@ -139,7 +140,7 @@ export class AtomicQuickview implements InitializableComponent {
title={this.bindings.i18n.t('quickview')}
style="outline-primary"
class="p-2"
- onClick={() => this.onClick()}
+ onClick={(event) => this.onClick(event)}
ref={this.buttonFocusTarget.setTarget}
>