Make WordPress Core

Opened 2 years ago

Last modified 12 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 2 years ago.
proof of concept
toolbar-external-links-text.png (6.4 KB) - added by sabernhardt 2 years ago.
"External links" text above WP site links
55960.1.diff (797 bytes) - added by sabernhardt 2 years ago.
associating text with the external links list
toolbar-external-links-div.png (4.1 KB) - added by sabernhardt 2 years ago.
menu with 55960.1.diff

Download all attachments as: .zip

Change History (25)

#1 @sabernhardt
2 years 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
2 years ago

proof of concept

@sabernhardt
2 years ago

"External links" text above WP site links

#2 @sabernhardt
2 years ago

  • Keywords has-patch added

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

#3 @itpathsolutions
2 years ago

  • Keywords needs-testing added

@sabernhardt
2 years ago

associating text with the external links list

@sabernhardt
2 years ago

menu with 55960.1.diff

#4 @sabernhardt
2 years 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.


2 years ago

#6 follow-up: @sabernhardt
2 years 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
2 years 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 2 years ago by itpathsolutions (previous) (diff)

#8 in reply to: ↑ 7 @itpathsolutions
2 years 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
2 years 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 2 years ago by sabernhardt (previous) (diff)

#10 @ryokuhi
2 years 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
2 years 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
19 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.


19 months ago

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


18 months ago

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


15 months ago

#16 @joedolson
15 months ago

  • Milestone changed from Awaiting Review to 6.3

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


12 months ago

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


12 months ago

#19 @sabernhardt
12 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
12 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
12 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 12 months ago by sabernhardt (previous) (diff)
Note: See TracTickets for help on using tickets.