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}',