Re: [w3ctag/design-reviews] The Popup API (Issue #743)

Thank you for all the background @mfreed7 and the discussion on Monday. Here are some of my thoughts (not necessarily representing TAG consensus):

The CSS approach is broken because it's trying to do everything in CSS, which is clearly not appropriate for something like this which adds functionality. A good approach would be [layered](https://w3ctag.github.io/design-principles/#high-level-low-level): some presentational concepts may need to be added to CSS, some structural ones to HTML, and JS APIs for what remains. It is also important to decouple the concepts that a popup brings, and expose them individually as much as possible, then `<popup>` just becomes a nice higher level package deal. Otherwise, authors end up abusing `<popup>` just because they e.g. need access to the top-layer. It sounded to me like some of the use cases mentioned may have even been in that group. One of the use cases mentioned in the call was "adding the `popup` attribute to a `<tr>` to highlight it". I may be mistaken, but I didn't think highlighting an element is (conceptually) a popup. The way I see it, conceptually a popup is to present ephemeral UI near another relevant control. Dropdowns, menus, tooltips, listboxes, toasts all fall under that category. There seems to be a fundamental difference between that and highlighting an element, but perhaps I have misunderstood the user needs this is trying to address. If so, it would be good to expand the explainer with these needs. 

The layered approach seems to already be largely followed, e.g. with the anchor positioning proposal. It seems to me that top-layer-ness is also a concept that belongs to CSS. Then the UA stylesheet could make sure popups and dialogs enter the top layer via something like:

```css
dialog[open],
popup[open] {
 z-index: top-layer; /* Or position: top-layer or whatever */
}
```

The [typical](https://w3ctag.github.io/design-principles/#consistency) HTML way for adding functionality around elements is to wrap them with other elements and encapsulate the functionality in these elements. This is how `<dialog>` works, this is how `<details>` works, sectioning elements, or even custom elements. `tabindex` and `contenteditable` assign traits to existing elements (making them focusable or editable), whereas popup seems much more clearly a container-type functionality. An element *is* a popup, popup-edness (😀) is central to what the element is _for_, whereas `tabindex` and `contenteditable` do not *describe* the element, do not set its identity, they are essentially metadata that set certain behaviors. Indeed, the vast majority of examples I see are `<div popup>`. 

I'm not an a11y expert, so I'd love some clarification on why the semantics of "group that contains a table" are problematic and we instead need to _make_ the table a popup. However, if a container with a single child is problematic for a11y, it sounds like this is something that affects other elements too. What is the role of a `<dialog>` or `<details>` that contains a single table? If these are problematic, do we need to introduce some kind of role "hoisting" up the DOM tree?

The current proposal introduces the concept of a _minimum role_ to ensure a popup is never less meaningful than at least than a `group`. However, a `<popup>` element would address this quite naturally, by having a default ARIA role of `group`, unless a different `type` is specified (or explicitly a `role`). Sure, you say the concept of a _minimum role_ would help with other things too, but at least it wouldn't be needed here.  I'm also wondering if we need a new ARIA role for a popup that is not something else? It doesn't seem enough to describe it with just `role=group`, but again, I'm not an a11y expert, just thinking out loud.

Furthermore, making `<popup>` an element would help you do away with warts like these:

- [Should showPopUp() and hidePopUp() throw on non-popups](https://github.com/openui/open-ui/issues/511) (not to mention they can just become `.show()` and `.hide()`)
- [`dialog.showModal()` throws if there's a `popup` attribute](https://open-ui.org/components/popup.research.explainer#disallowed-elements)

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/743#issuecomment-1292624647

You are receiving this because you are subscribed to this thread.

Message ID: <w3ctag/design-reviews/issues/743/1292624647@github.com>