fix: Modal in table is not working properly for screenreader

[programmiri]

screen reader / keyboard behaviour is wrong when opening Modal from in a table row (chromium browser)

If modal is opened from a button on the page, it behaves correctly:

• reads out the dialog content
• screenreader only can navigate in modal

when it's opened from a button inside a cell of DataTable, it stays on this button. Navigating around reads an empty table with no rows/columns and an empty main.

Recording

https://user-images.githubusercontent.com/943800/222240859-f230eb3f-419d-47d7-a290-82b2746cc390.mov

[programmiri]

I've not yet found the reason for this 😩

Findings for now

• works fine and as expected in Firefox
• does not work in Chrome / Brave (so a Chromium problem)
• using Modal from aquarium shows the same behaviour, so it seems to be caused by table or DataTable The DOM elements look the same wether the Modal is triggered from a button outside of table or inside the table. Attributes are all set and removed the right way.

body
    root (tabindex -1, inert true, aria-hidden true)
    div-with-modal

document.activeElement is, in both cases, the heading in the modal.

[mathieu-anderson]

This seems to have been resolved, I cannot reproduce the behavior described in the issue and visible in the video:

https://github.com/Aiven-Open/klaw/assets/20607294/2e94fd76-113d-4697-8812-fc7d52f965fa

[programmiri]

🎉 🎉 🎉 🎉 🎉 🎉 🎉 🎉 🎉 🎉 That's nice! It seems to have been a browser issue and resolved in Chrome. Will check in Brave later, too, but should be ok there now too