Neutralize link styles for placeholder links/named anchors

[patrickhlauke]

Fixes #19402

[abstractic]

If a clickable element have the same style and behaviour as a normal link (as in this case, as I assume that we still want it to be a link, or we should use a button), then we're keeping commonly known UX design patterns in the visual aspect of clickability, which is a way better UX approach than removing or change the default styling.

https://www.nngroup.com/articles/clickable-elements/

[patrickhlauke]

default styling (in browsers) for anchors which lack an href is not to have an underline/link color. links without href do not behave as a normal link, as they can't be focused/activated with the keyboard. i'll revisit the styling to see if I can include further qualifiers (e.g. to let links without href, but with a tabindex and role attribute, receive the regular styling), but beyond that the rationale here still stands.

[abstractic]

Oh sorry, I was referring more to the issue here #19402 (comment), as I think it will be easier for each individual developer to add their own style on placeholder links, than forcing everyone to do pointless overrides of the a:not([href]) {} styling.

For your information, the default link behaviour is way easier to override than the a:not([href]) {}, which requires a developer to write a name pattern like a.myclass:not([href]) { [my new color] } and a.myclass:not([href]):hover { [my new color] } to change a simple color.

[patrickhlauke]

if you're using a link without href to trigger an action, it also needs to be keyboard focusable (using at least tabindex=0) and expose a correct role to assistive technologies (using role=button, for instance). otherwise keyboard users and assistive tech users will not be able to correctly use it/use it at all. once i extend the selector(s) to also cover these cases, there won't be a need for authors to do "pointless overrides", but instead there will be a need to do "the right thing".

[abstractic]

Yes, that is correct, but I think we're misunderstanding each other about the styling and override options that are available, once the :not([href]) selector is declared.

The :not([href]) selector strictly tells the browser that an anchor without the HREF attribute <a class="myclass" role="button">action</a>, should use the inherited color and text decoration (in this case BODY assigned attributes), so when a developer writes anything like this:

.myclass {

    color: blue;

    &:hover {

        text-decoration: underline;
        color: blue;
    }
}

It get ignored by the browser, and the developer is forced to write the following for it to be overridden:

.mytest:not([href]) {

    color: blue;

    &:not([href]):hover {

        text-decoration: underline;
        color: blue;
    }
}

[patrickhlauke]

@abstractic thanks, that makes your specific problem a bit clearer now. With #19874 you should be able to simply add tabindex=0 (which will also now make that action keyboard-focusable and operable, which it currently isn't), i.e. <a class="myclass" tabindex="0" role="button">action</a>

[abstractic]

You're welcome. I'm glad to help out.