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

@@ -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>;
   }
 }
 

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>
 `;

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);
   });