136 modals sollten barrierefrei umgesetzt sein

[trm217]

Description

Fixes #136 and fixes #130

Tasks

• Add Focus-Trap component
• Add focus-trap to navigation + popovers
• Add focus-trap to Overlays
• Add focus-trap to image-lightbox
• Add focus-trap to Series-navigation
• Make payment-options focusable (was already solved)
• Make youtube-videos focusable
• Define a global focus styling that matches the given criteria (see A11Y: Show focus state visibly #130)
• Actionbar items must communicate their focus-state visually (can be achieved with a default focus styling once defined)

[trm217]

dev-note

Adding a focus-trap to our ArticleGallery component isn't working due to no focusable images being available in the initial render.
In order for focus-trap to work we must adapt the code to only render once the an image has already been loaded.

[trm217]

@tpreusse Once you have time, I would like to discuss the focus-styling with you.
We have a defined styling for the focus-state on a bunch of components, however for example on Link components we don't.
I'd be in favor of using a default focus styling such as: { outline: '2px dotted black', outlineOffset: '4px' }. However for ui such as Links I believe an individual styling would be nicer (such as making the Link bold on focus).

Additionally the above mentioned issue really is a pain to resolve. Since Photoswipe seems to run outside of React, it isn't easily possible to hook into the initialisation state of the gallery. (Also the docs to v4, which we use, is no longer available 🙄). I already attempted to hook into the afterInit-event of the photoswipe library, but unfortunately this will still cause the focus-trap to panic, since no focusable elements are rendered at that time.