-
Notifications
You must be signed in to change notification settings - Fork 204
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.
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
[QUAR-497] [BpkInsetBanner] Add CTA button & popover #3732
[QUAR-497] [BpkInsetBanner] Add CTA button & popover #3732
Conversation
Visit https://backpack.github.io/storybook-prs/3732 to see this build running in a browser. |
Visit https://backpack.github.io/storybook-prs/3732 to see this build running in a browser. |
Visit https://backpack.github.io/storybook-prs/3732 to see this build running in a browser. |
Visit https://backpack.github.io/storybook-prs/3732 to see this build running in a browser. |
Browser supportIf this is a visual change, make sure you've tested it in multiple browsers. |
Visit https://backpack.github.io/storybook-prs/3732 to see this build running in a browser. |
Visit https://backpack.github.io/storybook-prs/3732 to see this build running in a browser. |
popoverPlacement?: Placement; | ||
buttonCloseLabel?: string; | ||
buttonA11yLabel?: string; | ||
popverLabel?: string; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
would it be nice to have aria-labelledby here too?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I mean for popover
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
buttonA11yLabel
is used to pass a value to aria-label
on the button so I think that's sufficient, as aria-labelledby
requires an id to be passed to refer to an element to be used as the label of the object. But with the way backpack components work in the consumer, the backpack component is abstracted and we don't see the IDs inside the backpack component. In this case I think having buttonA11yLabel
is preferable :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see so here the button would be info icon and the label typically could be description of popover?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Button would be info icon, and if CTA text provided then text + info icon is in the button, so what would be read out by the screen reader is either "aria-label text", button
or "aria-label text", button, "cta text"
@@ -52,6 +52,28 @@ describe('BpkInsetBanner', () => { | |||
expect(getByText('Sponsored')).toBeInTheDocument(); | |||
}); | |||
|
|||
it('should render call to action popover text if provided', () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should we also test that the popover can be closed properly?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The popover close functionality is tested in the popover component, so I think there's enough coverage for that there, and in inset banner we just want to test the popover message prop is passed correctly and shown in the popover dialog :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
left 1 comment, rest lgtm
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
Visit https://backpack.github.io/storybook-prs/3732 to see this build running in a browser. |
e.stopPropagation(); | ||
e.preventDefault(); | ||
}} | ||
aria-label={callToAction?.buttonA11yLabel} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Will need to check this providing this alongside the label, as looking at the BpkPopover this might compete with label
which also sets an A11y label for the popover based on the prop
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just testing this and this property is having no effect to a screenreader as the aria-labelledby
inside the popover is being prioritsed over it and using the label
(which is the popover title) to be the aria for the user :) so this can be omitted
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok I'll remove it :)
Visit https://backpack.github.io/storybook-prs/3732 to see this build running in a browser. |
JIRA: https://skyscanner.atlassian.net/browse/QUAR-497
When the
BpkInsetBanner
component was created last year we added the CTA object prop accepting a text element. Now we need to add the CTA button and popover functionality so that we can add required legal info in the adverts using the inset banner.Props added to
CallToAction
object prop:popoverMessage
: message that will be displayed inside the popover dialog when the CTA button is clicked.popoverPlacement
: where the popover dialog should appear when CTA button is clicked (ex. 'top', 'bottom', etc).buttonCloseLabel
: text to display in the close button of the popover dialog.buttonA11yLabel
: accessibility aria label for the CTA button.popverLabel
: label of the popover dialog, and iflabelTitle
is true, title to display at the top of the popover dialog.popoverId
: id of the popover dialog.labelTitle
: if true, displayspopoverLabel
as popover title.closeBtnIcon
: if true, displays close icon instead ofbuttonCloseLabel
in popover close button.onLight
variant)onDark
variant)Remember to include the following changes:
[KOA-123][BpkButton] Updating the colour
README.md
(If you have created a new component)README.md