[popup] Add ::backdrop to popup

[una]

Request to add ::backdrop pseudo-element to popup elements to enable modal behavior for popups.

Two quick examples:

• Creating dialogs with light dismiss (and other popup features)
• Popup navigation elements (separating menus like slide-in menus from the rest of the page content)

Similar to the dialog element, this may possibly require a specific way to open the popup as a modal (or not, since popup is always in top layer, and the presence of the ::backdrop would be enough).

[scottaohara]

Agree with this idea. Not all popups may need this, but it would be good if developers easily had the ability to add a ::backdrop if necessary.

[css-meeting-bot]

The Open UI Community Group just discussed Add ::backdrop to popup to enable modal popup.

The full IRC log of that discussion

<gregwhitworth> Topic: Add ::backdrop to popup to enable modal popup
<gregwhitworth> github: https://github.com//issues/519
<flackr> una: The idea is we may need a backdrop attribute for popup - e.g. menus that slide in from top. This proposal is to add a ::backdrop as an optional pseudo you can style similar to a modal dialog but for popups
<masonf> q+
<flackr> una: there's plenty of examples in which you have a popup and a page style that separates the popup from the rest of the page content
<flackr> una: do we need a different property to make it appear? I don't think so, because popup is always on top
<gregwhitworth> q+
<gregwhitworth> ack masonf
<flackr> masonf: I like the idea. My only objection is to the naming "modal" popup. The backdrop element would still trigger a light dismiss as the popup isn't modal
<flackr> una: Agree, I'll update the issue
<flackr> una: Another issue is should you be able to make modal dialogs?? from popup?
<JonathanNeal> q+
<flackr> gregwhitworth: my understanding is the pseudo always exists but you could optionally style
<flackr> una: Yes
<gregwhitworth> ack gregwhitworth
<flackr> gregwhitworth: do we need to do this for every popup type element or can we generalize this? I.e. any top layer element has a ::backdrop pseudo?
<flackr> una: The question becomes is the rest of the page inert?
<flackr> gregwhitworth: no, this would be visual only, and the behavior would be based on the given element's behavior
<gregwhitworth> ack JonathanNeal
<flackr> JonathanNeal: If we had this pseudo, would this help resolve issue #415 where we handle a focusout
<flackr> masonf: I don't think so, because we're not making the rest of the page inert so you still should be able to tab out
<hdv> q+
<flackr> una: there are cases where i would want the rest of the page to be inert while the popup is open but maybe this is just adding some javascript
<flackr> masonf: it might be worthwhile to open an issue for this
<gregwhitworth> ack hdv
<flackr> hdv: why is the modal part separate from the backdrop? From an accessibility point of view a backdrop feels like it should block other elements
<gregwhitworth> q+
<flackr> hdv: maybe there's a use case i'm missing where this is important
<flackr> una: my understanding is you lose the ability to light dismiss with click when you have inert
<flackr> masonf: we can define it however we like. if we have a backdrop and it is opaque, the concern is that you might be able to move focus, but if you do that light dismiss will happen
<emilio> q+
<flackr> masonf: this is #415 where we resolved that moving out of the popup (focus, click, etc) will dismiss the popup
<flackr> gregwhitworth: since it's not an element, and just an attribute, why do we need the pseudo when anyone can apply their own div that takes up the whole space?
<flackr> masonf: it gets hard to do light dismiss, if your popup fills the viewport you block light dismiss
<flackr> emilio: you could make it not in the popup
<JonathanNeal> +1 to add backdrop pseudo element, fwiw :)
<flackr> emilio: if you style it with pointer-events: none it would allow clicking through it to the content behind
<gregwhitworth> q?
<flackr> una: you could do this on the page anyways . .??
<JonathanNeal> I think a background is a common affordance for modal/popup-like things.
<flackr> una: a common use case is a menu with a three dot thing and you want to make the rest of the page visually behind
<JonathanNeal> s/background/backdrop
<flackr> gregwhitworth: my thinking is whether all of these pseudo solutions are simplistic and don't handle more complicated cases
<gregwhitworth> ack gregwhitworth
<gregwhitworth> ack emilio
<una> q+
<flackr> emilio: I don't know if we need a pseudo if you can make the :after escape the popup, but i don't think there's any reason we can't have :backdrop if we want
<gregwhitworth> Zakim, close the queue
<Zakim> ok, gregwhitworth, the speaker queue is closed
<flackr> emilio: no strong opinions. I guess we do this for fullscreen as well. I don't think having or not having it limits the use cases much
<flackr> una: I'm against relying on :after or :before because devs use this for things like arrows or other elements, and backdrop is what we use to apply exactly what we're trying to do here
<JonathanNeal> I will use the queue to express support in the call
<JonathanNeal> q+
<JonathanNeal> nvm
<JonathanNeal> :)
<flackr> una: to gregwhitworth's points, i don't think you need multiple elements for the common use case
<masonf> Proposed resolution: add a ::backdrop pseudo element behind popups.
<JonathanNeal> +1 to adding a backdrop pseudo element
<JonathanNeal> +1
<flackr> +1
<flackr> Resolved: add a ::backdrop pseudo element behind popups.
<JonathanNeal> yay!
<gregwhitworth> Zakim, end meeting
<Zakim> As of this point the attendees have been gregwhitworth, masonf, JonathanNeal, emilio, dandclark, miriam, davatron, dbaron, una, hdv, NaN, tantek, flackr
<Zakim> RRSAgent, please draft minutes
<RRSAgent> I have made the request to generate https://www.w3.org/2022/04/21-openui-minutes.html Zakim
<Zakim> I am happy to have been of service, gregwhitworth; please remember to excuse RRSAgent. Goodbye

[mfreed7]

Note the resolution from the notes above:

<flackr> Resolved: add a ::backdrop pseudo element behind popups.

[mfreed7]

@una Per the discussion, would you mind opening a fresh issue, if you'd still like, to discuss whether there should be a modal popup capability? I'd like to close this issue as resolved.