Package details image modal - Missing modal trap

[umbrabot]

Steps to replicate:

1. Go To packages tab
2. Open a package (e.g. Umbraco forms)
3. Scroll to bottom of the page and open the image modal (modal trap is missing)

Issue: Modal dialogs: Users must not be able to Tab away from a modal dialog without explicitly dismissing it

Why it matters: The purpose of a modal dialog is to constrain user input (temporarily) to controls within the dialog. Just as mouse users should not be able to click elements outside the dialog, keyboard users should not be able to Tab to elements outside the dialog.

How to fix:

• If a modal dialog contains a single focusable element (such as an 'OK' button), simply prevent any behaviour from occurring when the user presses the Tab key.
• If a modal dialog contains multiple focusable elements, force focus to cycle through those elements until the dialog is dismissed by the user.

W3 reference: https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html

[nielslyngsoe]

Screenshot of the scene where the issue takes place:

[KarlButler1]

I've created a PR to resolve this issue here: https://github.com/umbraco/Umbraco-CMS/pull/13093

[mikecp]

Can be closed as per merge of PR 13093

[BatJan]

I think we need to leave this open - I have just given it a spin and can still re-create the issue unfortunately.

[KarlButler1]

Hi @BatJan, Thanks for checking !!

I've just had another look and I can't seem to replicate the issue I've tried both through tabbing to the image and then clicking enter. The focus then seems to remain in the modal when clicking the tab button.

Interested to hear, how you're getting the error and what this looks like. So I can take another look at fixing it 🙂

[BatJan]

Hey @KarlButler1 Hmm, that is odd - I have fetched the latest changes on the contrib branch and I can see your PR in the history being merged 2 days ago. However when I open the gallery and keep tabbing focus is not trapped on my machine at least.

Please see this GIF.

[mikecp]

Hi @KarlButler1 , @BatJan ,

Thanks for the cross-checkings 😊

I gave it another spin myself and checked on both Chrome and Edge. On both browsers, when tabbing and then clicking "enter" on the "X" to close the modal, I get the focus back to the image on which I initially clicked "enter". On Chrome, when tabbing in the modal, at some point it gets out and gets into the "location" part but not through all the "addons" as shown in @BatJan 's video. I do have the same behavior as @BatJan on Edge: it goes through all.

When I tested prior to the fix, clicking on tab actually gave the focus back to Umbraco backoffice menu etc. which was hidden by the modal. So you could actually tab to "content", click "enter" and then see your content tree being displayed behind the modal. This was indeed not possible anymore with the fix but I did not pay enough attention to the "outside of the modal" tabbing...

@KarlButler1 , in the User section, when you select a user and then click on "change password", you get a modal in which you remain completely. Maybe you could check that one to see if there is/what is the difference with your implementation?

Cheers!

[KarlButler1]

Thanks @mikecp @BatJan,

That's my bad, I thought the modal trap was just so they could navigate to the modal elements when within the page and no over elements outside the modal e.g content etc. I didn't realise the user shouldn't be able to navigate to the browser too, all part of the learning 🙂

Thanks for the info, I'll take a look and will get that resolved later today.

[KarlButler1]

Hi both, I've resolved the modal trap in the PR above. Hopefully, it's all working as expected now 🙂

[mikecp]

Can be closed (again 😅) as per PR 13172

[tiffy74]

@BatJan Can you please review this and confirm and close it if fixed?