diff --git a/shell/assets/styles/base/_mixins.scss b/shell/assets/styles/base/_mixins.scss
index 6e1496b3023..01b9be2c4cb 100755
--- a/shell/assets/styles/base/_mixins.scss
+++ b/shell/assets/styles/base/_mixins.scss
@@ -160,3 +160,8 @@
// Focus for form like elements (not to be confused with basic :focus style)
outline: 2px solid var(--primary-keyboard-focus);
}
+
+@mixin focus-outline-primary {
+ // Focus for form like elements (not to be confused with basic :focus style)
+ outline: 2px solid var(--body-bg);
+}
\ No newline at end of file
diff --git a/shell/assets/styles/global/_button.scss b/shell/assets/styles/global/_button.scss
index 3adb58c6732..556b88adf32 100644
--- a/shell/assets/styles/global/_button.scss
+++ b/shell/assets/styles/global/_button.scss
@@ -77,6 +77,11 @@ button,
background-color: var(--primary-hover-bg);
color: var(--primary-text);
}
+
+ &:focus-visible {
+ @include focus-outline-primary;
+ outline-offset: -2px;
+ }
}
.role-secondary {
@@ -138,6 +143,12 @@ button,
border: solid thin var(--primary);
color: var(--primary);
border-radius: 2px;
+
+
+ &:focus-visible {
+ @include focus-outline-primary;
+ outline-offset: -2px;
+ }
}
.icon-group i {
diff --git a/shell/components/Tabbed/index.vue b/shell/components/Tabbed/index.vue
index 7c3a5be5def..71bd35fa4a7 100644
--- a/shell/components/Tabbed/index.vue
+++ b/shell/components/Tabbed/index.vue
@@ -278,7 +278,10 @@ export default {
:aria-controls="'#' + tab.name"
:aria-selected="tab.active"
role="tab"
+ tabindex="0"
@click.prevent="select(tab.name, $event)"
+ @keyup.enter="select(tab.name, $event)"
+ @keyup.space="select(tab.name, $event)"
>
{{ tab.labelDisplay }}