Improve accessablility in embeded code dialog

[dennis531]

Changes:

• Add tab navigation through size buttons
• Wrap status message in live area to support screen readers

Related #625

[github-actions]

This pull request is deployed at test.admin-interface.opencast.org/735/2024-06-24_14-19-20/ .
It might take a few minutes for it to become available.

[github-actions]

Use docker or podman to test this pull request locally.

Run test server using develop.opencast.org as backend:

podman run --rm -it -p 127.0.0.1:3000:3000 ghcr.io/opencast/opencast-admin-interface:pr-735

Specify a different backend like stable.opencast.org:

podman run --rm -it -p 127.0.0.1:3000:3000 -e PROXY_TARGET=https://stable.opencast.org ghcr.io/opencast/opencast-admin-interface:pr-735

It may take a few seconds for the interface to spin up.
It will then be available at http://127.0.0.1:3000.
For more options you can pass on to the proxy, take a look at the README.md.

[rlucke]

This looks like the complicated version of my solution: #736
When it comes to accessibility, the simplest approach is always the best. So you should work with the given tags (in this case button) and not teach divs a behavior that other tags already have. There is no need for an key listener.

Using live aria-live={"polite"} and role={"status"} might seems right, however, in this case NVDA does not read it at the right moment. So role="alert" is the right choice.

[dennis531]

Thank you for the detailed explanation!

I didn't consider the better solution with the buttons.

I wasn't sure about the roles, as the Mozilla documentation states that this role should only be used sparingly.

Therefore, I am closing this issue, as it was solved with #736.