Editor: Front-end link doesn't match the style of other panels

[t-hamano]

Description

In #63669, some improvements have been made to the post URL UI. As part of this, the ExternalLink component is now applied to the post URL instead of the Button component when on the front page.

The ExternalLink component has very little styling, so its styling is affected by the link styling provided by WP-Admin. This results in inconsistencies with other panels.

Here's what I feel is the problem.

---

1. The color doesn't match with other panels if the admin color scheme is changed:

---

2. Even though the color scheme is the default, the colors are slightly different. Additionally, there is no focus animation, and the focus outline is styled differently:

---

3. The a element has rel="external". The external value is used to the referenced document is not part of the current site, so I don't think it's appropriate.

Step-by-step reproduction instructions

• Set any page as the front page.
• Open the page.
• Check the post sidebar.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• [x] Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• [x] Yes

Please confirm which theme type you used for testing.

• [ ] Block
• [ ] Classic
• [ ] Hybrid (e.g. classic with theme.json)
• [ ] Not sure

[t-hamano]

I don't think this is a critical bug, but since this is new to WP 6.8, let's add it to the project board.

[t-hamano]

My suggestion for now is to revert the special handling for the front page and ship it in 6.8. After that, we can reconsider the ideal approach from all aspects of design, accessibility, and functionality.

cc @afercia @joedolson @gigitux

[Mamaduka]

Punting this to WP 6.9

[coder-rancho]

I was able to reproduce both issues. I'll be raising a PR soon to fix it by reverting special handling for front page introduced in #63669

[carolinan]

Why does this need accessibility feedback? Is there a specific question you want answered?

Currently, both the hover and focus style is different from the surrounding items.

I would like both the hover and focus styles of all items in this panel to be drastically more visibly different, but I don't think this would be accepted, so, I'd recommend not underlining this link by default and use the same hover and focus styles as the surrounding items.

[t-hamano]

Why does this need accessibility feedback? Is there a specific question you want answered?

One of the questions is, "Is it acceptable from an accessibility perspective to apply a color scheme to external link elements to improve the color inconsistency?" Because the color of the a element is blue (#0073aa), regardless of the color scheme. I expect this is an intentional specification to maintain color contrast.

[carolinan]

Personally I would expect the colors to match my chosen admin color scheme, and the surrounding items, but keep the icon and the aria label with the additional context.

[joedolson]

If a user chooses a color scheme that implements low contrast, that's their choice. We need to ensure that default color schemes are accessible, but otherwise I'd expect color schemes to be consistent.

[t-hamano]

Thanks for the feedback, everyone.

Well then, let's keep the current ExternalLink component and give it a color and focus style that matches the other buttons.

@coder-rancho do you have the bandwidth to work with the issue? We may be able to close #69772 and start a new PR.

[coder-rancho]

Hey @t-hamano , I do not have the bandwidth to work on this task. I'm caught up for next few weeks.

[t-hamano]

@coder-rancho Thanks for the reply. Let's close #69772 and wait for other contributors who might be interested in working on this.