use the new popover attribute/api for popovers

[NullVoxPopuli]

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover

[johanrd]

Yeah, but also: Switching to using the Popover API for the Menu component to a large degree removes the need for the menu component in the first place.

It would be useful to extract floating and tabster into its own modifiers (see also https://github.com/hokulea/aria-voyager/blob/main/packages/ember-aria-voyager/package/README.md)

This would make possible the following beautiful API for a menu component with pure HTML plus element modifiers:

<button popovertarget='my-popover'>Open popover</button>
<menu popover id='my-popover' {{float}} {{tabster}}>
  <button role='menuitem' >my menuitem</button>
</menu>

popoverModifier can target the button with popovertarget='${element.id}'

const float modify(element, ,positionalArguments, namedArguments) {
    const referenceElement = document.querySelector(`[popovertarget='${element.id}']`) // with options to override in positionalArguments
    …
}

[NullVoxPopuli]

can popover attribute'd things be nested? can you have a menu open on a menu?

or is it that dialogs can nest, and you'd popovers must be the top (no nesting).

In any case, I'm still waiting for Baseline to give the go-ahead

I would still want a component though... because wiring up id / target attributes between elements is error prone, and it's nice to have a component do that for me

{{float}} {{tabster}}

I am a big fan of this.

For floating, you kinda have to use a component for now though, because you need to anchor the floater to something (usually a button)

• modifier https://github.com/universal-ember/ember-primitives/blob/main/ember-primitives/src/floating-ui/modifier.ts#L36
• component https://github.com/universal-ember/ember-primitives/blob/main/ember-primitives/src/floating-ui/component.gts#L53

These were taken from https://github.com/CrowdStrike/ember-velcro as they're not keeping up with things at a pace I like (and they're cool with it)
See:

• https://github.com/CrowdStrike/ember-velcro/pull/199/files

In particular, this FloatingUI wrapper still needs to be documented

Here is an example usage, in the Popover component: https://github.com/universal-ember/ember-primitives/blob/main/ember-primitives/src/components/popover.gts#L216
(it combines button and menu together)¹

Though, I will point out, that these components are usually pretty light. But I find the amount of ceremony involved with plain HTML (and to do it correctly, etc) to often be too much. I would like to write less when I'm working on apps.

{{tabster}}

I think this is doable, tbh.

The tabster code in menu.gts is specific to menus, but the tabster modifier can assume that it would be used on multiple kinds of things, and switch off the element / role that it's used on.

This would be a great PR, tbh <3

Footnotes

1. Here, where the content is used: https://github.com/universal-ember/ember-primitives/blob/main/ember-primitives/src/components/menu.gts#L171 it's using a Role of menu for the menu -- because for a generic popover, you can't really know if your going to be used as a menu or not (seen here: https://github.com/universal-ember/ember-primitives/blob/main/ember-primitives/src/components/popover.gts#L125 -- but also, It does look like the element is customizable, so this probably needs some exploration) ↩

[NullVoxPopuli]

Issue here for Documented Floating UI: #378

[NullVoxPopuli]

issue here for creating a tabster modifier: #379

[johanrd]

For floating, you kinda have to use a component for now though, because you need to anchor the floater to something (usually a button)

yes, but also no! :) In the popover api I have great success utilizing that a popover is strictly tied to a button with popovertarget=element.id. See my example above with:

modifier((element) => {
   const referenceElement = document.querySelector(`[popovertarget='${element.id}']`)`  
})

In my experience, this makes it possible to not need to wrap it in a component? 🎉

[johanrd]

can popover attribute'd things be nested? can you have a menu open on a menu?

Yes, I have success using popovers inside popovers and dialogs. – especially for tooltips this is necessary. Works out of the box for most browsers, and a good polyfill for older versions.

[NullVoxPopuli]

I have success using popovers inside popovers and dialogs. – especially for tooltips this is necessary. Works out of the box for most browsers, and a good polyfill for older versions.

This is excellent news!

Any word on when Safari will be included in the Baseline? is it worth it to wait? or should we go-ahead and start using native popover?
(which reduces a fair amount of internal complexity, and potentially removes the need for portalling, which fixes some a11y issues / tab-order issues).

strictly tied to a button with popovertarget=element.id.

This is the ceremony that I like avoiding.

This project should probably provide the primitives for folks to do what you want to do though -- and I would gladly accept a PR to enable that <3

Also, I should probably add to all the component docs answering "why a component" -- would be good to expose what is abstracted / why the component exists in the first place (also allowing smart folks (such as yourself!) to choose when it makes sense to use the underlying modifier primitives)

[NullVoxPopuli]

This is turning out nice

[NullVoxPopuli]

anchorTo here (I renamed it): https://ember-primitives.pages.dev/5-floaty-bits/anchor-to.md