Braze Banner accessibility fixes

src/AppBanner/index.stories.tsx

@@ -27,6 +27,11 @@ export default {
             type: { name: 'string', required: true },
             description: 'Body text',
         },
+        boldText: {
+            name: 'boldText',
+            type: { name: 'string', required: false },
+            description: 'Text added to the end of the body copy with bold styling',
+        },
         cta: {
             name: 'cta',
             type: { name: 'string', required: true },
@@ -39,19 +44,22 @@ export default {
             description:
                 'i.guim.co.uk URL for the banner image. Use the Grid image picker to select this.',
         },
+        imageAccessibilityText: {
+            name: 'imageAccessibilityText',
+            type: { name: 'string', required: true },
+            description: 'Accessible text description of the image',
+        },
     },
 };
 
 const StoryTemplate = (args: BrazeMessageProps & { componentName: string }): ReactElement => {
-    const imageUrl = grid(
-        'https://i.guim.co.uk/img/media/de6813b4dd9b9805a2d14dd6af14ae2b48e2e19e/0_0_930_520/master/930.png?quality=45&width=930&s=0beb53509265d32e3d201aa3981323bb',
-    );
-
     const brazeMessageProps = {
         header: args.header,
         body: args.body,
+        boldText: args.boldText,
         cta: args.cta,
-        imageUrl,
+        imageUrl: args.imageUrl,
+        imageAccessibilityText: args.imageAccessibilityText,
     };
 
     // This is to make the data available to the guPreview add-on:
@@ -79,8 +87,13 @@ DefaultStory.args = {
     slotName: 'Banner',
     header: 'A note to our digital subscribers',
     body: 'Hi John, did you know that as a Guardian digital subscriber you can enjoy an enhanced experience of our quality, independent journalism on all your devices, including The Guardian Live app.',
+    boldText: 'You know it makes sense.',
     componentName: 'AppBanner',
     cta: 'Search for "Guardian live news"',
+    imageUrl: grid(
+        'https://i.guim.co.uk/img/media/de6813b4dd9b9805a2d14dd6af14ae2b48e2e19e/0_0_930_520/master/930.png?quality=45&width=930&s=0beb53509265d32e3d201aa3981323bb',
+    ),
+    imageAccessibilityText: 'Explanation text of what the image shows',
 };
 
 DefaultStory.story = { name: 'AppBanner' };

src/AppBanner/index.tsx

@@ -1,40 +1,54 @@
-import React, { useState, ReactElement } from 'react';
-import { css } from '@emotion/react';
-import { ThemeProvider } from '@emotion/react';
-import {
-    Button,
-    buttonThemeReaderRevenueBrandAlt,
-    SvgCross,
-} from '@guardian/source-react-components';
-import type { TrackClick } from '../utils/tracking';
+import React, { useState, ReactElement, useEffect, useRef } from 'react';
 
-import { AppStore } from '../assets/app-store';
-import { PlayStore } from '../assets/play-store';
-import { styles as commonStyles } from '../styles/bannerCommon';
-import { useEscapeShortcut, OnCloseClick, CLOSE_BUTTON_ID } from '../bannerCommon/bannerActions';
-import { styles } from './styles';
+import type { TrackClick } from '../utils/tracking';
+import {
+    useEscapeShortcut,
+    OnCloseClick,
+    CLOSE_BUTTON_ID,
+    captureFocusOnBanner,
+} from '../bannerCommon/bannerActions';
+
+import { BannerStickyTopBar } from '../bannerCommon/BannerStickyTopBar';
+import { BannerBodyCopy } from '../bannerCommon/BannerBodyCopy';
+import { BannerAppStrapline } from '../bannerCommon/BannerAppStrapline';
+import { BannerLinkButton } from '../bannerCommon/BannerLinkButton';
+import { BannerNotInterestedButton } from '../bannerCommon/BannerNotInterestedButton';
+import { BannerImageBlock } from '../bannerCommon/BannerImageBlock';
+import { BannerCloseButton } from '../bannerCommon/BannerCloseButton';
 
 import { canRender, COMPONENT_NAME } from './canRender';
 export { COMPONENT_NAME };
 
+import { styles } from '../bannerCommon/bannerStyles';
+
 export type BrazeMessageProps = {
     ophanComponentId?: string;
     header?: string;
     body?: string;
+    boldText?: string;
+    secondParagraph?: string;
     cta?: string;
     imageUrl?: string;
+    imageAccessibilityText?: string;
 };
 
-import type { ButtonTheme } from '@guardian/source-react-components';
-
-export type Props = {
+type Props = {
     brazeMessageProps: BrazeMessageProps;
     trackClick: TrackClick;
 };
 
 export const AppBanner = (props: Props): ReactElement | null => {
     const {
-        brazeMessageProps: { ophanComponentId = COMPONENT_NAME, header, body, cta, imageUrl },
+        brazeMessageProps: {
+            ophanComponentId = COMPONENT_NAME,
+            header,
+            body,
+            boldText,
+            secondParagraph,
+            cta,
+            imageUrl,
+            imageAccessibilityText,
+        },
         trackClick,
     } = props;
 
@@ -64,87 +78,42 @@ export const AppBanner = (props: Props): ReactElement | null => {
 
     useEscapeShortcut(() => onCloseAction(CLOSE_BUTTON_ID));
 
-    // This is to keep button colors the same as before
-    // https://github.com/guardian/braze-components/pull/123
-    // Probably should be removed later
-    const overrridenReaderRevenueTheme: { button: ButtonTheme } = {
-        button: {
-            ...buttonThemeReaderRevenueBrandAlt.button,
-            backgroundPrimary: 'rgb(51, 51, 51)',
-            backgroundPrimaryHover: 'black',
-        },
-    };
-    const notInterestedTheme: { button: ButtonTheme } = {
-        button: {
-            ...buttonThemeReaderRevenueBrandAlt.button,
-            textSubdued: 'rgb(51, 51, 51)',
-        },
-    };
+    const bannerRef = useRef<HTMLDivElement>(null);
+    useEffect(() => captureFocusOnBanner(bannerRef), [bannerRef.current]);
 
     if (!showBanner) {
         return null;
     }
 
     return (
-        <div css={commonStyles.wrapper}>
-            <div css={commonStyles.contentContainer}>
-                <div css={commonStyles.topLeftComponent}>
-                    <div css={commonStyles.heading}>{header}</div>
-                    <p css={commonStyles.paragraph}>
-                        {body}
-                        <br />
-                        <strong css={commonStyles.cta}>{cta}</strong>
-                        <span css={styles.storeIcon}>
-                            <AppStore />
-                            <PlayStore />
-                        </span>
-                    </p>
-                    <ThemeProvider theme={overrridenReaderRevenueTheme}>
-                        <Button
-                            onClick={(e) => onCloseClick(e, 0)}
-                            css={commonStyles.primaryButton}
-                        >
-                            Ok, got it
-                        </Button>
-                    </ThemeProvider>
-                    <ThemeProvider theme={notInterestedTheme}>
-                        <Button
-                            onClick={(e) => onCloseClick(e, 0)}
-                            priority="subdued"
-                            cssOverrides={css`
-                                text-decoration: none;
-                                text-underline-offset: inherit;
-
-                                &:hover {
-                                    text-decoration: underline;
-                                }
-                            `}
-                        >
-                            {"I'm not interested"}
-                        </Button>
-                    </ThemeProvider>
-                </div>
-                <div css={commonStyles.bottomRightComponent}>
-                    <div css={styles.image}>
-                        <img src={imageUrl} alt="" />
+        <div css={styles.wrapper} ref={bannerRef}>
+            <BannerStickyTopBar
+                header={header}
+                frequency="We'll give it to you for free!"
+                onCloseClick={onCloseClick}
+            />
+
+            <div css={[styles.breakpoints, styles.contentContainer]}>
+                <div>
+                    <BannerBodyCopy
+                        body={body}
+                        boldText={boldText}
+                        secondParagraph={secondParagraph}
+                    />
+
+                    <BannerAppStrapline cta={cta} />
+                    <div css={styles.ctaBar}>
+                        <BannerLinkButton onCloseClick={onCloseClick} />
+                        <BannerNotInterestedButton onCloseClick={onCloseClick} />
                     </div>
-                    <div css={commonStyles.iconPanel}>
-                        <ThemeProvider theme={overrridenReaderRevenueTheme}>
-                            <Button
-                                icon={<SvgCross />}
-                                hideLabel={true}
-                                css={commonStyles.closeButton}
-                                priority="tertiary"
-                                size="small"
-                                aria-label="Close"
-                                onClick={(e) => onCloseClick(e, CLOSE_BUTTON_ID)}
-                                tabIndex={0}
-                            >
-                                {' '}
-                            </Button>
-                        </ThemeProvider>
+                    <div css={styles.hiddenCloseButton}>
+                        <BannerCloseButton onCloseClick={onCloseClick} />
                     </div>
                 </div>
+                <BannerImageBlock
+                    imageUrl={imageUrl}
+                    imageAccessibilityText={imageAccessibilityText}
+                />
             </div>
         </div>
     );

src/bannerCommon/BannerAppStrapline.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { css } from '@emotion/react';
+
+import { AppStore } from '../assets/app-store';
+import { PlayStore } from '../assets/play-store';
+import { space, neutral, body, from } from '@guardian/source-foundations';
+
+const styles = {
+    container: css`
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        align-items: center;
+    `,
+    cta: css`
+        ${body.medium()}
+        font-weight: 700;
+        display: inline-block;
+        color: ${neutral[20]};
+        margin-right: ${space[2]}px;
+
+        ${from.desktop} {
+            font-size: 20px;
+        }
+    `,
+    storeIcon: css`
+        display: inline-block;
+
+        svg {
+            height: 30px;
+            width: auto;
+            max-width: 110px;
+            padding-right: ${space[2]}px;
+        }
+    `,
+};
+
+type BannerAppStraplineProps = {
+    cta?: string;
+};
+
+export const BannerAppStrapline = (props: BannerAppStraplineProps): JSX.Element => {
+    const { cta } = props;
+
+    return (
+        <div css={styles.container}>
+            <div css={styles.cta}>{cta}</div>
+            <div css={styles.storeIcon}>
+                <AppStore />
+                <PlayStore />
+            </div>
+        </div>
+    );
+};

src/bannerCommon/BannerBodyCopy.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { css } from '@emotion/react';
+import { from, body } from '@guardian/source-foundations';
+
+const styles = {
+    container: css``,
+    body: css`
+        ${body.medium()}
+        line-height: 135%;
+        color: #666;
+
+        ${from.desktop} {
+            font-size: 20px;
+        }
+    `,
+    boldText: css`
+        font-weight: bold;
+    `,
+};
+
+type BannerBodyCopyProps = {
+    body?: string;
+    boldText?: string;
+    secondParagraph?: string;
+};
+
+export const BannerBodyCopy = (props: BannerBodyCopyProps): JSX.Element => {
+    const { body, boldText, secondParagraph } = props;
+
+    return (
+        <div css={styles.container}>
+            <p css={styles.body}>
+                {body}
+                {boldText && <span css={styles.boldText}> {boldText}</span>}
+            </p>
+            {secondParagraph && <p css={styles.body}>{secondParagraph}</p>}
+        </div>
+    );
+};