Skip to content

[NO-TICKET] chore: InsetBannerSponsored Enhance Accessibility and Fix duplicate label #3911

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

Jump to bottom
Merged
merged 1 commit into from
Aug 18, 2025
Merged

[NO-TICKET] chore: InsetBannerSponsored Enhance Accessibility and Fix duplicate label #3911

merged 1 commit into from
Aug 18, 2025

Conversation

hir06
Copy link
Contributor

@hir06 hir06 commented Aug 14, 2025 •
edited
Loading

  • Removed duplicate Aria label for more Information as it is added for icon
  • Removed Aria-hidden for logo to help screen reader readout Alt text

Screenshot of changes.

Highlight the changes

Before After
Screenshot 2025-08-14 at 15 41 45 Screenshot 2025-08-14 at 15 42 26

Remember to include the following changes:

  • Ensure the PR title includes the name of the component you are changing so it's clear in the release notes for consumers of the changes in the version e.g [Clover-123][BpkButton] Updating the colour
  • README.md (If you have created a new component)
  • Component README.md
  • Tests
  • Accessibility tests
    • The following checks were performed:
      • Ability to navigate using a keyboard only
      • Zoom functionality (Deque University explanation):
        • The page SHOULD be functional AND readable when only the text is magnified to 200% of its initial size
        • Pages must reflow as zoom increases up to 400% so that content continues to be presented in only one column i.e. Content MUST NOT require scrolling in two directions (both vertically and horizontally)
      • Ability to navigate using a screen reader only
  • Storybook examples created/updated
  • For breaking changes or deprecating components/properties, migration guides added to the description of the PR. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

@Copilot Copilot AI review requested due to automatic review settings August 14, 2025 13:41
@hir06 hir06 added the minor Non breaking change label Aug 14, 2025
Copilot
Copilot AI reviewed Aug 14, 2025
View reviewed changes
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR enhances accessibility for the InsetBannerSponsored component by removing duplicate ARIA labels and ensuring proper screen reader support for logo images.

  • Removed duplicate buttonA11yLabel property that was redundant with icon ARIA labeling
  • Removed aria-hidden attribute from logo images to allow screen readers to access alt text
  • Updated type definitions and tests to reflect the removed buttonA11yLabel property

Reviewed Changes

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

File Description
common-types.ts Removed buttonA11yLabel property from callToActionType interface
BpkInsetBannerSponsored.tsx Removed duplicate aria-label and aria-hidden attributes for better accessibility
BpkInsetBannerSponsored-test.tsx Updated test cases to remove references to the deleted buttonA11yLabel property

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

@hir06 hir06 changed the title [NO-TICKET] chore: InsetBannerSPonsored Enhance Accessibility and Fix duplicate label [NO-TICKET] chore: InsetBannerSponsored Enhance Accessibility and Fix duplicate label Aug 14, 2025
@skyscanner-backpack-bot
Copy link

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

@hir06 hir06 force-pushed the insetBanner-a11y branch from d776e14 to 5a90881 Compare August 14, 2025 14:46
@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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 5a90881

xiaogliu
xiaogliu approved these changes Aug 15, 2025
View reviewed changes
Copy link
Contributor

@xiaogliu xiaogliu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

xiaogliu
xiaogliu reviewed Aug 15, 2025
View reviewed changes
packages/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.tsx
@@ -86,7 +85,6 @@ const BpkInsetBannerSponsored = ({
}}
>
<button
aria-label={callToAction?.buttonA11yLabel}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @hir06 thanks for raising the PR, can you explain more the duplicated places? I didn't quite get the context.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @xiaogliu, instead of showing the entire button, we’d like to move the label to the info icon, as per this Figma design:
https://www.figma.com/design/TPAjVpPBlISl8oLCJinVah/Inline-Plus-%E2%80%A2-Car-Hire?node-id=2373-1219&p=f&m=dev

It was originally added here:

backpack/packages/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.tsx

Line 37 in 5a90881

adInfoA11yLabel = '',

The only thing pending is cleaning up the existing label.

@xiaogliu xiaogliu merged commit 5f69e5b into main Aug 18, 2025
10 checks passed
@xiaogliu xiaogliu deleted the insetBanner-a11y branch August 18, 2025 09:41
gert-janvercauteren added a commit that referenced this pull request Aug 26, 2025
@gert-janvercauteren
Merge branch 'main' into feature/mcp-code-connect
4d5fd0f 
* main:
  Bump actions/download-artifact in the artifacts-actions group (#3907)
  Bump actions/checkout from 4 to 5 (#3913)
  Fix closeText style of BpkModal in dark mode (#3919)
  Bump the babel group across 1 directory with 5 updates (#3917)
  Bump @babel/runtime in the npm_and_yarn group across 1 directory (#3884)
  Bump actions/cache from 4.2.3 to 4.2.4 (#3905)
  Bump webpack from 5.99.8 to 5.101.2 (#3916)
  QUAR-1046 Fix CTA Button Alignment, Logo Sizing, and Logo Vertical Alignment in Inset Banner (#3912)
  chore: removed duplicate aria-label (#3911)
  [CAPY-1594][BpkNavigationTabGroup/BpkBubble] Create and integrate 'new' bubble tooltip in navigation tab bar (#3909)
  [CLOV-381][BpkBreakpoint] update bpk breakpoint readme (#3910)
  [CYB-3904][BpkGraphicPromo] Render wrapper as semantic anchor tag to improve SEO (#3904)
  [CLOVER-532][BpkText] Add BpkText color prop with leverage css classname (#3900)
  fix: A11y and icon issue for inset banner sponsored (#3901)

# Conflicts:
#	packages/bpk-component-text/README.md
#	packages/bpk-component-text/src/BpkText-test.tsx
#	packages/bpk-component-text/src/BpkText.tsx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@xiaogliu xiaogliu xiaogliu approved these changes

Copilot code review Copilot Copilot left review comments

@syed-emad syed-emad syed-emad approved these changes

Assignees
No one assigned
Labels
minor Non breaking change
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@hir06 @xiaogliu @syed-emad