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