When the modal is displayed, a strange border appears around the first div.
Clicking anywhere on the screen causes the border to disappear.
Hey @weedor.
This is expected and exactly how things should work.
I recommend to tweak the focus state per your requirements, preferably inside the global elements area where you want to look for links (<a>).
What I also recommend is to adjust your block structure, so the first focusable element will be the close icon.
You might also want to check this little related walk-trough to get a general idea which also hints you the way to exclusively display the outline for 
users and not when navigating with the 
.
Hope that helps.
1 Like
Thank you, @Marius. Apologies for the delayed response.
Here is the link : https://bros.ai
Here’s the backend of the modal. You’ll notice that the closing cross (represented by <a>) is the first interactive element within the modal. However, when the modal is displayed, the focus isn’t on this element. Instead, the focus shifts to the next interactive element, which is also an <a>.
This behavior might be acceptable if we could apply the CSS hover state. The border that’s currently displayed cannot be modified, and I’d like to remove it. This would allow the element to display with the “hover” CSS set in Cwicly.
Hi,
Your first <a> doesn’t have an href so you will want to modify it to the correct <button> tag for it to be focused or tab index it.
To modify the focus styles please use :focus / :focus-active / focus-visible.
Best regards,
Johnny
1 Like
Thank you to both of you.
Everything is okay now.
1 Like
Hey @weedor.
Just as a quick follow-up.
You also want to modify your modal trigger icon in the header to that exact way, as it’s currently not focusable.