Skip to content

[QUAR-1014] fix: A11y and icon issue for inset banner sponsored #3901

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 5, 2025
Merged

[QUAR-1014] fix: A11y and icon issue for inset banner sponsored #3901

merged 1 commit into from
Aug 5, 2025

Conversation

hir06
Copy link
Contributor

@hir06 hir06 commented Aug 4, 2025 •
edited
Loading

Context

  • Adding accessibility labels
  • adding conditional check to prevent issue where info icon renders unconditionally

#Changes

Platform Before After
Desktop Screenshot 2025-08-04 at 15 16 23 Screenshot 2025-8-04 at 15 17 02

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 4, 2025 13:17
Copilot
Copilot AI reviewed Aug 4, 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 addresses accessibility and icon display issues in the inset banner sponsored component. It adds accessibility labels for better screen reader support and fixes an icon display bug where info icons were incorrectly shown for single bottom sheet items.

  • Added accessibility label props for ad info and scenic elements
  • Fixed conditional rendering of info icons to only appear when there are multiple bottom sheet items
  • Added comprehensive test coverage for the new functionality

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
common-types.ts Adds new optional accessibility label props
BpkInsetBannerSponsored.tsx Implements accessibility labels and fixes icon conditional rendering
BpkInsetBannerSponsored-test.tsx Adds test coverage for icon display logic
stories.ts Exports new story for single bottom sheet item scenario
examples.tsx Adds example component demonstrating single bottom sheet item behavior

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

skyscanner-backpack-bot bot commented Aug 4, 2025 •
edited
Loading

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 4f100fe

@skyscanner-backpack-bot
Copy link

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

@hir06 hir06 added the minor Non breaking change label Aug 4, 2025
GCpigsic
GCpigsic reviewed Aug 5, 2025
View reviewed changes
packages/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.tsx Outdated
Comment on lines 37 to 38
adInfoA11yLabel,
ariaAdScenicA11yLabel,
Copy link
Contributor

Choose a reason for hiding this comment

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

Nit: would it better if we set the default value '' here rather than repeatedly using aria-label={adInfoA11yLabel || ''} in the JSX. Here’s why:
it would make the JSX cleaner and centralised at the top of your function, making it more maintainable.
What do you think?

@skyscanner-backpack-bot
Copy link

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

@GCpigsic GCpigsic merged commit d849f6b into main Aug 5, 2025
15 of 16 checks passed
@GCpigsic GCpigsic deleted the QUAR-1014 branch August 5, 2025 09:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

Copilot code review Copilot Copilot left review comments

@GCpigsic GCpigsic GCpigsic approved these changes

@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 @GCpigsic @syed-emad