Confusing UI for <details> in the Participant Agreement

[zcorpan]

In whatwg/html#8241 @tashasyarifah struggled to sign the Participant Agreement because they thought the triangles were bullet points of a list, and clicked the link "Individual" which doesn't expand the <details> but just scrolls up to the definition.

This is confusing UI. We shouldn't use links in <summary> (also see whatwg/html#2272), and the styling could maybe be different to make it more usable.

For example, maybe there could be a radio button group for signing as individual vs entity, and selecting the radio button expands the appropriate <details>.

Currently it looks like this:

Straw person proposal:

[domenic]

This is confusing UI. We shouldn't use links in <summary> (also see whatwg/html#2272),

I disagree with this; I think the UI is fine as-is in that regard.

Removing triangles if they have confused someone seems fine I guess, but I think disclosure triangles are a pretty common UI pattern...

[zcorpan]

I don't think removing the triangles solves anything. With that as the only change, people would still be tempted to click the link, and then not be aware that they're expected to click the text next to the link to expand an initially invisible form.

[zcorpan]

With my suggested change, the natural next step is to click one of the radio buttons, rather than clicking the links. When you do that, the details opens and then the natural next step is to fill in the now visible form.

[tashasyarifah]

After looking back, I figure out there are two actions that happen in <summary>. First, click the If signing as an individual which opens <details> that have a form. Second, click the link which individual that will scroll up to the definition. Yesterday, I had no idea if there were two actions.

I agree that not to input links in a summary. It might solve the problem. So, it will open the form automatically when people click it. It will look like this.

For the definition, might be we can give the reference or statement like in the Entity form.

Other suggestions will be to change the style for links in a <summary>. We can see that the font-weight are bold. It seems like no difference between them. Try to change font-weight for links to normal. There will be a significant difference. People will focus on bold text and might realize that the links are additional information. Here's the picture of what it looks like.