Make WordPress Core

Opened 21 months ago

Last modified 8 months ago

#55960 reopened enhancement

External links in WordPress toolbar

Reported by: itpathsolutions's profile itpathsolutions Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Toolbar Keywords: has-patch has-screenshots needs-design-feedback
Focuses: ui, accessibility Cc:

Description

UI suggestion for WordPress backend.

When use clicks on any of this link page should open in new tab. Currently it opens in same tab and I navigate off my website.

https://prnt.sc/eW2Ry6ZzUrc4

Attachments (4)

55960.diff (1.2 KB) - added by sabernhardt 21 months ago.
proof of concept
toolbar-external-links-text.png (6.4 KB) - added by sabernhardt 21 months ago.
"External links" text above WP site links
55960.1.diff (797 bytes) - added by sabernhardt 21 months ago.
associating text with the external links list
toolbar-external-links-div.png (4.1 KB) - added by sabernhardt 21 months ago.
menu with 55960.1.diff

Download all attachments as: .zip

Change History (25)

#1 @sabernhardt
21 months ago

  • Keywords 2nd-opinion removed
  • Summary changed from UI suggestion for WordPress backend. to External links in WordPress toolbar
  • Version 6.0 deleted

Thanks for opening the ticket!

Trac had a similar request for another external link in #52953, but forcing external links to open in a new tab is not the best way (#23432). Indicating external links, so people can choose to open in a new tab, would be helpful.

Perhaps this menu could explicitly say "External links" before the secondary links list.

@sabernhardt
21 months ago

proof of concept

@sabernhardt
21 months ago

"External links" text above WP site links

#2 @sabernhardt
21 months ago

  • Keywords has-patch added

I made a quick patch to test the idea (and revise/iterate).

#3 @itpathsolutions
21 months ago

  • Keywords needs-testing added

@sabernhardt
21 months ago

associating text with the external links list

@sabernhardt
21 months ago

menu with 55960.1.diff

#4 @sabernhardt
21 months ago

  • Focuses accessibility added

Using the text as a way to label the list could benefit screen reader users.

When testing with a screen reader, I recommend forcing this menu to expand with CSS:

#wpadminbar #wp-admin-bar-wp-logo .ab-sub-wrapper {
  display: block;
}

At least in the default color scheme, the different text color stands out enough that the label probably does not need to be bold. Other style adjustments might be good.

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


21 months ago

#6 follow-up: @sabernhardt
21 months ago

  • Keywords needs-design-feedback added; needs-testing removed

During the Accessibility bug scrub, @ryokuhi asked for design feedback about creating a "heading" in the toolbar.

Also, Maja Benke (@travel_girl) commented:

personally I think external links does not have to be indicated as external links. but I agree, that external Links inside a main navigation is not great.

#7 in reply to: ↑ 6 ; follow-up: @itpathsolutions
20 months ago

  • Keywords reporter-feedback has-screenshots added; needs-design-feedback removed
  • Resolution set to invalid
  • Status changed from new to closed

Hi,

I have one suggestion.
We can add "external link icon" to make it clear to the user that it's an external link. Please check attached screenshots for more details.

https://prnt.sc/gck9eFD9a9CE

Replying to sabernhardt:

During the Accessibility bug scrub, @ryokuhi asked for design feedback about creating a "heading" in the toolbar.

Also, Maja Benke (@travel_girl) commented:

personally I think external links does not have to be indicated as external links. but I agree, that external Links inside a main navigation is not great.

Last edited 20 months ago by itpathsolutions (previous) (diff)

#8 in reply to: ↑ 7 @itpathsolutions
20 months ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

Replying to itpathsolutions:

Hi,

I have one suggestion.
We can add "external link icon" to make it clear to the user that it's an external link. Please check attached screenshots for more details.

https://prnt.sc/gck9eFD9a9CE

Replying to sabernhardt:

During the Accessibility bug scrub, @ryokuhi asked for design feedback about creating a "heading" in the toolbar.

Also, Maja Benke (@travel_girl) commented:

personally I think external links does not have to be indicated as external links. but I agree, that external Links inside a main navigation is not great.

#9 @sabernhardt
20 months ago

  • Keywords needs-design-feedback added; reporter-feedback removed

Maybe these could have an icon, though some links still force opening in a separate tab and use the external link icon. I did not suggest that icon to avoid any expectation that these would open in a new tab.

Last edited 20 months ago by sabernhardt (previous) (diff)

#10 @ryokuhi
20 months ago

The main problem with icons is that their meaning is often not self-evident. I think the icon suggested by @itpathsolutions is the correct one for external links, but it is also mistakenly used to mark links that open in a new tab. Adding the icon might cause false expectations for sighted users if the link doesn't open in a new tab.

If we consider the needs of people who can't rely on sight, I think adding an icon (and an alternative for screen readers) to each link might pollute the interface, which is why I like @sabernhardt's "heading" proposal.

I suggested waiting for feedback from the Design Team as adding a "heading" in the top toolbar is probably a novelty for WordPress Core and, as such, should require a little exploration.

#11 @itpathsolutions
20 months ago

Yes, I think we can make those links open in new tab. So, suggested icons will surely makes correct sense.

Still let's wait what Design Team decides for the same.

#12 @itpathsolutions
16 months ago

Hi,

Any update on this suggestion from WordPress design Team.

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


15 months ago

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


14 months ago

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


11 months ago

#16 @joedolson
11 months ago

  • Milestone changed from Awaiting Review to 6.3

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


9 months ago

This ticket was mentioned in Slack in #design by sabernhardt. View the logs.


9 months ago

#19 @sabernhardt
8 months ago

@joen wrote on Slack:

My personal take is that this part of the admin UI is somewhat due for a rethink. I would personally never look for external links in that W menu in the first place. That’s mainly to say I think there are some longer term considerations we can look at.

In the mean time, I would prefer showing icons next to each item, such as ↗ or even a dedicated icon. But it’s not a strong opinion. Hope that helps.

The long-term considerations belong on #32678, which suggested removing the W menu entirely (note that those comments predate the block editor). For another option, we might consider replacing the external links with one link to a dedicated admin page with links to support, documentation and feedback.

#20 @joedolson
8 months ago

I'd be highly in favor of adding a dedicated admin page that contained links for support and documentation. That would enable us to provide much better guidance and include more valuable information for users, as well as having capacity to remove these very low-value links from a high traffic interface.

I think it would be worthwhile to forego making these changes in favor of adding a new admin page with this information.

#21 @sabernhardt
8 months ago

  • Milestone changed from 6.3 to Future Release

Probably should open a new Help/About ticket to discuss an admin page then. (#58595)

I'll move this out of the milestone.

Last edited 8 months ago by sabernhardt (previous) (diff)
Note: See TracTickets for help on using tickets.