Desktop: Accessibility: Add setting to increase scrollbar and other small control sizes

[personalizedrefrigerator]

Summary

Goal: Allow users to make scrollbars meet WCAG 2.2 SC 2.5.8: Content Size (Minimum) by adding a setting to allow increasing their minimum dimension to 24px.

Note: An alternate approach — a setting that switches to system scrollbars is implemented here. However, I haven't found a simple way to increase the size of the OS scrollbars used in Joplin from system settings. For example, this Windows thread links to an article that suggests editing the registry.

Screenshots

The setting, set to the default of small (7px):

Medium (12px):

Large (24px):

Sidebar, note list, Markdown editor and viewer visible (setting enabled):

Rich Text Editor (setting enabled):

Revision viewer (setting enabled):

Notes

• Changing the scrollbar styles: The StyleSheetContainer component was renamed to AppStyles. In addition to adding style sheets to each Joplin window, the component now adds a -large-controls CSS class to the :root element when the large controls setting is enabled.
  • The .-large-controls class is used in main.scss to set the scrollbar and default checkbox size.
  • Scrollbar styling is done by packages/renderer for rendered Markdown.
• Refactoring changes: The revision viewer was refactored to use the same useMarkupToHtml hook for rendering as the NoteEditor. This change was intended to simplify passing the increaseControlsSize setting to the renderer.
  • To use the hook, NoteRevisionViewer was converted from a class to a function component.

To-do

• (Optional) This pull request refactors parts of packages/renderer and packages/app-desktop. To these changes easier to review, it may make sense to move them to a separate pull request.

Testing plan

Fedora 41:

1. Start Joplin
2. Verify that scrollbars in the note viewer, editor, Rich Text editor, and revision viewer are small.
3. Change the "scrollbar size" setting to "medium".
4. Verify that scrollbars in settings, the sidebar, the note list, the Rich Text editor, the Markdown viewer, and the revision viewer are all larger.
5. Open a note in a new window.
6. Repeat step 4.
7. Repeat steps 4-6 for "large".

[tomasz1986]

I would like to suggest having an option to set it to narrow (the current version), normal, and wide. The reason is that the default scrollbars in Joplin are too narrow (thus difficult to click and see), but these are just way too huge to be useful in most cases (except for those that need such large elements due to severe eyesight or motion issues).

For example, I am shortsighted, but setting scrollbars to 10px with custom CSS is more than enough for me to see them with no issues. The default ones, I can barely see.

[personalizedrefrigerator]

I would like to suggest having an option to set it to narrow (the current version), normal, and wide. The reason is that the default scrollbars in Joplin are too narrow (thus difficult to click and see), but these are just way too huge to be useful in most cases (except for those that need such large elements due to severe eyesight or motion issues).

Good idea! I've converted the setting to a dropdown and updated the screenshots in the pull request description. The medium scrollbars have a width of 12px:

[personalizedrefrigerator]

Try to refactor this so that the ::-webkit-scrollbar styles aren't duplicated. This can potentially be done in a follow-up pull request.