Desktop: Accessibility: Make keyboard focus visible for dropdowns (#11177)

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

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";

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

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