refactor(tag): Refactor tag with the clickable div element (#145)

* refactor(tag): Refactor tag with the clickable div element

* refactor(tag): Refactor Tag with keyboardEventConstants

* refactor(tag): Add line breaks

src/tag/Tag.tsx

@@ -1,12 +1,11 @@
+import "./_tag.scss";
+
 import CloseIcon from "../ui/icons/close.svg";
 
 import React from "react";
 import classNames from "classnames";
 
-import Button from "../button/Button";
-
-// SCSS import is moved here to override Button styles without nesting
-import "./_tag.scss";
+import {KEYBOARD_EVENT_KEY} from "../core/utils/keyboard/keyboardEventConstants";
 
 export interface TagShape<Context = any> {
   id: string;
@@ -27,11 +26,13 @@ function Tag({testid, tag, onRemove, customClassName}: TagProps) {
   });
 
   return (
-    <Button
-      testid={testid}
-      customClassName={containerClassName}
-      onClick={handleRemove}
-      shouldStopPropagation={true}>
+    <div
+      role={"button"}
+      tabIndex={0}
+      data-testid={testid}
+      onKeyDown={handleKeyPress}
+      className={containerClassName}
+      onClick={handleRemove}>
       <div className={"tag__body"}>{tag.content}</div>
 
       {onRemove && (
@@ -41,14 +42,28 @@ function Tag({testid, tag, onRemove, customClassName}: TagProps) {
           aria-hidden={true}
         />
       )}
-    </Button>
+    </div>
   );
 
   function handleRemove() {
     if (onRemove) {
       onRemove(tag);
     }
   }
+
+  function handleKeyPress(event: React.KeyboardEvent<HTMLDivElement>) {
+    event.stopPropagation();
+
+    switch (event.key) {
+      case KEYBOARD_EVENT_KEY.ENTER:
+      case KEYBOARD_EVENT_KEY.BACKSPACE:
+        handleRemove();
+        break;
+
+      default:
+        break;
+    }
+  }
 }
 
 export default Tag;

src/tag/_tag.scss

@@ -23,6 +23,8 @@
 }
 
 .tag--is-removable {
+  cursor: pointer;
+
   &:hover {
     path {
       stroke: var(--text-color);