feat(a11y): Globally improve accessibility for screen reader users

When the toolbox is hidden and due to a ReactFocusLock instance the
focus is returned to the toolbox the whole page scrolls to the toolbox
which is positioned outside of the viewport in the bottom.
Then when the animation for displaying the toolbox is started the
scenario looks like the large video is jumping.
Now we don't return the focus from ReactFocusLock to elements which are
not part of the viewport.

feat(a11y): make (most) UI elements reachable via keyboard

* ref(settings-dialog) Update to use new Dialog component

Created new DialogWithTabs component
Refactored Dialog into Dialog and BaseDialog
Updated dialog functionality on mobile

Use JitsiPortal on mobile

Remove focus outline for the close icon
Increase max height

Needed for shared video dialog.

* tss-react doesn't need a type anotation for the Theme

* Update tss-react to 4.4.4

Don't focus on the close button if there's another focusable element

Remove unused icons
Remove fill none from icons
Rename some icons

If onSubmit opens a new dialog, we'd be hiding it otherwise.

Improve accessibility by not allowing the user to navigate outside the dialog

Convert some files to TS
Improve Dialog component

Convert some files to TS

Convert some files to TS

Improve Dialog component to auto close on cancel or on submit
Change logic to determine whether a dialog is using the new component
Convert some files to TS