Add keyboard accessibility controls to the activity items on host details and dashboard pages (#28433)

For [#26505](https://github.com/fleetdm/fleet/issues/26505)

This adds keyboard a11y controls to the activity items. We use a button
element for the clickable area around a button as this gives us all the
default keyboard control functionality out of the box.

https://www.loom.com/share/311d684c5df145d1b32b83c8c0285133

- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
See [Changes
files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/Committing-Changes.md#changes-files)
for more information.
- [x] Manual QA for all new/changed functionality

changes/issue-26505-keyboard-accssibility-to-activites

@@ -0,0 +1 @@
+- add keyboard accessibility controls to activities on dashboard and host details pages

frontend/components/ActivityItem/ActivityItem.tsx

@@ -113,7 +113,10 @@ const ActivityItem = ({
     [`${baseClass}__no-details`]: hideShowDetails,
   });
 
-  const onShowActivityDetails = () => {
+  const onShowActivityDetails = (e: React.MouseEvent<HTMLButtonElement>) => {
+    // added this stopPropagation to as there is some weirdness around the event
+    // bubbling up and calling the Modals onEnter handler.
+    e.stopPropagation();
     onShowDetails({ type: activity.type, details: activity.details });
   };
 
@@ -137,7 +140,8 @@ const ActivityItem = ({
         />
         <div className={`${baseClass}__avatar-lower-dash`} />
       </div>
-      <div
+      <button
+        disabled={hideShowDetails}
         className={`${baseClass}__details-wrapper`}
         onClick={onShowActivityDetails}
       >
@@ -168,12 +172,17 @@ const ActivityItem = ({
         </div>
         <div className={`${baseClass}__details-actions`}>
           {!hideShowDetails && (
-            <Button variant="icon" onClick={onShowActivityDetails}>
+            <Button
+              className={`${baseClass}__action-button`}
+              variant="icon"
+              onClick={onShowActivityDetails}
+            >
               <Icon name="info-outline" />
             </Button>
           )}
           {!hideCancel && (
             <Button
+              className={`${baseClass}__action-button`}
               variant="icon"
               onClick={onCancelActivity}
               disabled={disableCancel}
@@ -186,7 +195,7 @@ const ActivityItem = ({
             </Button>
           )}
         </div>
-      </div>
+      </button>
     </div>
   );
 };

frontend/components/ActivityItem/_styles.scss

@@ -36,6 +36,7 @@
   }
 
   &__details-wrapper {
+    all: unset; // reset of all browser default button styles.
     display: flex;
     gap: $pad-medium;
     justify-content: space-between;
@@ -45,6 +46,20 @@
     padding: $pad-small;
     margin-bottom: $pad-large;
 
+    &:focus {
+      outline: 2px solid $ui-vibrant-blue-25;
+    }
+
+    &:hover, &:focus, &:focus-within {
+      border-radius: $border-radius-large;
+      background-color: $ui-off-white;
+      cursor: pointer;
+
+      .activity-item__action-button {
+        visibility: visible;
+      }
+    }
+
     .premium-icon-tip {
       position: relative;
       top: 4px;
@@ -56,16 +71,6 @@
       line-height: 16px;
     }
 
-    &:hover {
-      border-radius: $border-radius-large;
-      background-color: $ui-off-white;
-      cursor: pointer;
-
-      .activity-item__details-actions {
-        visibility: visible;
-      }
-    }
-
     .button {
       height: 16px;
 
@@ -76,11 +81,15 @@
   }
 
   &__details-actions {
-    visibility: hidden;
     display: flex;
     gap: $pad-medium;
   }
 
+  &__action-button {
+    visibility: hidden;
+  }
+
+
   &__close-icon {
     cursor: pointer;
     &:hover {