DataViews: link color for focus styles bleeds from wp-admin

[oandregal]

Part of #55083

What

a elements with focus have a style (both link color and outline) that doesn't relate to the selected wp-admin theme.

Step-by-step reproduction instructions

• Go to "Users > Profile" and select a distinctive theme. For example, Sunrise.
• Visit one of the dataviews-powered pages. For example, "Site Editor > Pages > Manage all pages".
• Make the primary field focused. Either by navigating with the keyboard or by opening the devtools and make the focus class active for the a element that renders the primary field.

Screenshots, screen recording, code snippet

Table	Grid

[oandregal]

I've boiled down the issue to these stylesheets:

• outline: wp-admin common.css
• link color: wp-admin colors.css & variables.css

I understand this may be an upstream issue: shouldn't the wp-admin theme be allowed to select a different color for the links? Not sure how to fix it. I also wonder if we can do anything downstream, in DataView.

cc @jameskoster @SaxonF @jasmussen for thoughts.

[jameskoster]

Aside from the 'Modern' theme, it seems all admin skins use the same link color which probably explains the identical focus styles applied to a.

This issue can be seen in other areas of Gutenberg such as the block inspector:

In this particular case (data views) the text color changing feels a bit awkward to me, that should probably not change on focus.

More generally do we want to apply the wp-admin focus style (shadow) to links in Gutenberg, or be more consistent with other elements and utilise a solid focus ring instead?

Somewhat related; should we use focus-visible here? The appearance of these treatments on click is a bit distracting.

[jasmussen]

We likely need to update the A style so it has the 1.5px focus style othe buttons in the UI have. The current box-shadow isn't actually that clear, and the color (both resting and focus states) should take from the admin scheme. We can override this locally here, but really it should be fixed at the source. I think keeping the focus state for links is fine, it can go a few ways since it just needs to be a shape change. Can be the full focus ring, it can be the full focus ring but the text-underline removed on focus, so it's just the blue text with the ring, or it can be just a thicker bottom border. I lean towards the second option, full focus ring but just no underline on focus.