:art:

9 files changed, 21 insertions, 12 deletions

diff --git a/src/client/components/channel-follow-button.vue b/src/client/components/channel-follow-button.vue
index 6f9405b97f..bd8627f6e8 100644
--- a/src/client/components/channel-follow-button.vue
+++ b/src/client/components/channel-follow-button.vue
@@ -91,7 +91,7 @@ export default defineComponent({
 		width: 31px;
 	}
 
-	&:focus {
+	&:focus-visible {
 		&:after {
 			content: "";
 			pointer-events: none;
diff --git a/src/client/components/emoji-picker-window.vue b/src/client/components/emoji-picker-window.vue
index 53b6ae6b32..b7b884565b 100644
--- a/src/client/components/emoji-picker-window.vue
+++ b/src/client/components/emoji-picker-window.vue
@@ -153,7 +153,7 @@ export default defineComponent({
 					height: var(--eachSize);
 					border-radius: 4px;
 
-					&:focus {
+					&:focus-visible {
 						outline: solid 2px var(--focus);
 						z-index: 1;
 					}
diff --git a/src/client/components/emoji-picker.vue b/src/client/components/emoji-picker.vue
index d8703202c7..85a12a08e6 100644
--- a/src/client/components/emoji-picker.vue
+++ b/src/client/components/emoji-picker.vue
@@ -465,7 +465,7 @@ export default defineComponent({
 					height: var(--eachSize);
 					border-radius: 4px;
 
-					&:focus {
+					&:focus-visible {
 						outline: solid 2px var(--focus);
 						z-index: 1;
 					}
diff --git a/src/client/components/follow-button.vue b/src/client/components/follow-button.vue
index 5685b86a51..5eba9b1f6b 100644
--- a/src/client/components/follow-button.vue
+++ b/src/client/components/follow-button.vue
@@ -161,7 +161,7 @@ export default defineComponent({
 		width: 31px;
 	}
 
-	&:focus {
+	&:focus-visible {
 		&:after {
 			content: "";
 			pointer-events: none;
diff --git a/src/client/components/media-caption.vue b/src/client/components/media-caption.vue
index 73eba23025..b35b101d06 100644
--- a/src/client/components/media-caption.vue
+++ b/src/client/components/media-caption.vue
@@ -206,7 +206,7 @@ export default defineComponent({
 		min-width: 100%;
 		min-height: 90px;
 
-		&:focus {
+		&:focus-visible {
 			outline: none;
 		}
 
diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index 9fa986836d..3b07884cee 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -888,7 +888,7 @@ export default defineComponent({
 	//content-visibility: auto;
   //contain-intrinsic-size: 0 128px;
 
-	&:focus {
+	&:focus-visible {
 		outline: none;
 
 		&:after {
diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue
index 657053cc93..4ec09e76db 100644
--- a/src/client/components/post-form.vue
+++ b/src/client/components/post-form.vue
@@ -819,7 +819,7 @@ export default defineComponent({
 			color: var(--fg);
 			font-family: inherit;
 
-			&:focus {
+			&:focus-visible {
 				outline: none;
 			}
 
diff --git a/src/client/components/ui/button.vue b/src/client/components/ui/button.vue
index 6e3cd485c8..53b973fe55 100644
--- a/src/client/components/ui/button.vue
+++ b/src/client/components/ui/button.vue
@@ -1,7 +1,7 @@
 <template>
 <component class="bghgjjyj _button"
 	:is="link ? 'MkA' : 'button'"
-	:class="{ inline, primary, danger, full }"
+	:class="{ inline, primary, danger, rounded, full }"
 	:type="type"
 	@click="$emit('click', $event)"
 	@mousedown="onMousedown"
@@ -27,6 +27,11 @@ export default defineComponent({
 			required: false,
 			default: false
 		},
+		rounded: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 		inline: {
 			type: Boolean,
 			required: false,
@@ -124,8 +129,8 @@ export default defineComponent({
 	box-shadow: none;
 	text-decoration: none;
 	background: var(--buttonBg);
-	border-radius: 999px;
-	overflow: hidden;
+	border-radius: 4px;
+	overflow: clip;
 	box-sizing: border-box;
 	transition: background 0.1s ease;
 
@@ -141,6 +146,10 @@ export default defineComponent({
 		width: 100%;
 	}
 
+	&.rounded {
+		border-radius: 999px;
+	}
+
 	&.primary {
 		font-weight: bold;
 		color: var(--fgOnAccent) !important;
@@ -176,7 +185,7 @@ export default defineComponent({
 		opacity: 0.7;
 	}
 
-	&:focus {
+	&:focus-visible {
 		outline: solid 2px var(--focus);
 		outline-offset: 2px;
 	}
diff --git a/src/client/components/ui/menu.vue b/src/client/components/ui/menu.vue
index 26b4b04b11..d1cf4f2db8 100644
--- a/src/client/components/ui/menu.vue
+++ b/src/client/components/ui/menu.vue
@@ -206,7 +206,7 @@ export default defineComponent({
 			background: var(--accentDarken);
 		}
 
-		&:not(:active):focus {
+		&:not(:active):focus-visible {
 			box-shadow: 0 0 0 2px var(--focus) inset;
 		}