From bfde8ee6030fe829c906fe127baadee127594ac7 Mon Sep 17 00:00:00 2001
From: Yaelle Chaudy <42030685+yaelleC@users.noreply.github.com>
Date: Tue, 8 Mar 2022 12:41:00 +0100
Subject: [PATCH] A11y : Updated EmptyListCTA to switch between Button and
 LinkButton (#46292)

* Updated EmptyListCTA to switch between Button and LinkButton

* Added tests
---
 .../EmptyListCTA/EmptyListCTA.test.tsx         | 18 ++++++++++++++++++
 .../components/EmptyListCTA/EmptyListCTA.tsx   |  9 +++++----
 2 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 public/app/core/components/EmptyListCTA/EmptyListCTA.test.tsx

diff --git a/public/app/core/components/EmptyListCTA/EmptyListCTA.test.tsx b/public/app/core/components/EmptyListCTA/EmptyListCTA.test.tsx
new file mode 100644
index 00000000000..35d720e70cf
--- /dev/null
+++ b/public/app/core/components/EmptyListCTA/EmptyListCTA.test.tsx
@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import EmptyListCTA from './EmptyListCTA';
+
+describe('EmptyListCTA', () => {
+  it('should return a button element if there is no buttonLink prop', () => {
+    render(<EmptyListCTA title="title" buttonIcon="plus" buttonTitle="button title" />);
+
+    expect(screen.getByRole('button', { name: 'button title' }));
+  });
+
+  it('should return an anchor element if there is a buttonLink prop', () => {
+    render(<EmptyListCTA title="title" buttonIcon="plus" buttonLink="href" buttonTitle="button title" />);
+
+    expect(screen.getByRole('link', { name: 'button title' }));
+  });
+});
diff --git a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
index a8c7220fcee..9dd81f6c69d 100644
--- a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
+++ b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
@@ -1,7 +1,7 @@
-import React, { MouseEvent } from 'react';
 import { css } from '@emotion/css';
-import { CallToActionCard, Icon, IconName, LinkButton } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
+import { Button, CallToActionCard, Icon, IconName, LinkButton } from '@grafana/ui';
+import React, { MouseEvent } from 'react';
 
 export interface Props {
   title: string;
@@ -75,8 +75,9 @@ const EmptyListCTA: React.FunctionComponent<Props> = ({
       `
     : '';
 
+  const ButtonEl = buttonLink ? LinkButton : Button;
   const ctaElement = (
-    <LinkButton
+    <ButtonEl
       size="lg"
       onClick={onClick}
       href={buttonLink}
@@ -86,7 +87,7 @@ const EmptyListCTA: React.FunctionComponent<Props> = ({
       disabled={buttonDisabled}
     >
       {buttonTitle}
-    </LinkButton>
+    </ButtonEl>
   );
 
   return <CallToActionCard className={ctaStyle} message={title} footer={footer()} callToActionElement={ctaElement} />;