From 7edc4b5fefe520b4022642053e81fbc2be1f5ffd Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 15 May 2024 12:50:33 +0300
Subject: [PATCH] Focus visuals for tabpanel

---
 components/lib/tabs/style/TabsStyle.js   | 6 ++++++
 components/lib/themes/aura/tabs/index.js | 9 ++++++++-
 components/lib/themes/lara/tabs/index.js | 9 ++++++++-
 components/lib/themes/nora/tabs/index.js | 9 ++++++++-
 4 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/components/lib/tabs/style/TabsStyle.js b/components/lib/tabs/style/TabsStyle.js
index bc85b64b9..acdfda0b7 100644
--- a/components/lib/tabs/style/TabsStyle.js
+++ b/components/lib/tabs/style/TabsStyle.js
@@ -115,6 +115,12 @@ const theme = ({ dt }) => `
     outline: 0 none;
 }
 
+.p-tabpanel:focus-visible {
+    box-shadow: ${dt('tabs.tabpanel.focus.ring.shadow')};
+    outline: ${dt('tabs.tabpanel.focus.ring.width')} ${dt('tabs.tabpanel.focus.ring.style')} ${dt('tabs.tabpanel.focus.ring.color')};
+    outline-offset: ${dt('tabs.tabpanel.focus.ring.offset')};
+}
+
 .p-tablist-active-bar {
     z-index: 1;
     display: block;
diff --git a/components/lib/themes/aura/tabs/index.js b/components/lib/themes/aura/tabs/index.js
index 27a9f707e..be358294c 100644
--- a/components/lib/themes/aura/tabs/index.js
+++ b/components/lib/themes/aura/tabs/index.js
@@ -30,7 +30,14 @@ export default {
     tabpanel: {
         background: '{content.background}',
         color: '{content.color}',
-        padding: '0.875rem 1.125rem 1.125rem 1.125rem'
+        padding: '0.875rem 1.125rem 1.125rem 1.125rem',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: 'inset {focus.ring.shadow}'
+        }
     },
     navButton: {
         background: '{content.background}',
diff --git a/components/lib/themes/lara/tabs/index.js b/components/lib/themes/lara/tabs/index.js
index 127659826..24f4f9cca 100644
--- a/components/lib/themes/lara/tabs/index.js
+++ b/components/lib/themes/lara/tabs/index.js
@@ -26,7 +26,14 @@ export default {
     tabpanel: {
         background: '{content.background}',
         color: '{content.color}',
-        padding: '0.875rem 1.125rem 1.125rem 1.125rem'
+        padding: '0.875rem 1.125rem 1.125rem 1.125rem',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: 'inset {focus.ring.shadow}'
+        }
     },
     navButton: {
         background: '{content.background}',
diff --git a/components/lib/themes/nora/tabs/index.js b/components/lib/themes/nora/tabs/index.js
index dec18ad71..57d4d196a 100644
--- a/components/lib/themes/nora/tabs/index.js
+++ b/components/lib/themes/nora/tabs/index.js
@@ -29,7 +29,14 @@ export default {
     tabpanel: {
         background: '{content.background}',
         color: '{content.color}',
-        padding: '0.875rem 1.125rem 1.125rem 1.125rem'
+        padding: '0.875rem 1.125rem 1.125rem 1.125rem',
+        focusRing: {
+            width: '{focus.ring.width}',
+            style: '{focus.ring.style}',
+            color: '{focus.ring.color}',
+            offset: '{focus.ring.offset}',
+            shadow: 'inset {focus.ring.shadow}'
+        }
     },
     navButton: {
         background: '{content.background}',