IRC log of openui on 2025-01-09

Timestamps are in UTC.

18:51:59 [RRSAgent]
RRSAgent has joined #openui
18:52:03 [RRSAgent]
logging to https://www.w3.org/2025/01/09-openui-irc
18:58:50 [scott]
scott has joined #openui
19:00:38 [masonf]
masonf has joined #openui
19:00:50 [gregwhitworth]
Zakim, start meeting
19:00:50 [Zakim]
RRSAgent, make logs Public
19:00:58 [Zakim]
please title this meeting ("meeting: ..."), gregwhitworth
19:01:00 [gregwhitworth]
meeting: Open UI Telecon
19:01:14 [gregwhitworth]
chair: Greg Whitworth
19:02:03 [jarhar]
jarhar has joined #openui
19:02:12 [gregwhitworth]
github-bot, take up https://github.com/openui/open-ui/issues/700
19:02:12 [github-bot]
Topic: Consider "toggle" (e.g., show/hide - expand/collapse) button or attribute
19:02:12 [github-bot]
OK, I'll post this discussion to https://github.com/openui/open-ui/issues/700.
19:02:20 [lwarlow]
lwarlow has joined #openui
19:02:26 [lwarlow]
present+
19:02:32 [dbaron]
Present+
19:02:51 [gregwhitworth]
present+
19:03:14 [jarhar]
lwarlow: there are many things on the web that show and hide the content in them. currently theres not necessarily a great way of implementing that without javascript but also like to implement it nicely, can be difficult
19:03:31 [masonf]
present+
19:03:33 [jarhar]
lwarlow: the details element, which is perfect in some situations, but its got some rough edges to it, and it also just isnt the correct solution in all cases
19:03:44 [jarhar]
lwarlow: even with the new styling stuff, which is great, its still problematic for certain things
19:03:45 [masonf]
q+
19:03:54 [jarhar]
lwarlow: it would be nice if we had some sort of thing that could do that in a more generic way
19:04:06 [jarhar]
lwarlow: comand invokers could be the summary equivalent thing which is a button that triggers this
19:04:13 [jarhar]
lwarlow: i put a comment with some questions
19:04:23 [jarhar]
lwarlow: i dont have answers to all of these, but thats the gist of it
19:04:38 [jarhar]
lwarlow: the latest proposal is to have an attriubute called bruce. that would turn the elemnt into a showy hidy thing
19:04:47 [jarhar]
lwarlow: some questions: would this add js apis? yes, like popover does
19:04:56 [jarhar]
lwarlow: what theyre called, we can decide, but expand collapse and toggle sort of thing
19:05:08 [jarhar]
lwarlow: theres questions about which pseudo classes it should match. i think :open is correct, maybe not
19:05:12 [jarhar]
lwarlow: aria roles and states and stuff
19:05:22 [gregwhitworth]
ack masonf
19:06:11 [jarhar]
masonf: the question i wanted to ask - i see the point, the shape seems ok, but i think where we should start or make sure we've discussed first: why isn't summary details the answer? i know theres issues with it, but like fundamentally summary details is a button that opens and closes regions of content, it meets everything you just said i think.
19:06:11 [jarhar]
is it possible that we fix whatevers missing? or are there fundamental things it cant do?
19:06:16 [scott]
q+
19:06:19 [keithamus]
keithamus has joined #openui
19:06:57 [gregwhitworth]
q+
19:07:05 [gregwhitworth]
ack scott
19:07:20 [jarhar]
scott: i look at details summary and i dont think its really the solution for imagine a static navigation. im thinking like small viewport, you have a list of links, but some of those links have a button next to them to expand and collapse some navigation. not a popup, but some navigation within that.
19:07:43 [jarhar]
scott: i wouldnt think of that as a details summary semantically where theres a legend or label for contents, those are often just a down chevron, a single button that should be able to open and close things
19:08:25 [jarhar]
scott: thats one of the use cases. theres others, but another one that i would point to: weve been talking about accessibility issues with details. in some browsers its mapped to a button and in gecko its a summary role, but thats not an aria thing
19:08:41 [jarhar]
scott: if more browsers mimicked that, then that role doesn't have the presentational children of buttons
19:08:51 [jarhar]
scott: it kind of mitigates the whole you can't put interactive content inside of a button
19:09:02 [jarhar]
scott: there are use cases for that, and then theres use cases for buttons that open and close things
19:09:16 [jarhar]
scott: i think thats how id summarize it - its semantically a bit different
19:09:25 [lwarlow]
q?
19:09:54 [jarhar]
masonf: i get that point. maybe we should be adding more behaviors to other elements that can do this? i wonder if this disclosure thing is a global attribute or just goes on summary details?
19:09:54 [lwarlow]
q+
19:10:23 [jarhar]
scott: that was one of lukes questions, i could see if very well being similar to the popover attribute. theres just enough things it does belong on that it makes sense for it to be a global attribute, but why would you put this on the body element?
19:11:01 [jarhar]
gregwhitworth: i posted lea's status where she gives us props for not doing the element. i envision us hitting similar things where one of the reasons we went that route is because use csaes cant be solved by them being elemnts
19:11:15 [jarhar]
gregwhitworth: the irony is that her tweet before that is supporting scotts initial thing where he wanted a drawer element
19:11:21 [jarhar]
gregwhitworth: so it would be popover plus toggling
19:11:50 [jarhar]
gregwhitworth: the invoker thing is starting to become the thing in which we say that this thing is going to do something with that. that was raised on that thread as well
19:12:06 [jarhar]
gregwhitworth: i see the value, details summary is there, tabs we would be doing something similar. details summaries coudl be laid out to be tabs
19:12:13 [gregwhitworth]
ack gregwhitworth
19:12:15 [gregwhitworth]
ack lwarlow
19:13:02 [jarhar]
lwarlow: i think on the cant do details summary, i dont know if these are not fixable problems, react aria has a details thing partially because of the styling thing. stuff like their design have it so you can have stuff adjacent to - inside the summary but not actually inside it. another button that does something else. in theory you can't put in
19:13:02 [jarhar]
a summary but then youd have nested interactives
19:13:19 [gregwhitworth]
q+ naman
19:13:24 [jarhar]
lwarlow: i think the other thing is the fact that the spec doesn't match impls, but details summary you cant necessarily change the roles
19:13:41 [jarhar]
lwarlow: i think a details is just a group at the moment, and then summary is slightly weird. if you had other roles you needed to use you cant do that in the current model
19:14:10 [jarhar]
scott: in the aria and html spec the reason that we have that rule in there is because if there have been cases where changing the roles of those elements it stops working in the accessibility tree. its more of an author rule, but visually it would look fine
19:14:18 [nmn]
nmn has joined #openui
19:14:54 [jarhar]
lwarlow: the one other thing is you dont necessarily want the trigger to be adjacent to the thing thats expanding. now in chrome you can go ham with css and mess things about, but a hamburger menu if you want that to do an expanding thing - having a summary inside the details limits that
19:14:56 [scott]
q+ to say that's another use case. an expand all button or collapse all button.
19:15:26 [jarhar]
lwarlow: i did at some point make a tab component that is using details summary, and the exclusive stuff to make a tab like thing, and i used the prototype invokers and hiding the summary
19:15:39 [jarhar]
lwarlow: you can do that, it requires js, but none of thats necessarily correct because of certain impl problems
19:15:42 [masonf]
q+
19:16:12 [jarhar]
lwarlow: this was brought up by someone on mastodon, my first thought was details summary already does this. to me theres enough distinction if we can come up with concrete use cases where details summary doesnt work
19:16:21 [gregwhitworth]
ack naman
19:16:28 [jarhar]
nmn: is there a use case for a toggle thats not to show or hide something?
19:17:18 [jarhar]
nmn: you use css to hide the details, or extend details summary. would it make sense to allow details to be used without a summary, and you use an invoker to open or close it?
19:17:43 [jarhar]
scott: i would think that would have backwards compat issues because if you don't put a summary in a details then it would automatically get added
19:18:22 [jarhar]
lwarlow: command invokers dont currently touch details
19:18:38 [jarhar]
lwarlow: there is a prototype to do it with details, but i dont necessarily know if thats what we want
19:18:49 [jarhar]
lwarlow: maybe instead we would just have a new thing and say use invokers with that
19:18:53 [gregwhitworth]
ack scott
19:18:53 [Zakim]
scott, you wanted to say that's another use case. an expand all button or collapse all button.
19:19:16 [jarhar]
scott: an expand all button and collapse all button is another instance where this would be useful because you wouldn't use a details summary to collapse other details
19:20:01 [jarhar]
scott: my original thought was that in some cases i have a button that invokes - my content is actually a popover for larger screen views, but i could write a script and swap that out and have another feature where another button invokes the same thing but its displayed inline. or i could have two buttons and display one, but its the same content
19:20:01 [jarhar]
that shows up as a popup or a disclosure
19:20:12 [jarhar]
scott: one of them i can do with html and the other i have to do with javascript
19:20:13 [gregwhitworth]
ack masonf
19:20:33 [jarhar]
masonf: some of the arguments are semantic, so whatwg would be ok with that
19:21:16 [lwarlow]
q+
19:21:31 [jarhar]
masonf: one thing that naman said is that a lot of the discussion about the magical hiding thing. what if the attribute was called openable, and that opts it in to matching or not matching the :open pseudo class, maybe adds toggle if you want, and its up to the developer to add a rule to display:none. all this attribute adds is one bit of state
19:21:31 [jarhar]
which matches the pseudo-class, and then you dont have to worry about hiding
19:21:52 [jarhar]
masonf: avoiding having to decide whether its display:none or visibility:hidden, and these questions it sidesteps
19:21:53 [gregwhitworth]
ack lwarlow
19:22:01 [jarhar]
lwarlow: i like that, but theres no way in css to do the find in page stuff
19:22:07 [keithamus]
keithamus has joined #openui
19:22:13 [jarhar]
lwarlow: content-visibility:hidden might match, but hidden=until-found is special html stuff
19:22:41 [jarhar]
lwarlow i could see a div that has hidden=until-found, and you can kind of make it display when its opened. the only bit there is that once its opened...
19:23:03 [jarhar]
lwarlow: you could special case it where you don't have to remove the attribute. it does get removed, but this element has this other thing, so we're going to leave it and let it do stuff
19:23:13 [jarhar]
masonf: when it has openable and hidden=until-found they play well together
19:23:21 [scott]
q+
19:23:25 [jarhar]
lwarlow: that does quite neatly avoid all the questions around does this work or does this not
19:23:35 [jarhar]
lwarlow: maybe we do need default styles? but maybe not?
19:23:59 [gregwhitworth]
ack scott
19:24:14 [jarhar]
scott: since im not hearing anyone say i hate this, i was going to ask luke, do you want to help me write a proposal for this?
19:24:21 [gregwhitworth]
q+
19:24:44 [jarhar]
scott: since you already did work on the proposal for the pressed button which could the other question be for about, like other toggleable things, and this one is for show and hide and stuff
19:25:17 [jarhar]
gregwhitworth: i would like clarity on the amount of things ive seen listed - invoker or commandfor? where does that line start and stop? i think that would be useful to understand
19:25:45 [jarhar]
gregwhitworth: ive seen in the explainer video play start and stop so that its declarative. it feels like its becoming like state commands, and thats why im like at what point are those command this type of things?
19:25:53 [jarhar]
gregwhitworth: what if devs think to try this
19:26:21 [jarhar]
masonf: the proposal here is theres two parts: you put the openable attribute on something, and the other half is to use the command attribute to toggle it
19:26:23 [gregwhitworth]
ack gregwhitworth
19:26:38 [jarhar]
scott: when i wrote this command/commandfor didn't exist yet, but now we can just use command
19:27:04 [jarhar]
lwarlow: as for where the line is drawn, currently the thing going into html is custom command which is nice to have on its own, popover commands, and modal dialog
19:27:37 [jarhar]
lwarlow: followups to that would be this thing if this happens may be details if this doesn't happen. input and seelct have showpicker methods so we could see if we have a declarative way to do that. input especially it could be useful, that would be a fast followup
19:28:00 [jarhar]
lwarlow: media controls and whatnot, i think its cool if we could do them. differnet class of things. all of them are currently aria expand and stuff, except for the custom ones
19:28:05 [jarhar]
lwarlow: not really a clear line of where to stop
19:28:20 [masonf]
Proposed resolution: Add a global attribute called `openable` that opts an element into matching `:open`, adds JS methods like .open(), .close(), and .toggle(), and connects to command/commandfor.
19:28:22 [jarhar]
gregwhitworth: thanks, and thats a separate issue, just a quick clarifier, and it sounds like were using it so cool
19:28:38 [jarhar]
q+
19:28:43 [keithamus]
+1
19:28:51 [gregwhitworth]
ack jarhar
19:28:57 [gregwhitworth]
q+ nmn
19:29:11 [masonf]
jarhar: for popover, we could have used :open, but we chose not to, because it conflicts with :open when on something like <dialog>
19:29:18 [masonf]
jarhar: maybe we need a different pseudo class, other than :open.
19:29:20 [lwarlow]
+1 (minus bikeshedding)
19:29:30 [gregwhitworth]
ack dbaron
19:29:32 [masonf]
jProposed resolution: Add a global attribute called `openable` that opts an element into matching `:open`, adds JS methods like .open(), .close(), and .toggle(), and connects to command/commandfor. All names subject to bikeshedding.
19:29:53 [jarhar]
dbaron: the proposed resolution adds js methods. i dont think we should have a mechanism for adding or removing js methods based on an attribute
19:30:11 [jarhar]
masonf: yeah it would have to throw if we dont have the attribute
19:30:17 [dbaron]
s/should have/have/
19:30:23 [jarhar]
masonf: whatever we did for popover we should do
19:30:33 [jarhar]
scott: this could be the same as popover, it just doesn't go into the top layer
19:30:53 [gregwhitworth]
ack nmn
19:31:01 [lwarlow]
q+
19:31:09 [gregwhitworth]
ack lwarlow
19:31:11 [dbaron]
(One other issue is whether there are existing elements with open/close/toggle methods.)
19:31:37 [masonf]
Proposed resolution: Add a global attribute called `mason` that opts an element into matching `:open`, adds JS methods like .open(), .close(), and .toggle(), and connects to command/commandfor. All names subject to bikeshedding.
19:32:26 [jarhar]
masonf: we dont need closewatcher, it doesn't block navigation
19:32:37 [jarhar]
keithamus: this isn't necessarily floating ui
19:32:39 [lwarlow]
+1
19:32:50 [scott]
+1
19:32:53 [masonf]
+100, given the name
19:32:54 [keithamus]
+1
19:33:00 [jarhar]
+1
19:33:01 [nmn]
+1
19:33:10 [masonf]
RESOLVED: Add a global attribute called `openable` that opts an element into matching `:open`, adds JS methods like .open(), .close(), and .toggle(), and connects to command/commandfor. All names subject to bikeshedding.
19:33:42 [gregwhitworth]
Zakim, end meeting
19:33:42 [Zakim]
As of this point the attendees have been lwarlow, dbaron, gregwhitworth, masonf
19:33:45 [Zakim]
RRSAgent, please draft minutes
19:33:46 [RRSAgent]
I have made the request to generate https://www.w3.org/2025/01/09-openui-minutes.html Zakim
19:33:53 [Zakim]
I am happy to have been of service, gregwhitworth; please remember to excuse RRSAgent. Goodbye
19:33:53 [Zakim]
Zakim has left #openui
20:47:08 [Penny]
Penny has joined #openui
22:07:51 [Penny]
Penny has joined #openui