Non-hyperlink anchors (a elements) have hyperlink styling

I have attached a patch and added after patch screenshot for same. please review

Verified the latest patch and after applying #4 patch it is working fine. For reference attaching before and after screenshots.

I tested this patch and it's working as expected I attached the screenshot for this after testing.
RTBC + 1.
Thank you

@fgm I have one concern that why it is required to add <a name="foo">Foo</a>: Foo

if we are not using href in anchor tag then what is the use of <a name="foo">Foo</a>: Foo

@fgm do you have any accessibility links that this is an issue?

In that case I don't see any issue. Will also ask one of the Olivero maintainers to chim in though.

I'm triaging RTBC issues.

After reading the IS and comments I don't see anything left to do. Leaving at RTBC.

I don't think we want the blue color or even hover styles for the anchor links because they are not interactable. Styles for these are in base.pcss.css.

#18 makes sense.

Drupal Helsinki Sprints 2023/11 - working on this based on #18

Updated base.pcss.css so styling is applied only to <a> tags that have href attribute. Similar change had to also be made to text-content.pcss.css.

W3C's "HTML and XHTML Techniques for WCAG 2.0" has an example code for using a-tag without an href attribute and without text content (so obviously invisible to sighted users) - but it does not discuss presentation in case there would be some text. An h-tag linked from an a with href in that document is not styled differently from other headings though. This feels like a contradiction to what is said in #23.
https://www.w3.org/TR/WCAG20-TECHS/html.html#H86-ex2

There is a case of links without hrefs though. It is possible to have an <a role="link">text</a> or more commonly an image or a span. Semantic HTML is however considered best practise.

I could bring this up during tomorrows accessibility office hours if somebody else doesn't want to do it.

When styling anchor elements, it might be better to use the :link pseudo-class instead of styling the a element itself. The :link selector specifically targets anchors containing an href attribute, while avoiding styling anchor elements with just a name.

Using :link improves specificity and avoids inadvertently styling elements that aren't links.

Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/:link

Thank you @shaal for your guidance on the best approach to differentiated styling for links and non-links. To style unvisited links specifically, a:link is more suitable as it targets only those links.
Updated in above MR. Please review and merge.

Why open a new MR for a small change to the existing MR5328?

believe 5493 should be closed and consolidated into 5328 since 5328 still points to the correct branch too.

Also if we are changing solutions the issue summary will have to reflect that.

@smustgrave Apologies for the noise. I'll address this promptly by updating 5328 with the necessary changes and also revising the issue summary.

@smustgrave, could you possibly take a look? I'm new to MRs, so if I've made any mistakes, I'd really appreciate your guidance

Rebased MR

Updated issue summary.

Reading the issue summary, as a UI change before/after screenshots in the issue summary should be included for quicker reviews.

This makes sense to me. It's a simple change, but one that I think can avoid some confusion for users expecting a link.

Thanks! @mgifford

Pinged maintainers in slack for a +1

According to https://developer.mozilla.org/en-US/docs/Web/CSS/:link,

The :link CSS pseudo-class represents an element that has not yet been visited. It matches every unvisited or element that has an href attribute.

My worry on this patch is twofold:

1. The changes will break visited links. There's mention of this in #29, but we definitely want link styling to still apply to visited links.
2. The :link pseudo-class creates extra specificity that might break other styling. Let's use :where() to remove this specificity. Something along the lines of a:where([href]) as the selector.

Thanks for all the work on this everybody. Sorry to set this back to NW.

Reviewed the PR, made a small comment.

In UI everything works as expected.

In Claro though, a link without href has an accent color. Shall we handle the same change for Claro?

The issue is related to Olivero theme only. Maybe you can create a seperate issue for claro @YevKo

The Needs Review Queue Bot tested this issue. It fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

Related to this: https://www.drupal.org/project/drupal/issues/3372666 from way too long.

I reviewed and tested the current MR. The changes are looks fine to me. the changes are worked for Non-hyperlink anchors only. Adding before and after effects.
Before:

After:

I think this issue has to be in RTBC.

Appears to be 2 MRs both against 11.x one should be closed or hidden.

Hi,
I've reviewed the MR !5328 on Drupal 11.x.

Test Results:
Non link text is appearing without any link styles in the content.

Tested MR !5328 on the Drupal 11
The MR is applied Cleanly...

Test Result:
The No hyperlink text does not show the hyperlink style.

Attaching Screenshots for reference

RTBC+1

Just FYI for everyone uploading screenshots. Only the first set get credit. Re-uploading additional sets is just duplicative work.

This one has bounced around a few months. Saving credit for those who have worked on the MR but not for the duplicate screenshots.

Left a comment on the MR.

The Olivero theme was approved for removal in #3590816: [policy, no patch] Deprecate Olivero and move to contrib.

This is Postponed. The status is set according to two policies. The Remove a core extension and move it to a contributed project and the Extensions approved for removal policies.

The deprecation work is in #3595082: [meta] Tasks to deprecate the Olivero theme and the removal work in #3595085: [meta] Tasks to remove the Olivero theme.