self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-24 10:27:10 +02:00
Code Issues Releases Activity

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

Browse Source
This commit is contained in:
Henry Heino 2024-10-15 10:00:31 -07:00 committed by GitHub
parent 38be0e81a9
commit 6afa2d1385
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/app-desktop/gui/ConfigScreen/controls/SettingComponent.tsx
View File

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

1
packages/app-desktop/gui/ConfigScreen/styles/index.scss
View File

@ -3,3 +3,4 @@
@use "./setting-label.scss";
@use "./setting-header.scss";
@use "./setting-tab-panel.scss";
@use "./setting-select-control.scss";

20
packages/app-desktop/gui/ConfigScreen/styles/setting-select-control.scss Normal file
View File

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

2
packages/app-desktop/main.scss
View File

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