Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
xfq opened this issue Nov 2, 2017 · 7 comments

Comments

@xfq
Copy link
Member

xfq commented Nov 2, 2017

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
Copy link
Contributor

r12a commented Nov 3, 2017

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
Copy link
Member Author

xfq commented Nov 3, 2017

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
Copy link
Member Author

xfq commented Nov 5, 2017

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
Copy link
Member Author

xfq commented Dec 2, 2017

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:

events

@fantasai
Copy link

@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
Copy link
Contributor

r12a commented Sep 4, 2020

Assuming this is stale. If not, please reopen.

@r12a r12a closed this as completed Sep 4, 2020
@xfq
Copy link
Member Author

xfq commented Sep 5, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants