Desktop: Improve font picker accessibility

[personalizedrefrigerator]

Summary

This pull request makes Joplin's custom font picker component more accessible. In particular, it:

1. Refactors the combobox logic specific to the font picker into a new InlineCombobox component.
   • Goal: Allow future code reuse.
2. Makes the combobox roughly follow the combobox pattern.
   • Goal: Make it possible to access and change the selected suggestion from a screen reader and/or with only a keyboard.

See also: #10795

Related accessibility guidelines

• 1.3.1. Info and Relationships (Level A)
  • This pull request associates the suggestion list with the suggestion input programmatically.
• 4.1.2. Name, Role, Value (Level A)
  • Allows the name and role of suggestions in the suggestion box to be programmatically determined.
  • Allows the name of the "monospace" checkbox to be determined.
• 2.1.1. Keyboard (Level A)
  • Makes it possible to 1) open/close the suggestion box with the keyboard, 2) change which suggested item is selected, 3) toggle the "monospace" checkbox.

Testing plan

Note

Joplin's font picker combobox does not mark a suggestion as active unless:

1. The suggestion matches the content of the text entry,
2. The user has used the arrow keys to change the selected suggestion, or
3. The user has clicked on a suggestion.

With a screen reader enabled

Fedora 41:

1. Enable Orca.
2. Open settings > appearance.
3. Clear the "Editor font family" input, if it has content.
4. Start typing a font.
5. Press the down arrow key.
6. Verify that Orca reads the suggested completion.
7. Press enter.
8. Verify that the completion dialog is hidden and the completion is accepted.
9. Press tab.
10. Verify that this moves the focus to the next font picker entry.
11. Press tab.
12. Verify that this moves focus to a checkbox with label "Show monospace fonts only".

Screen reader transcript

Joplin  left paren(DEV  dash-  slash home slash self slash  dot config slash joplindev dash-desktop slash profile dash-yo35nu8f right paren)  dash- Options frame
General page tab.
Focus mode
down
Application page tab.
down
Appearance page tab.
tab
Appearance scroll pane clickable.
Browse mode
tab
Automatically switch theme to match system theme check box checked.
has details in section.
tab
Preferred light theme combo box Light.
opens menu
Focus mode
tab
Preferred dark theme combo box Dark.
opens menu
tab
Show sort order buttons check box checked.
has details in section.
Browse mode
tab
15
selected
tab
Text unselected.
Focus mode
expanded
n
o
t
o
down
Noto Color Emoji
Noto Color Emoji.
down
Noto Naskh Arabic.
down
Noto Sans.
down
Noto Sans Arabic.
up
Noto Sans.
up
Noto Naskh Arabic.
up
Noto Color Emoji.
down
Noto Naskh Arabic.
down
Noto Sans.
left control
a
left shift
N
Editor font family editable combo box Editor font family.
opens listbox
o
t
o
space
s
a
n
s
space
a
return
Sans Arabic
tab
expanded
tab
Show monospace fonts only.
 check box checked.
Browse mode
space
not checked
space
checked
space
not checked
space
checked
tab
Suggestions.
List with 9 items
Focus mode
down
Liberation Mono.
down
Nimbus Mono PS.
down
Noto Sans Mono.
down
Noto Sans Mono CJK HK.
left shift
Show monospace fonts only.
 check box checked.

Without a screen reader enabled

Fedora 41 (no screen reader)

1. Open the "Appearance" tab in settings.
2. Type the start of a font.
3. Verify that fonts with the prefix typed in the combobox are shown.
4. Press the down arrow key.
5. Verify that this moves to the next font.
6. Repeat steps 4 and 5.
7. Press the up arrow key.
8. Verify that this moves to the previous font.
9. Press tab.
10. Verify that this moves to the "show monospace fonts only" checkbox.
11. Toggle the checkbox with the keyboard (press enter).
12. Verify that only monospace fonts are shown.
13. Navigate to the next font picker (by pressing tab).
14. Verify that the arrow keys can be used to cycle through fonts.

Screen recording

Screencast.from.2025-01-31.15-49-14.webm

The above screen recording shows the steps taken in the above testing plan (no screen reader).