Desktop: Accessibility: Make click outside of dialog content be cancellable

[pedr]

Related to #10795

Summary

It should be possible to cancel the action of clicking in the dimmed background. Before this PR it was only possible by moving the pointer outside of Joplin window.

I change this behaviour by keeping track of the mouseup and mousedown event, dismissing only if the click action is finished in the dimmed background and not inside the content of the dialog.

WCAG

Guideline: 2.5.2 Pointer Cancellation
Technique: Using native controls to ensure functionality is triggered on the up-event.

Testing

Test 1

1. Open Note Properties
2. Press click in the dimmed area
3. Let go inside the Note Properties content
4. Dialog should NOT be dismissed

Test 2

1. Open Note Properties
2. Press click in the dimmed area
3. Let go outside the dimmed area
4. Dialog should be dismissed

Test 3

1. Open Note Properties
2. Press click over the content of the Dialog
3. Select content with the mouse (see image below)
4. Let go outside of the content
5. DIalog should NOT be dismissed

Test 4

1. Open Note Properties
2. Press click over the Ok button
3. Let go outside the Ok button
4. No action should take place

Test 5

1. Open Note Properties
2. Press click on the dimmed area
3. Let go over Ok button
4. No action should take place

Test 6

1. Open Change Application Layout
2. Press click anywhere
3. Nothing should happen
4. Press Esc
5. Change application Layout should be removed

[personalizedrefrigerator]

Thank you for working on this!

I've left a few comments.

[personalizedrefrigerator]

Looking again at SC 2.5.2, it includes the following:

For functionality that can be operated using a single pointer, at least one of the following is true:

• No Down-Event
  The down-event of the pointer is not used to execute any part of the function;

As such, it's possible that the onmousedown listener can be removed, while still meeting SC 2.5.2.

[pedr]

Looking again at SC 2.5.2, it includes the following:

For functionality that can be operated using a single pointer, at least one of the following is true:

• No Down-Event
  The down-event of the pointer is not used to execute any part of the function;

As such, it's possible that the onmousedown listener can be removed, while still meeting SC 2.5.2.

I have trouble image how this would look like in our case since we are keeping track fo the mouse only to allow the users to close the dialog by clicking outside of the dialog content.

E.g.: Clicking down on the background and moving the pointer to the "Ok" button would not trigger the button, but clicking down in the content and moving the pointer to the background would cause it to close (or at least try since depends on onCancel)

I think an alternative here would be to remove the functionality of closing dialog by clicking in the dimmed background.

[pedr]

I also made another manual test with the NoteProperties:

1. I modified NoteProperties to start with a empty onCancel props and after 5 seconds to set the correct function to it
2. Start the application and open NoteProperties
3. Clicking in the dimmed background had no effect
4. After the 5 seconds clicking in the dimmed background would close the dialog

This is related to your correction that my custom hook would never change state and never be triggered again if something like this happened. Thanks!

[personalizedrefrigerator]

Suggested change

if (!mouseDownOutsideContent) return;

Optional: Since mouseDownOutsideContent is a ref, I think !mouseDownOutsideContent should always be false.