From 9ea8a354c5883e595e3907733a9d520dce720b70 Mon Sep 17 00:00:00 2001
From: Carl Schwan <carl@carlschwan.eu>
Date: Wed, 30 Mar 2022 17:07:27 +0200
Subject: [PATCH 1/2] Add button-vue to Actions internal button

This makes sure that the legacy theme is not applied to it and also fix
one accesibility issue by adding a focus style.

Signed-off-by: Carl Schwan <carl@carlschwan.eu>
---
 src/components/Actions/Actions.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Actions/Actions.vue b/src/components/Actions/Actions.vue
index d12614934b..c53b542279 100644
--- a/src/components/Actions/Actions.vue
+++ b/src/components/Actions/Actions.vue
@@ -178,7 +178,7 @@ export default {
 			<template #trigger>
 				<button ref="menuButton"
 					:disabled="disabled"
-					class="icon action-item__menutoggle"
+					class="icon vue-button action-item__menutoggle"
 					:class="{
 						[defaultIcon]: !iconSlotIsPopulated,
 						'action-item__menutoggle--with-title': menuTitle,

From f21cbbea40a4b5b9c18e53ad96f70fe6cbf3f165 Mon Sep 17 00:00:00 2001
From: Carl Schwan <carl@carlschwan.eu>
Date: Wed, 30 Mar 2022 17:10:04 +0200
Subject: [PATCH 2/2] Apply the tabbed style for button with :focus-visible

Makes it easier to debug with the web inspector and is also more correct
since it when display the focus style when the browser is asking for it.

Signed-off-by: Carl Schwan <carl@carlschwan.eu>
---
 src/components/Button/Button.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
index d32c337dd3..8b1a51b8fb 100644
--- a/src/components/Button/Button.vue
+++ b/src/components/Button/Button.vue
@@ -507,7 +507,7 @@ export default {
 	// We use box-shadow around our buttons instead of an outline, so that the added "border"
 	// coincides with the border of the element. It's not possible to add a border-radius to
 	// the outline
-	&--tabbed {
+	&--tabbed, &:focus-visible {
 		box-shadow: 0 0 0 2px var(--color-main-text);
 		background-color: var(--color-primary-light-hover);
 		&.button-vue--vue-primary {