Clickable tags use HMTL button

Tags that open modals or trigger other actions need to be accessible for keyboard and assistive technologies.

gradle/changelog/accessible_clickable_tags.yaml

@@ -0,0 +1,2 @@
+- type: changed
+  description: Clickable tags are based on the HTML button.

scm-ui/ui-components/src/Tag.tsx

@@ -45,7 +45,7 @@ const Tag: FC<Props> = ({
   title,
   onClick,
   onRemove,
-  children
+  children,
 }) => {
   const [t] = useTranslation("commons");
 
@@ -53,7 +53,7 @@ const Tag: FC<Props> = ({
   if (icon) {
     showIcon = (
       <>
-        <i className={classNames("fas", `fa-${icon}`)} />
+        <i className={classNames("fas", `fa-${icon}`)} aria-hidden="true" />
         &nbsp;
       </>
     );
@@ -65,26 +65,44 @@ const Tag: FC<Props> = ({
 
   return (
     <>
-      <span
-        className={classNames(
-          "tag",
-          `is-${color}`,
-          `is-${size}`,
-          className,
-          {
-            "is-outlined": outlined,
-            "is-rounded": rounded,
-            "is-clickable": onClick
-          },
-          size === "small" && smallClassNames
-        )}
-        title={title}
-        onClick={onClick}
-      >
-        {showIcon}
-        {label}
-        {children}
-      </span>
+      {onClick === undefined ? (
+        <span
+          className={classNames(
+            "tag",
+            `is-${color}`,
+            `is-${size}`,
+            className,
+            {
+              "is-outlined": outlined,
+              "is-rounded": rounded,
+            },
+            size === "small" && smallClassNames
+          )}
+        >
+          {showIcon}
+          {label}
+          {children}
+        </span>
+      ) : (
+        <button
+          className={classNames(
+            "tag",
+            `is-${color}`,
+            `is-${size}`,
+            className,
+            {
+              "is-outlined": outlined,
+              "is-rounded": rounded,
+            },
+            size === "small" && smallClassNames
+          )}
+          onClick={onClick}
+        >
+          {showIcon}
+          {label}
+          {children}
+        </button>
+      )}
       {showDelete}
     </>
   );

scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap

@@ -77735,6 +77735,13 @@ exports[`Storyshots Secondary Navigation Active when match 1`] = `
           onClick={[Function]}
           type="button"
         >
+          <i
+            className="SecondaryNavigation__Icon-sc-8p1rgi-1 gqxbcY is-medium"
+          >
+            <i
+              className="fas fa-caret-down"
+            />
+          </i>
           Hitchhiker
         </button>
         <ul
@@ -84523,12 +84530,12 @@ exports[`Storyshots Tag Clickable 1`] = `
 <div
   className="Tagstories__Wrapper-sc-wsn8kx-0 TvLrx"
 >
-  <span
-    className="tag is-light is-normal is-clickable"
+  <button
+    className="tag is-light is-normal"
     onClick={[Function]}
   >
     Click here
-  </span>
+  </button>
 </div>
 `;
 
@@ -84744,6 +84751,7 @@ exports[`Storyshots Tag With Icon 1`] = `
     className="tag is-light is-normal"
   >
     <i
+      aria-hidden="true"
       className="fas fa-bolt"
     />
      
@@ -84758,7 +84766,6 @@ exports[`Storyshots Tag With title 1`] = `
 >
   <span
     className="tag is-light is-normal"
-    title="good job"
   >
     hover me
   </span>