Popover but without the close on blur about terracotta HOT 6 OPEN

Hmmm, the thing is, by specification design this is meant to be desirable behavior, however it's not entirely clear how one should approach this. Sure, we could use an overlay but Popovers don't really make the outer elements to be inert in contrast with Dialog.

My stance here is that I cannot change this by design, but I can recommend using alternatives. Frankly, if your component is a chat popup, I don't really recommend popovers.

from terracotta.

I didn't find the Popover pattern in https://www.w3.org/WAI/ARIA/apg/
Do you have a link that describe the pattern? It looks a little bit like the Tooltip pattern.

I use the Popover component for this action, it's perfect:

I'm new to the accessibility patterns so I don't have much experience with them. Do you have a pattern in mind for my use case.
Here is some screenshots of my interface for a users list and chat panels:

With what I read my use case may be more like a non-modal dialog, so I should use a role="alertdialog". I tried to use AlertDialog component without AlertDialogOverlay, but I didn't succeed to use the AlertDialog with a DisclosureButton.

I found this discussion sumup-oss/circuit-ui#1354 about a SidePanel component interesting.
It seems what I'm searching for is this behavior https://www.lightningdesignsystem.com/components/panels/

from terracotta.

Here's an example implementation: https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/datepicker-dialog.html

Popovers are actually under Dialog specification with a minor difference that is, unlike Dialogs, Popovers do not prevent the users from interacting outside the container. Popovers are closer to tooltips than to floating containers, which aren't actually dialogs. The purpose of dialogs is to lock the focus of the user inside the containers.

Panels are actually under dialogs, however I do think that accessibility-wise, panels doesn't fit your use case.

from terracotta.

The main action in my app is to move an avatar in a 3d environment. It would need footstep sounds and sound on wall collision to be accessible but that's another story. The chat panel is a secondary action.
To me it seems Popover has everything I want aria-expanded, aria-controls, focus. The chat panel can close if I click outside of it and continue moving my avatar, I can be fine with that. For a screen reader, the user will need to close the chat panel anyway to be able to continue moving the avatar from what I understand. It's just that it currently closes when you click somewhere inside the popover that is not a focusable element, so here when the input lose focus, that's the main issue I have. The datepicker example doesn't have this behavior, you can focus a button and click inside the popover to unfocus the selected button, it doesn't close.

from terracotta.

You can reproduce the issue in the popover example https://codesandbox.io/s/github/LXSMNSYC/solid-headless/tree/main/examples/popover-example
If you click on the thin border/padding of the popover it closes. I think it shouldn't close.

from terracotta.

Yeah that's probably an issue, I'll take a look

from terracotta.