Make WordPress Core

Opened 5 weeks ago

Closed 12 days ago

#50281 closed defect (bug) (fixed)

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

Reported by: johnbillion Owned by: audrasjb
Milestone: 5.5 Priority: normal
Severity: normal Version: 5.2
Component: Site Health Keywords: has-patch has-screenshots commit
Focuses: accessibility Cc:


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.

Attachments (3)

select.gif (239.0 KB) - added by afercia 4 weeks ago.
Selection with mouse
50281.patch (465 bytes) - added by sabernhardt 4 weeks ago.
user-select: auto, with all vendor prefixes
1502fba8e5a55ae408edaa4204454dda.gif (907.6 KB) - added by audrasjb 12 days ago.
user-select: auto works fine

Download all attachments as: .zip

Change History (16)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

4 weeks ago

#2 @afercia
4 weeks ago

  • Keywords reporter-feedback added

@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?

#3 @johnbillion
4 weeks ago

  • Keywords reporter-feedback removed

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?

#4 @afercia
4 weeks ago

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.

4 weeks ago

Selection with mouse

4 weeks ago

user-select: auto, with all vendor prefixes

#5 @sabernhardt
4 weeks ago

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).

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

3 weeks ago

#7 @afercia
3 weeks ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.5

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

#8 @afercia
3 weeks ago

  • Keywords has-patch added; needs-patch removed

This ticket was mentioned in Slack in #core-site-health by afragen. View the logs.

13 days ago

#10 @Clorith
13 days ago

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?

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.

12 days ago

12 days ago

user-select: auto works fine

#12 @audrasjb
12 days ago

  • Keywords has-screenshots commit added
  • Owner set to audrasjb
  • Status changed from new to accepted

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.

#13 @SergeyBiryukov
12 days ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

Note: See TracTickets for help on using tickets.