From 972bd239915fe8f0fee4311e019b34f954925bf6 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 28 Apr 2026 23:41:30 +0300
Subject: [PATCH] add actiongroup focus

---
 src/components/ActionsGroup/ActionsGroup.less | 11 ++++++++++-
 src/components/ActionsGroup/ActionsGroup.tsx  |  1 +
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/ActionsGroup/ActionsGroup.less b/src/components/ActionsGroup/ActionsGroup.less
index 09e903435..b360ebdad 100644
--- a/src/components/ActionsGroup/ActionsGroup.less
+++ b/src/components/ActionsGroup/ActionsGroup.less
@@ -27,18 +27,27 @@
         width: @width;
         padding: 0 1rem;
         cursor: pointer;
+        border-radius: 2rem;
+        outline: none;
 
         .icon {
             width: calc(@width / 2);
             height: calc(@height / 2);
             color: var(--primary-foreground-color);
             opacity: 0.7;
+        }
 
-            &:hover {
+        &:hover, &:focus {
+            .icon {
                 opacity: 1;
             }
         }
 
+        &:focus-visible {
+            outline: 2px solid var(--primary-foreground-color);
+            outline-offset: -2px;
+        }
+
         &.disabled {
             pointer-events: none;
         }
diff --git a/src/components/ActionsGroup/ActionsGroup.tsx b/src/components/ActionsGroup/ActionsGroup.tsx
index 052f25016..844efd3d0 100644
--- a/src/components/ActionsGroup/ActionsGroup.tsx
+++ b/src/components/ActionsGroup/ActionsGroup.tsx
@@ -28,6 +28,7 @@ const ActionsGroup = ({ items, className }: Props) => {
                     <div
                         key={index}
                         className={classNames(styles['icon-container'], item.className, { [styles['disabled']]: item.disabled })}
+                        tabIndex={0}
                         onClick={item.onClick}
                     >
                         {