Colors for DtButtons with visited links are overridden with default colors in dark mode

[sandroschmid]

Bug Report

Expected Behavior

In dark mode, e.g. as in a dt-context-dialog, the dark theme should be applied to all buttons, no matter if it is a <a dt-button variant="..."> or a <button dt-button variant="..."> and no matter the link state.

Current Behavior

When the link is set using routerLink, this is working as expected. But when using href instead, the colors are overridden by default colors when the link is a visited link.

Possible Solution

The reason seems to be the "visited"-state of the link provided in the href-attribute. Make sure this does not override styles set by a certain theme, e.g. dark theme in my case.

Steps to Reproduce

1. Use a link as button with a href-attribute, e.g. <a dt-button href="google.com">, in a dark-mode-context
2. Visit the link
3. Go back to the component and check the button's coloring

Stackblitz example

Context (Environment)

I encountered this when using buttons in a dt-context-dialog that where created in a parent component and used in the dialog's content using ng-content like shown in the Stackblitz example. I had already visited the link (no external link but one configured for Angular Routing within the app but added to the buttons using a custom directive which changes the href-attribute using the Renderer2).

The buttons where always displayed with default colors and I tried to explicitly set dtTheme:":dark" which did not work. Removing the href-attribute and values such as asdf "fixed" the coloring. @ffriedl89 found out that the problem actually occurred when the link was a visited link.

Used Versions:

• node: 12.16.2
• npm: 6.14.5
• typescript: 3.8.3
• angular: 9
• @angular/cdk: 9.2.4
• @dynatrace/barista-components: 7.1.0
• Google Chrome: 83.0.4103.106

Attachments

This screenshot (taken from the Stackblitz example) shows the problem: With routerLink both, the secondary as well as the primary button have the expected colors. With href the colors go back to default. The problem seems not occur with button-elements.