It should be possible to select the heading text for site health check issues

[johnbillion]

After checking the Tools -> Site Health screen and seeing some critical issues, my first instinct was to copy one of the error messages into a search engine to see what the resolution might be.

Unfortunately it's not possible to select the text in the heading of the expanding panels on this screen to do that. This appears to be because the toggles are <button> elements.

It should be possible to select the heading text so users can quickly look up information relating to the errors, particularly for issues that themselves don't provider further information or links.

[afercia]

@johnbillion thanks!

The various check “titles” in the Site Health pages are headings that contain buttons. Their text is plain text and the selection mechanism is not different from the standard behavior of native <button> elements. I’m not sure there’s anything to “fix”.

Actually, it is possible to select with mouse by starting the selection from outside the edges of the "titles". After all, the same thing happens for normal <button> elements: you need to start the selection from outside the button.

Any suggestions fpr a better behavior?

[johnbillion]

Unfortunately I don't have any suggestion for a better implementation -- my understanding is that a <button> is the most appropriate and accessible element to use for an expand/contract toggle control -- but it is confusing for the user to not be able to select this heading text when it's styled to look like a heading instead of a button.

Are there ways to make the text inside a button user selectable?

[afercia]

Are there ways to make the text inside a button user selectable?

Hm to start, we should make sure to address inconsistencies across browsers. For example, Firefox uses user-select: none; for buttons in its default stylesheet. We should set it to user-select: auto; explicitly in a quick patch.

Selecting the text is possible, in a way, but it's not that easy or intuitive. The mouse selection needs to start from outside the buttons. See attached aniamted GIF.

We could try to add some padding to the headings, to make the selection start easier but that would also reduce the clickable area.

I can't think of other ways off the top of my head. One option could be making the whole check text selectable by adding a "Copy" button like in the "Info" page at site-health.php?tab=debug.

[afercia]

Selection with mouse

[sabernhardt]

user-select: auto, with all vendor prefixes

[sabernhardt]

Adding user-select: auto:

1. It is easier to select the button text in Firefox (Windows). It's also easier to select only part of the full text.
2. I did not notice any difference for Chrome (Windows), Edge or IE, even with the vendor prefixes.

I had also tried user-select: text, but I see no difference between that and auto.

The selection of vendor prefixes matches what was used in common.css (for user-select: none).

[afercia]

Milestoning for 5.5. The first, simple, improvement with user-select: auto can be easily fixed in time for the release.

[Clorith]

I also floated towards a copy-button like solution, but that feels more natural for the whole issue, and not just a part of it, so you'd not be solving the immediate purpose of this ticket of getting the title for a quick trip to your favorite search engine.

It makes sense to at least get 50281.patch​ in, to allow for selecting from outside the button in all browsers at the very least, but besides that..

Maybe if we added one of those "copy" icons next to the title on hover, that only copies the title when clicked, sort of like Github lets you copy tokens?

[audrasjb]

user-select: auto works fine

[audrasjb]

I tested the patch, it still applies cleanly and fixes the issue, at least for some browsers.
Marking this for commit as it looks like a nice mid-point.

[SergeyBiryukov]

In 48144:

Accessibility: Site Health: Make the heading text for site health check issues easier to select in Firefox.

Props afercia, sabernhardt, johnbillion, Clorith, audrasjb.
Fixes #50281.