From e846642ba5ccedefe464b1989207383586d9cbb5 Mon Sep 17 00:00:00 2001
From: Poltergeist <philipph@mesosphere.io>
Date: Wed, 18 Apr 2018 17:18:57 +0200
Subject: [PATCH] fix(buttonbadge): change form button to button role

This changes the the element from a button to a span and is adding the `role="button"` attribute to
the element.
---
 packages/badge/components/badgeButton.tsx     |  3 +-
 .../__snapshots__/badgeButton.test.tsx.snap   | 35 +++++++++++--------
 packages/badge/tests/badgeButton.test.tsx     |  2 +-
 3 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/packages/badge/components/badgeButton.tsx b/packages/badge/components/badgeButton.tsx
index e885b3d23..2e9894170 100644
--- a/packages/badge/components/badgeButton.tsx
+++ b/packages/badge/components/badgeButton.tsx
@@ -30,6 +30,7 @@ export class BadgeButton extends React.PureComponent<IBadgeButtonProps, {}> {
     const { appearance, children, onClick, tabIndex } = this.props;
     const props = {
       onClick,
+      role: "button",
       tabIndex,
       className: css`
         outline: none;
@@ -38,7 +39,7 @@ export class BadgeButton extends React.PureComponent<IBadgeButtonProps, {}> {
       `
     };
 
-    return <button {...props}>{children}</button>;
+    return <span {...props}>{children}</span>;
   }
 }
 
diff --git a/packages/badge/tests/__snapshots__/badgeButton.test.tsx.snap b/packages/badge/tests/__snapshots__/badgeButton.test.tsx.snap
index b97b46c1b..0321d3253 100644
--- a/packages/badge/tests/__snapshots__/badgeButton.test.tsx.snap
+++ b/packages/badge/tests/__snapshots__/badgeButton.test.tsx.snap
@@ -1,73 +1,80 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BadgeButton accept jsx as children 1`] = `
-<button
+<span
   className="css-y5qucr"
   onClick={[Function]}
+  role="button"
   tabIndex={-1}
 >
   <span>
     string
   </span>
-</button>
+</span>
 `;
 
 exports[`BadgeButton danger 1`] = `
-<button
+<span
   className="css-aqlru0"
   onClick={[Function]}
+  role="button"
   tabIndex={-1}
 >
   danger
-</button>
+</span>
 `;
 
 exports[`BadgeButton default 1`] = `
-<button
+<span
   className="css-y5qucr"
   onClick={[Function]}
+  role="button"
   tabIndex={-1}
 >
   default
-</button>
+</span>
 `;
 
 exports[`BadgeButton outline 1`] = `
-<button
+<span
   className="css-j343ve"
   onClick={[Function]}
+  role="button"
   tabIndex={-1}
 >
   outline
-</button>
+</span>
 `;
 
 exports[`BadgeButton primary 1`] = `
-<button
+<span
   className="css-q2731u"
   onClick={[Function]}
+  role="button"
   tabIndex={-1}
 >
   primary
-</button>
+</span>
 `;
 
 exports[`BadgeButton success 1`] = `
-<button
+<span
   className="css-10v0ttp"
   onClick={[Function]}
+  role="button"
   tabIndex={-1}
 >
   success
-</button>
+</span>
 `;
 
 exports[`BadgeButton warning 1`] = `
-<button
+<span
   className="css-1qzzy6w"
   onClick={[Function]}
+  role="button"
   tabIndex={-1}
 >
   warning
-</button>
+</span>
 `;
diff --git a/packages/badge/tests/badgeButton.test.tsx b/packages/badge/tests/badgeButton.test.tsx
index 63b679336..ce52330eb 100644
--- a/packages/badge/tests/badgeButton.test.tsx
+++ b/packages/badge/tests/badgeButton.test.tsx
@@ -93,7 +93,7 @@ describe("BadgeButton", () => {
         default
       </BadgeButton>
     );
-    const element = wrapper.find("button").props();
+    const element = wrapper.find("span").props();
     expect(element.tabIndex).toBe(10);
   });