From 6afa2d138583d5d740e2caa6091b71bf6118ca00 Mon Sep 17 00:00:00 2001
From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com>
Date: Tue, 15 Oct 2024 10:00:31 -0700
Subject: [PATCH] Desktop: Accessibility: Make keyboard focus visible for
 dropdowns (#11177)

---
 .../controls/SettingComponent.tsx             |  9 +--------
 .../gui/ConfigScreen/styles/index.scss        |  1 +
 .../styles/setting-select-control.scss        | 20 +++++++++++++++++++
 packages/app-desktop/main.scss                |  2 +-
 4 files changed, 23 insertions(+), 9 deletions(-)
 create mode 100644 packages/app-desktop/gui/ConfigScreen/styles/setting-select-control.scss

diff --git a/packages/app-desktop/gui/ConfigScreen/controls/SettingComponent.tsx b/packages/app-desktop/gui/ConfigScreen/controls/SettingComponent.tsx
index f836c1e3f09..875a361941a 100644
--- a/packages/app-desktop/gui/ConfigScreen/controls/SettingComponent.tsx
+++ b/packages/app-desktop/gui/ConfigScreen/controls/SettingComponent.tsx
@@ -107,19 +107,12 @@ const SettingComponent: React.FC<Props> = props => {
 			);
 		}
 
-		const selectStyle = { ...controlStyle, paddingLeft: 6,
-			paddingRight: 6,
-			paddingTop: 4,
-			paddingBottom: 4,
-			borderColor: theme.borderColor4,
-			borderRadius: 3 };
-
 		return (
 			<div style={rowStyle}>
 				<SettingLabel htmlFor={inputId} text={md.label()}/>
 				<select
 					value={value}
-					style={selectStyle}
+					className='setting-select-control'
 					onChange={(event) => {
 						updateSettingValue(key, event.target.value);
 					}}
diff --git a/packages/app-desktop/gui/ConfigScreen/styles/index.scss b/packages/app-desktop/gui/ConfigScreen/styles/index.scss
index 6eba6a8a65c..b202da6e959 100644
--- a/packages/app-desktop/gui/ConfigScreen/styles/index.scss
+++ b/packages/app-desktop/gui/ConfigScreen/styles/index.scss
@@ -3,3 +3,4 @@
 @use "./setting-label.scss";
 @use "./setting-header.scss";
 @use "./setting-tab-panel.scss";
+@use "./setting-select-control.scss";
diff --git a/packages/app-desktop/gui/ConfigScreen/styles/setting-select-control.scss b/packages/app-desktop/gui/ConfigScreen/styles/setting-select-control.scss
new file mode 100644
index 00000000000..8a1dfb53adc
--- /dev/null
+++ b/packages/app-desktop/gui/ConfigScreen/styles/setting-select-control.scss
@@ -0,0 +1,20 @@
+
+.setting-select-control {
+	display: inline-block;
+	color: var(--joplin-color);
+	font-family: var(--joplin-font-family);
+	background-color: var(--joplin-background-color);
+
+	padding-left: 6px;
+	padding-right: 6px;
+	padding-top: 4px;
+	padding-bottom: 4px;
+	border-radius: 3px;
+
+	border-color: var(--joplin-border-color4);
+
+	&:focus-visible {
+		border-color: var(--joplin-focus-outline-color);
+		outline: none;
+	}
+}
\ No newline at end of file
diff --git a/packages/app-desktop/main.scss b/packages/app-desktop/main.scss
index 081330db61a..ed6e1d975e7 100644
--- a/packages/app-desktop/main.scss
+++ b/packages/app-desktop/main.scss
@@ -154,7 +154,7 @@ a {
 // sufficient because it matches any focused input (https://stackoverflow.com/a/66109577).
 //
 // See https://github.com/laurent22/joplin/issues/9982.
-input:not([type=button]):not([type=checkbox]), select {
+input:not([type=button]):not([type=checkbox]) {
 	&:focus-visible {
 		outline: none;
 	}