Mobile: Accessibility: Improve dialog accessibility #11395
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…enus Previously, a library that did not properly manage accessibility focus was used. This commit updates the existing web dialog logic (which uses a React Native `Modal`) to also provide long press and note re-order menus.
personalizedrefrigerator
added
mobile
| }]); | ||
| }); | ||
| }, | ||
| prompt: (title: string, message: string, buttons: PromptButton[] = defaultButtons, options?: PromptOptions) => { |
There was a problem hiding this comment.
Note: This function was originally in DialogManager.tsx.
Comment on lines
+38
to
+39
| // Note: Alert.alert provides a more native style on iOS. | ||
| Alert.alert(title, message, buttons, options); |
There was a problem hiding this comment.
For now, this continues to use the React Native Alert.alert when .prompt is called on Android and iOS. If desired, this could be adjusted to always use the custom alert dialogs.
personalizedrefrigerator
changed the title
|
That looks good, thank you for improving this. The dialogs overall look better and I don't think it's too much of an issue the message box background on dark theme |
This was referenced Nov 18, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This pull request improves the accessibility of certain dialog components by replacing
react-native-dialogboxwith a custom dialog component.react-native-dialogboxhas the following accessibility issues:This pull request fixes most of the above issues.
Related to #10795.
Implementation details
react-native-dialogboxis replaced by extending the existing custom dialog logic used for the web client. In particular,ScrollViewto allow all items to be accessed on small screens.Screenshots
Web
Sort dialog: Larger screen/light mode
Sort dialog: Small screen/light mode
The following before/after comparison shows the "sort notes by" dialog on web at 320x256 screen resolution (as required by WCAG 2.2/SC 1.4.10):
Before, some items were clipped offscreen and could not be scrolled to. With this change, it's possible to scroll the dialog vertically to access the items.
Sort dialog: Small screen/dark mode
As above, this screenshot is a before/after comparison, but in dark mode. The updated dialog uses Joplin's theme colors, while the original does not:
Alert dialog
On web, alert dialogs and menu dialogs now share code. The alert dialog style has changed. In particular, it uses
theme.backgroundColor1rather than the default color for elevated surfaces:This more closely matches the style of other dialogs (e.g. the plugin info dialog).
This does, however, make the dialog less visible in dark mode:
Screen recording
iOS
The attached screen recording demonstrates:
out.webm
Android
Portrait:
The attached video demonstrates:
android-1.webm
Landscape mode:
The attached recording demonstrates:
untitled.webm