User focus can escape Dialog when navigating with tab

[Magsu]

Provide a general summary of the issue here

When using keyboard or screen reader and navigating with tab, the modal dialog is not a closed environment. When using keyboard or screen reader, the focus in an element with the role “dialog” should be contained in the element. Though a bit counterintuitive, this also includes the browser elements.

🤔 Expected Behavior?

When using keyboard or screen reader and navigating with tab, the focus stays inside the modal, and doesn’t “leak” outside of it to the browser elements or the web page below the modal.

😯 Current Behavior

The user can access the browser elements and the page below when a modal is open and using tab.

💁 Possible Solution

When in a modal the focus should be locked using the following method: • Find the first and last focusable element programmatically • When user has focus in the last element of the modal, if the user presses the “Tab”-key, move focus to the first focusable element • When user has focus in the first element of the modal, if the user pressed “Shift + Tab” key combination, move focus to the last focusable element

🖥️ Steps to Reproduce

1. Open a page with the modal element (e.g. [Dialog Basic](Open https://storybook.sanomalearning.design/?path=/story/overlay-dialog--basic)
2. Use the tab key (or shift+tab to reverse) to navigate the element (optionally start a screen reader)
3. When in the first or last focusable element of the modal, keep pressing tab (or shift-tab) to escape the modal

What browsers are you seeing the problem on? (only for bugs in code)

Chrome

If other, please specify.

No response

What operating system are you using?

Windows 10

👤 Your name

Valtteri Järvinen

🧢 Your product/team

External

🎨 Your Theme(s)

Sanoma Learning

### Tasks
- [ ] https://github.com/sl-design-system/components/issues/1555
- [ ] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#accessibility
- [ ] https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/
- [x] Discuss with Valterri in upcoming meeting
- [ ] implement focus trap within dialog

[anqaka]

Is it worth to use popover attribute for dialog? https://hidde.blog/popover-accessibility/ It doesn't resolve an issue with focus but is it helpful for any screen reader?

[jpzwarte]

https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal

"Interaction outside the dialog is blocked and the content outside it is rendered inert."