[techniques/authoring-html] Make the text in the <summary> elements not selectable?

[xfq]

https://w3c.github.io/i18n-drafts/techniques/authoring-html.en

When expanding/collapsing a section by clicking the section heading (i.e., the <summary> element), it's really easy for me to select the text in the heading accidentally when expanding and collapsing a section quickly (just for a quick short look at the section, for example), which is annoying.

Personally, I'd really like to disable the selection of the <summary> element (for example, by using user-select: none;).

(I also filed issues in the Firefox and Chromium issue trackers, to see if it can become a part of the UA style sheets.)

[r12a]

As i said privately, since summary text is just ordinary text, like other elements in an HTML page, i disagree that it should be unselectable. Note that the summary text can be quite long, if desired. I think it's important to be able to select that text, autotranslate it, etc., just like any other text, including link and button text (which you also click on to trigger an action).

[xfq]

I'm a bit curious - did you ever accidentally expand/collapse the section when selecting the text in the <select> element, @r12a?

IMHO the situation for links is better, because it's unusual for me to click the link by accident when selecting text in a link, but when selecting (not clicking) text in a <summary> element, it's very easy for me to expand the element by mistake, at least in the browsers I use.

The text in a <button> element is not selectable by default in Firefox, but I haven't tried it in other browsers.

[xfq]

About <button>:

The following additions are made to the UA stylesheet for HTML:

button, meter, progress, select { user-select: none; }

the list above is incomplete, and needs to include at least the various button-like variants of <input>.

https://drafts.csswg.org/css-ui-4/#content-selection

[xfq]

It looks like MDN's toggler does not have this problem. For example, see the toggler of the events on the left column of this page: https://developer.mozilla.org/en-US/docs/Web/Events

It's still selectable, but you can't select/highlight the text accidentally by double/triple-clicking. It uses JavaScript, though: https://github.com/mozilla/kuma/blob/8f41629afbd1e0bd7146ba2164529d65e7cdda26/kuma/static/js/components.js#L314

---

Screenshot:

[fantasai]

@xfq What's different about links vs summary that makes one a problem and the other not? And could that difference be implemented in UAs, instead of making them unselectable?

[r12a]

Assuming this is stale. If not, please reopen.

[xfq]

Yeah, there's not much progress on this issue, so I decided to write an WebExtension instead of adding the behavior to the standards.