Desktop: Improve focus handling for notebook edit, share, and sync dialogs

[personalizedrefrigerator]

Summary

This pull request switches many dialogs to the HTML <dialog> element, which:

• Auto-focuses the first focusable item in the dialog (this can be customized by adding the autofocus attribute to a different element).
• Traps focus in the dialog. This means that repeatedly pressing Tab no longer causes focus to leave the dialog.
  • This is helpful when using a screen reader.
• Marks the dialog as a dialog for screen readers.
• Makes the dialog modal, showing it above other elements.

Testing plan

1. Right-click on a notebook and select "edit".
2. Click "select emoji" and choose an Emoji using the Emoji picker.
3. Hold tab, verify that the focus cycles through the dialog without leaving it.
4. Close the dialog by clicking "OK".
5. Open the share dialog for the current notebook.
6. Share the notebook with another user.
7. Close the dialog.
8. Open the publish dialog for the current note.
9. Close the dialog by pressing esc.
10. Enable the web clipper.
11. Grant access to the web clipper by pressing Enter.
    • Similar issue: Enter always accepts the same button and closes the dialog, regardless of keyboard focus (unless in a textarea). (Code that causes the issue).

This has been tested successfully on Ubuntu 24.04.

[personalizedrefrigerator]

RSCSS specifies that one top-level rule should be in each file. I've created a new styles/ folder to satisfy this rule. Note, however, that a style/ folder already exists, and contains styled component logic. As such, it might make sense to move styles/dialog-modal-layer.scss to a different location.

Additionally, RSCSS states that glob matching should be used. However, Dart SCSS does not seem to support globs in @use or @import.