From 8a33a07cb1872df5acd1c429b5b9727a73f1eeaf Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Fri, 25 Apr 2025 10:21:56 +0100
Subject: [PATCH] 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
---
 ...e-26505-keyboard-accssibility-to-activites |  1 +
 .../components/ActivityItem/ActivityItem.tsx  | 17 +++++++---
 frontend/components/ActivityItem/_styles.scss | 31 ++++++++++++-------
 3 files changed, 34 insertions(+), 15 deletions(-)
 create mode 100644 changes/issue-26505-keyboard-accssibility-to-activites

diff --git a/changes/issue-26505-keyboard-accssibility-to-activites b/changes/issue-26505-keyboard-accssibility-to-activites
new file mode 100644
index 0000000000..d028308ba5
--- /dev/null
+++ b/changes/issue-26505-keyboard-accssibility-to-activites
@@ -0,0 +1 @@
+- add keyboard accessibility controls to activities on dashboard and host details pages
diff --git a/frontend/components/ActivityItem/ActivityItem.tsx b/frontend/components/ActivityItem/ActivityItem.tsx
index 34df4fadc0..6c9656baef 100644
--- a/frontend/components/ActivityItem/ActivityItem.tsx
+++ b/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>
   );
 };
diff --git a/frontend/components/ActivityItem/_styles.scss b/frontend/components/ActivityItem/_styles.scss
index 9ec63722c3..ddabcd25f5 100644
--- a/frontend/components/ActivityItem/_styles.scss
+++ b/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 {