Fix accessibility issues in modal component

[tuukkao]

• Fix modal aria role
• Trap focusing with tab / shift+tab inside the modal
• Restore keyboard focus when closing modal
• Automatically move keyboard focus to first focusable element unless specified otherwise when opening modal
• Keyboard shortcut help modal: move keyboard focus to modal title
• Keyboard shortcut help modal: change close control from link to button

Fixes #1959.

Do you follow the guidelines?

• I have tested my changes
• I read this document: https://miniflux.app/faq.html#pull-request

[fguillot]

There are some issues detected by the JavaScript linter:

ui/static/js/modal_handler.js: line 56, col 10, Missing semicolon.

[fguillot]

It would be nice to keep the same styling as before for the closing button.

Your change with the dark theme:

Your change with the light theme:

Actual styling:

[tuukkao]

Could you help me out with this a bit? I'm a blind screen reader user and my understanding of CSS is rudimentary at best.

The only style difference between this change and main that I could think of are the a:focus styles which (I believe) used to apply before but are now missing. Is that the issue?

[fguillot]

Could you help me out with this a bit? I'm a blind screen reader user and my understanding of CSS is rudimentary at best.

The only style difference between this change and main that I could think of are the a:focus styles which (I believe) used to apply before but are now missing. Is that the issue?

This change should address the styling issue: c7a409c