[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. |
kirstybryce
changed the title
|
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.
would it be nice to have aria-labelledby here too?
There was a problem hiding this comment.
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.
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.
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.
should we also test that the popover can be closed properly?
There was a problem hiding this comment.
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 :)
|
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.
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.
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.
Ok I'll remove it :)
|
Visit https://backpack.github.io/storybook-prs/3732 to see this build running in a browser. |
olliecurtis
deleted the
QUAR-497_Update-BpkInsetBanner-to-include-CTA-btn
branch
kirstybryce
restored the
QUAR-497_Update-BpkInsetBanner-to-include-CTA-btn
branch
kirstybryce
deleted the
QUAR-497_Update-BpkInsetBanner-to-include-CTA-btn
branch
JIRA: https://skyscanner.atlassian.net/browse/QUAR-497
When the
BpkInsetBannercomponent 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
CallToActionobject 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 iflabelTitleis true, title to display at the top of the popover dialog.popoverId: id of the popover dialog.labelTitle: if true, displayspopoverLabelas popover title.closeBtnIcon: if true, displays close icon instead ofbuttonCloseLabelin popover close button.onLightvariant)onDarkvariant)Remember to include the following changes:
[KOA-123][BpkButton] Updating the colourREADME.md(If you have created a new component)README.md