feat(Popover, Snackbar, Callout, Chip, Dialog, Cards): allow customiz…

…able close button label (#1193)
Telefonica · Aug 9, 2024 · 63de33a · 63de33a · github-actions · Aug 9, 2024
1 parent d8ad685
commit 63de33a
Show file tree

Hide file tree

Showing 18 changed files with 293 additions and 14 deletions.
diff --git a/src/__tests__/callout-test.tsx b/src/__tests__/callout-test.tsx
@@ -4,7 +4,7 @@ import {ThemeContextProvider, Callout} from '..';
 import userEvent from '@testing-library/user-event';
 import {makeTheme} from './test-utils';
 
-test('renders an accesible and clossable Callout', async () => {
+test('renders an accesible and closable Callout', async () => {
     const handleCloseSpy = jest.fn();
     render(
         <ThemeContextProvider theme={makeTheme()}>
@@ -22,3 +22,27 @@ test('renders an accesible and clossable Callout', async () => {
 
     expect(handleCloseSpy).toHaveBeenCalledTimes(1);
 });
+
+test('renders an accesible and closable Callout with custom close button label', async () => {
+    const handleCloseSpy = jest.fn();
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <Callout
+                title="some title"
+                description="some description"
+                onClose={handleCloseSpy}
+                closeButtonLabel="custom close label"
+            />
+        </ThemeContextProvider>
+    );
+
+    const callout = screen.getByRole('region');
+    expect(callout).toBeInTheDocument();
+
+    const closeButton = within(callout).getByRole('button', {name: 'custom close label'});
+    expect(closeButton).toBeInTheDocument();
+
+    await userEvent.click(closeButton);
+
+    expect(handleCloseSpy).toHaveBeenCalledTimes(1);
+});
diff --git a/src/__tests__/chip-test.tsx b/src/__tests__/chip-test.tsx
@@ -20,6 +20,23 @@ test('Chip can be closed', async () => {
     expect(closeSpy).toHaveBeenCalledTimes(1);
 });
 
+test('Chip can be closed when using custom close label', async () => {
+    const closeSpy = jest.fn();
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <Chip onClose={closeSpy} closeButtonLabel="custom close label">
+                some text
+            </Chip>
+        </ThemeContextProvider>
+    );
+
+    const closeButton = screen.getByRole('button', {name: 'custom close label'});
+
+    await userEvent.click(closeButton);
+
+    expect(closeSpy).toHaveBeenCalledTimes(1);
+});
+
 test('Chip can be clicked', async () => {
     const clickSpy = jest.fn();
     render(

diff --git a/src/__tests__/data-card-test.tsx b/src/__tests__/data-card-test.tsx
@@ -6,6 +6,7 @@ import ThemeContextProvider from '../theme-context-provider';
 import Tag from '../tag';
 import Stack from '../stack';
 import {Text2} from '../text';
+import userEvent from '@testing-library/user-event';
 
 test('DataCard "href" label', async () => {
     render(
@@ -72,3 +73,22 @@ test('DataCard "onPress" label', async () => {
 
     await screen.findByRole('button', {name: 'Title Headline Pretitle Description Extra line 1Extra line 2'});
 });
+
+test('DataCard onClose custom label', async () => {
+    const closeSpy = jest.fn();
+
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <DataCard
+                onClose={closeSpy}
+                closeButtonLabel="custom close label"
+                title="Title"
+                description="Description"
+            />
+        </ThemeContextProvider>
+    );
+
+    const closeButton = await screen.findByRole('button', {name: 'custom close label'});
+    await userEvent.click(closeButton);
+    expect(closeSpy).toHaveBeenCalledTimes(1);
+});
diff --git a/src/__tests__/dialog-test.tsx b/src/__tests__/dialog-test.tsx
@@ -22,6 +22,7 @@ const confirmProps = {
     cancelText: 'Nope!',
     onAccept: onAcceptSpy,
     onCancel: onCancelSpy,
+    closeButtonLabel: 'custom close label',
 };
 
 let savedAlert: (params: any) => void | null = () => {
@@ -291,3 +292,16 @@ test('when webview bridge is available nativeConfirm is shown', async () => {
         });
     });
 });
+
+test('dialog close button is accessible', async () => {
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <TestComponent />
+        </ThemeContextProvider>
+    );
+
+    const dialogButton = await screen.findByRole('button', {name: 'Dialog'});
+    await userEvent.click(dialogButton);
+
+    await screen.findByRole('button', {name: 'custom close label'});
+});
diff --git a/src/__tests__/display-data-card-test.tsx b/src/__tests__/display-data-card-test.tsx
@@ -6,6 +6,7 @@ import ThemeContextProvider from '../theme-context-provider';
 import Tag from '../tag';
 import Stack from '../stack';
 import {Text2} from '../text';
+import userEvent from '@testing-library/user-event';
 
 test('DisplayDataCard "href" label', async () => {
     render(
@@ -72,3 +73,22 @@ test('DisplayDataCard "onPress" label', async () => {
 
     await screen.findByRole('button', {name: 'Title Headline Pretitle Description Extra line 1Extra line 2'});
 });
+
+test('DisplayDataCard onClose custom label', async () => {
+    const closeSpy = jest.fn();
+
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <DisplayDataCard
+                onClose={closeSpy}
+                closeButtonLabel="custom close label"
+                title="Title"
+                description="Description"
+            />
+        </ThemeContextProvider>
+    );
+
+    const closeButton = await screen.findByRole('button', {name: 'custom close label'});
+    await userEvent.click(closeButton);
+    expect(closeSpy).toHaveBeenCalledTimes(1);
+});
diff --git a/src/__tests__/display-media-card-test.tsx b/src/__tests__/display-media-card-test.tsx
@@ -6,6 +6,7 @@ import ThemeContextProvider from '../theme-context-provider';
 import Tag from '../tag';
 import Stack from '../stack';
 import {Text2} from '../text';
+import userEvent from '@testing-library/user-event';
 
 test('DisplayMediaCard "href" label', async () => {
     render(
@@ -75,3 +76,23 @@ test('DisplayMediaCard "onPress" label', async () => {
 
     await screen.findByRole('button', {name: 'Title Headline Pretitle Description Extra line 1Extra line 2'});
 });
+
+test('DisplayMediaCard onClose custom label', async () => {
+    const closeSpy = jest.fn();
+
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <DisplayMediaCard
+                onClose={closeSpy}
+                closeButtonLabel="custom close label"
+                title="Title"
+                description="Description"
+                backgroundImage="https://source.unsplash.com/900x900/"
+            />
+        </ThemeContextProvider>
+    );
+
+    const closeButton = await screen.findByRole('button', {name: 'custom close label'});
+    await userEvent.click(closeButton);
+    expect(closeSpy).toHaveBeenCalledTimes(1);
+});
diff --git a/src/__tests__/media-card-test.tsx b/src/__tests__/media-card-test.tsx
@@ -7,6 +7,7 @@ import Tag from '../tag';
 import Stack from '../stack';
 import Image from '../image';
 import {Text2} from '../text';
+import userEvent from '@testing-library/user-event';
 
 test('MediaCard "href" label', async () => {
     render(
@@ -85,3 +86,23 @@ test('MediaCard "onPress" label', async () => {
         name: 'Title Headline Pretitle Subtitle Description Extra line 1Extra line 2',
     });
 });
+
+test('MediaCard onClose custom label', async () => {
+    const closeSpy = jest.fn();
+
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <MediaCard
+                onClose={closeSpy}
+                closeButtonLabel="custom close label"
+                title="Title"
+                description="Description"
+                media={<Image src="https://source.unsplash.com/900x900/" />}
+            />
+        </ThemeContextProvider>
+    );
+
+    const closeButton = await screen.findByRole('button', {name: 'custom close label'});
+    await userEvent.click(closeButton);
+    expect(closeSpy).toHaveBeenCalledTimes(1);
+});
diff --git a/src/__tests__/naked-card-test.tsx b/src/__tests__/naked-card-test.tsx
@@ -7,6 +7,7 @@ import Tag from '../tag';
 import Stack from '../stack';
 import Image from '../image';
 import {Text2} from '../text';
+import userEvent from '@testing-library/user-event';
 
 test('NakedCard "href" label', async () => {
     render(
@@ -86,6 +87,26 @@ test('NakedCard "onPress" label', async () => {
     });
 });
 
+test('NakedCard onClose custom label', async () => {
+    const closeSpy = jest.fn();
+
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <NakedCard
+                onClose={closeSpy}
+                closeButtonLabel="custom close label"
+                title="Title"
+                description="Description"
+                media={<Image src="https://source.unsplash.com/900x900/" />}
+            />
+        </ThemeContextProvider>
+    );
+
+    const closeButton = await screen.findByRole('button', {name: 'custom close label'});
+    await userEvent.click(closeButton);
+    expect(closeSpy).toHaveBeenCalledTimes(1);
+});
+
 test('SmallNakedCard "href" label', async () => {
     render(
         <ThemeContextProvider theme={makeTheme()}>

diff --git a/src/__tests__/popover-test.tsx b/src/__tests__/popover-test.tsx
@@ -140,3 +140,16 @@ test('popover - uncontrolled', async () => {
         expect(screen.queryByText('Content')).not.toBeInTheDocument();
     });
 });
+
+test('popover- close button label is customizable', async () => {
+    render(<TestPopover title="Title" closeButtonLabel="custom close label" />);
+
+    const target = screen.getByText('Press me!');
+
+    // Initially closed, the button is not visible
+    expect(screen.queryByLabelText('custom close label')).not.toBeInTheDocument();
+
+    // Opened after click on target, the button is visible
+    fireEvent.click(target);
+    expect(screen.getByLabelText('custom close label')).toBeInTheDocument();
+});
diff --git a/src/__tests__/poster-card-test.tsx b/src/__tests__/poster-card-test.tsx
@@ -5,6 +5,7 @@ import {render, screen} from '@testing-library/react';
 import ThemeContextProvider from '../theme-context-provider';
 import Stack from '../stack';
 import {Text2} from '../text';
+import userEvent from '@testing-library/user-event';
 
 test('PosterCard "href" label', async () => {
     render(
@@ -83,3 +84,24 @@ test('PosterCard "onPress" label', async () => {
         name: 'Title Headline Pretitle Subtitle Description Extra line 1Extra line 2',
     });
 });
+
+test('PosterCard onClose custom label', async () => {
+    const closeSpy = jest.fn();
+
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <PosterCard
+                onClose={closeSpy}
+                closeButtonLabel="custom close label"
+                onPress={() => {}}
+                isInverse
+                title="Title"
+                description="Description"
+            />
+        </ThemeContextProvider>
+    );
+
+    const closeButton = await screen.findByRole('button', {name: 'custom close label'});
+    await userEvent.click(closeButton);
+    expect(closeSpy).toHaveBeenCalledTimes(1);
+});
diff --git a/src/__tests__/snackbar-test.tsx b/src/__tests__/snackbar-test.tsx
@@ -77,6 +77,32 @@ test('Snackbar with dismiss button', async () => {
     });
 });
 
+test('Snackbar with dismiss button and custom label', async () => {
+    const onCloseSpy = jest.fn();
+
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <Snackbar
+                message="Some message"
+                onClose={onCloseSpy}
+                buttonText="Action"
+                closeButtonLabel="custom close label"
+                duration={Infinity}
+                withDismiss
+            />
+        </ThemeContextProvider>
+    );
+    expect(screen.getByText('Some message')).toBeInTheDocument();
+    const dismissButton = await screen.findByRole('button', {name: 'custom close label'});
+    expect(dismissButton).toBeInTheDocument();
+
+    await userEvent.click(dismissButton);
+
+    await waitFor(() => {
+        expect(onCloseSpy).toHaveBeenCalledWith({action: 'DISMISS'});
+    });
+});
+
 test('Snackbar does not have dismiss button by default', async () => {
     render(
         <ThemeContextProvider theme={makeTheme()}>

diff --git a/src/callout.tsx b/src/callout.tsx
@@ -25,6 +25,7 @@ type Props = {
     titleAs?: HeadingType;
     description: string;
     onClose?: () => void;
+    closeButtonLabel?: string;
     icon?: React.ReactElement;
     button?: RendersNullableElement<typeof ButtonPrimary>;
     secondaryButton?: RendersNullableElement<typeof ButtonSecondary>;
@@ -41,6 +42,7 @@ const Callout: React.FC<Props> = ({
     description,
     icon,
     onClose,
+    closeButtonLabel,
     button,
     secondaryButton,
     buttonLink,
@@ -105,7 +107,7 @@ const Callout: React.FC<Props> = ({
                                 bleedRight
                                 Icon={IconCloseRegular}
                                 onPress={onClose}
-                                aria-label={texts.closeButtonLabel}
+                                aria-label={closeButtonLabel ?? texts.closeButtonLabel}
                             />
                         </div>
                     )}