[CYB-3904][BpkGraphicPromo] Render wrapper as semantic anchor tag to improve SEO #3904

zoehe-sc · 2025-08-08T03:59:57Z

jira： https://skyscanner.atlassian.net/browse/CYB-3904
link wrapper

Summary

This PR updates BpkGraphicPromo to render its outer wrapper as a semantic <a> tag when an href is provided, in order to improve SEO and HTML semantics.

Using a native anchor tag allows search engines to crawl and index the link correctly, instead of relying on role="link" and tabIndex="0" on a <div>, which are not meaningful for crawlers or semantic analysis.

SEO Benefits

Enables search engines to discover and index links rendered by this component.
Improves semantic correctness of markup, allowing better accessibility and link intent recognition.
Avoids div-based "fake links", which are often missed by SEO tools and crawlers.

Changes

Added a Wrapper component to render either <a> or <div> safely with appropriate props.
If href is present, the component now renders as <a> instead of <div>.

Remember to include the following changes:

Copilot

Pull Request Overview

This PR adds the ability to render the BpkGraphicPromo component as a semantic anchor tag (<a>) instead of a <div> when a URL is provided, improving SEO and semantic HTML structure.

Introduces an optional href prop that conditionally renders the component as an anchor tag
Refactors the component structure using a new Wrapper component to handle conditional rendering
Adds appropriate CSS styling for anchor tag behavior

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
BpkGraphicPromo.tsx	Adds `href` prop and `Wrapper` component for conditional anchor/div rendering
BpkGraphicPromo.module.scss	Adds CSS styles for anchor tag behavior (display block, text decoration)
BpkGraphicPromo-test.tsx	Adds test coverage for both anchor and div rendering scenarios
stories.js	Exports new LinkWrapper story example
examples.js	Implements LinkWrapperExample demonstrating href functionality

packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.tsx

skyscanner-backpack-bot · 2025-08-08T04:08:06Z

Visit https://backpack.github.io/storybook-prs/3904 to see this build running in a browser.

skyscanner-backpack-bot · 2025-08-08T04:09:47Z

	Warnings
⚠️	Package source files (e.g. `packages/package-name/src/Component.js`) were updated, but snapshots weren't. Have you checked that the tests still pass?

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against 4a9276e

skyscanner-backpack-bot · 2025-08-08T04:29:06Z

Visit https://backpack.github.io/storybook-prs/3904 to see this build running in a browser.

GCpigsic · 2025-08-08T06:27:31Z

packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.tsx

+      >
+        {children}
+      </div>
+


Nit, could you help remove the redundant empty line?

GCpigsic · 2025-08-08T06:45:20Z

packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.tsx

+  onClick,
+  onKeyDown,
+  style = {},
+  tabIndex = 0,


Should tabIndex=0 still be needed here, or we can just set the tabIndex as 0 when rendering div ? Seems we already set the element as a when href is provided

Good point!

Seems we can remove this in WrapperProps, just pass the tabIndex=0 in line 136, what do you think?

GCpigsic · 2025-08-08T06:53:48Z

packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.tsx

      id={contentId || ''}
-      className={cardClasses}
+      cardClasses={cardClasses}


why do we change it to cardClasses here?

Because elint does not allow adding className attributes to components that are not basic components, so I changed the prop name

packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.tsx

Co-authored-by: GC Zhu <171069086@qq.com>

skyscanner-backpack-bot · 2025-08-08T07:13:41Z

Visit https://backpack.github.io/storybook-prs/3904 to see this build running in a browser.

…ckpack into graphic_promo_link

skyscanner-backpack-bot · 2025-08-08T07:21:44Z

Visit https://backpack.github.io/storybook-prs/3904 to see this build running in a browser.

GCpigsic · 2025-08-08T07:28:10Z

packages/bpk-component-graphic-promotion/src/BpkGraphicPromo-test.tsx

+    const renderedElement = screen.getByRole('link');
+
+    expect(renderedElement.tagName.toLowerCase()).toBe('div');
+


empty line 😄

GCpigsic · 2025-08-08T07:28:56Z

packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.tsx

+
+

empty line, could you format the file before submiting?

Does executing lint:js:fix not work?

skyscanner-backpack-bot · 2025-08-08T08:09:30Z

Visit https://backpack.github.io/storybook-prs/3904 to see this build running in a browser.

skyscanner-backpack-bot · 2025-08-08T10:05:03Z

Visit https://backpack.github.io/storybook-prs/3904 to see this build running in a browser.

add a tag for graphic promo

282c11b

Copilot AI review requested due to automatic review settings August 8, 2025 03:59

Copilot AI reviewed Aug 8, 2025

View reviewed changes

packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.tsx Outdated Show resolved Hide resolved

update

79af09d

zoehe-sc changed the title ~~[wip]add a tag for graphic promo~~ [CYB-3502][BpkGraphicPromo] Use anchor tag as wrapper for better semantics and accessibility Aug 8, 2025

zoehe-sc added the minor Non breaking change label Aug 8, 2025

zoehe-sc added 2 commits August 8, 2025 12:20

update

00e8b08

update

a236b5e

zoehe-sc changed the title ~~[CYB-3502][BpkGraphicPromo] Use anchor tag as wrapper for better semantics and accessibility~~ [CYB-3502][BpkGraphicPromo] Render wrapper as semantic anchor tag to improve SEO Aug 8, 2025

zoehe-sc changed the title ~~[CYB-3502][BpkGraphicPromo] Render wrapper as semantic anchor tag to improve SEO~~ [CYB-3904][BpkGraphicPromo] Render wrapper as semantic anchor tag to improve SEO Aug 8, 2025

GCpigsic reviewed Aug 8, 2025

View reviewed changes

Update packages/bpk-component-graphic-promotion/src/BpkGraphicPromo.tsx

a3f2e55

Co-authored-by: GC Zhu <171069086@qq.com>

zoehe-sc added 2 commits August 8, 2025 15:13

update

7b8cec4

Merge branch 'graphic_promo_link' of https://github.com/Skyscanner/ba…

e97b52c

…ckpack into graphic_promo_link

GCpigsic reviewed Aug 8, 2025

View reviewed changes

update

eb6e84c

format files

4a9276e

GCpigsic approved these changes Aug 8, 2025

View reviewed changes

GCpigsic merged commit 5a3b558 into main Aug 8, 2025
10 checks passed

GCpigsic deleted the graphic_promo_link branch August 8, 2025 10:23

		const renderedElement = screen.getByRole('link');

		expect(renderedElement.tagName.toLowerCase()).toBe('div');

[CYB-3904][BpkGraphicPromo] Render wrapper as semantic anchor tag to improve SEO #3904

[CYB-3904][BpkGraphicPromo] Render wrapper as semantic anchor tag to improve SEO #3904

Uh oh!

Conversation

zoehe-sc commented Aug 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

SEO Benefits

Changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

skyscanner-backpack-bot bot commented Aug 8, 2025

Uh oh!

skyscanner-backpack-bot bot commented Aug 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Browser support

Uh oh!

skyscanner-backpack-bot bot commented Aug 8, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

skyscanner-backpack-bot bot commented Aug 8, 2025

Uh oh!

skyscanner-backpack-bot bot commented Aug 8, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

skyscanner-backpack-bot bot commented Aug 8, 2025

Uh oh!

skyscanner-backpack-bot bot commented Aug 8, 2025

Uh oh!

Uh oh!

Uh oh!

zoehe-sc commented Aug 8, 2025 •

edited

Loading

skyscanner-backpack-bot bot commented Aug 8, 2025 •

edited

Loading