From 210e83adad430fdec0fc5faeb7bdd8557588cf42 Mon Sep 17 00:00:00 2001
From: Ben Pusey <141063311+Ben-Pusey-Bentley@users.noreply.github.com>
Date: Tue, 19 Mar 2024 15:38:02 -0400
Subject: [PATCH] Remove the `iui-anchor` mixin. (#1915)

Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com>
---
 .changeset/green-cheetahs-rush.md             | 11 ++++
 .changeset/lemon-avocados-change.md           | 34 +++++++++++
 apps/css-workshop/pages/alert.html            | 24 ++++++--
 apps/css-workshop/pages/breadcrumbs.html      |  6 +-
 apps/css-workshop/pages/footer.html           |  5 ++
 apps/css-workshop/pages/tag.html              | 48 ++++++++--------
 apps/css-workshop/pages/toast.html            | 20 +++++--
 packages/itwinui-css/src/alert/alert.scss     |  7 ---
 packages/itwinui-css/src/anchor/anchor.scss   | 52 ++++++++++++++++-
 packages/itwinui-css/src/anchor/mixins.scss   | 57 -------------------
 .../itwinui-css/src/breadcrumbs/mixins.scss   |  3 -
 packages/itwinui-css/src/footer/footer.scss   | 20 ++++++-
 packages/itwinui-css/src/tag/base.scss        |  1 -
 packages/itwinui-css/src/tag/tag.scss         |  6 --
 packages/itwinui-css/src/toast/toast.scss     |  6 --
 .../itwinui-react/src/core/Alert/Alert.tsx    | 11 ++--
 .../src/core/Breadcrumbs/Breadcrumbs.tsx      |  3 +-
 .../src/core/Footer/Footer.test.tsx           |  2 +-
 .../itwinui-react/src/core/Footer/Footer.tsx  |  9 ++-
 .../itwinui-react/src/core/Toast/Toast.tsx    |  8 ++-
 20 files changed, 201 insertions(+), 132 deletions(-)
 create mode 100644 .changeset/green-cheetahs-rush.md
 create mode 100644 .changeset/lemon-avocados-change.md
 delete mode 100644 packages/itwinui-css/src/anchor/mixins.scss

diff --git a/.changeset/green-cheetahs-rush.md b/.changeset/green-cheetahs-rush.md
new file mode 100644
index 00000000000..4a9a5b2f3cc
--- /dev/null
+++ b/.changeset/green-cheetahs-rush.md
@@ -0,0 +1,11 @@
+---
+"@itwin/itwinui-css": minor
+---
+
+`iui-anchor` can now be styled with status colors using a new `data-iui-status` attribute.
+
+```html
+<a class="iui-anchor" data-iui-status="negative">...</a>
+```
+
+Possible values include: `"positive"`, `"negative"`, `"informational"`, and `"warning"`.
diff --git a/.changeset/lemon-avocados-change.md b/.changeset/lemon-avocados-change.md
new file mode 100644
index 00000000000..7dde03fd077
--- /dev/null
+++ b/.changeset/lemon-avocados-change.md
@@ -0,0 +1,34 @@
+---
+"@itwin/itwinui-css": major
+---
+
+`iui-anchor` must now be explicitly added to `<a>` elements, in addition to the previous `iui-alert-link`, `iui-breadcrumbs-content`, `iui-tag-basic`, and `iui-toast-anchor` classes.
+
+```diff
+-<a class="iui-alert-link">
++<a class="iui-anchor iui-alert-link">
+```
+
+```diff
+-<a class="iui-breadcrumbs-content">
++<a class="iui-anchor iui-breadcrumbs-content">
+```
+
+```diff
+-<a class="iui-tag-basic">
++<a class="iui-anchor iui-tag-basic">
+```
+
+```diff
+-<a class="iui-toast-anchor">
++<a class="iui-anchor iui-toast-anchor">
+```
+
+Additionally, all `<a>` elements within `iui-legal-footer` elements will need the `iui-anchor` class.
+
+```diff
+<li class="iui-legal-footer-item">
+- <a>...</a>
++ <a class="iui-anchor>...</a>
+</li>
+```
diff --git a/apps/css-workshop/pages/alert.html b/apps/css-workshop/pages/alert.html
index 8610c7004f9..2b9f312668f 100644
--- a/apps/css-workshop/pages/alert.html
+++ b/apps/css-workshop/pages/alert.html
@@ -67,8 +67,10 @@ <h1>Alert</h1>
         ></svg-info-circular>
         <span class="iui-alert-message">Informational message.
           <a
-            class="iui-alert-link"
+            class="iui-anchor iui-alert-link"
             href="#"
+            data-iui-underline="true"
+            data-iui-status="informational"
           >Learn more</a>
         </span>
         <button
@@ -96,8 +98,10 @@ <h1>Alert</h1>
         ></svg-status-success>
         <span class="iui-alert-message">Positive message.
           <a
-            class="iui-alert-link"
+            class="iui-anchor iui-alert-link"
             href="#"
+            data-iui-underline="true"
+            data-iui-status="positive"
           >Learn more</a>
         </span>
         <button
@@ -125,8 +129,10 @@ <h1>Alert</h1>
         ></svg-status-warning>
         <span class="iui-alert-message">Warning message.
           <a
-            class="iui-alert-link"
+            class="iui-anchor iui-alert-link"
             href="#"
+            data-iui-underline="true"
+            data-iui-status="warning"
           >Learn more</a>
         </span>
         <button
@@ -155,8 +161,10 @@ <h1>Alert</h1>
         ></svg-status-error>
         <span class="iui-alert-message">Negative message.
           <a
-            class="iui-alert-link"
+            class="iui-anchor iui-alert-link"
             href="#"
+            data-iui-underline="true"
+            data-iui-status="negative"
           >Learn more</a>
         </span>
         <button
@@ -190,8 +198,10 @@ <h1>Alert</h1>
           est
           laborum.
           <a
-            class="iui-alert-link"
+            class="iui-anchor iui-alert-link"
             href="#"
+            data-iui-underline="true"
+            data-iui-status="informational"
           >Learn more</a>
         </span>
         <button
@@ -224,8 +234,10 @@ <h1>Alert</h1>
           ></svg-info-circular>
           <span class="iui-alert-message">This is a sticky alert.
             <a
-              class="iui-alert-link"
+              class="iui-anchor iui-alert-link"
               href="#"
+              data-iui-status="informational"
+              data-iui-underline="true"
             >Learn more</a>
           </span>
           <button
diff --git a/apps/css-workshop/pages/breadcrumbs.html b/apps/css-workshop/pages/breadcrumbs.html
index 567949c96d8..22a5b331c9a 100644
--- a/apps/css-workshop/pages/breadcrumbs.html
+++ b/apps/css-workshop/pages/breadcrumbs.html
@@ -67,7 +67,7 @@ <h2>Breadcrumbs anchor</h2>
         <ol class="iui-breadcrumbs-list">
           <li class="iui-breadcrumbs-item">
             <a
-              class="iui-breadcrumbs-content"
+              class="iui-anchor iui-breadcrumbs-content"
               href="#"
             >
               Root
@@ -90,7 +90,7 @@ <h2>Breadcrumbs anchor</h2>
           </li>
           <li class="iui-breadcrumbs-item">
             <a
-              class="iui-breadcrumbs-content"
+              class="iui-anchor iui-breadcrumbs-content"
               href="#"
               id="test-1"
             >
@@ -105,7 +105,7 @@ <h2>Breadcrumbs anchor</h2>
           </li>
           <li class="iui-breadcrumbs-item">
             <a
-              class="iui-breadcrumbs-content"
+              class="iui-anchor iui-breadcrumbs-content"
               href="#"
               id="test-2"
             >
diff --git a/apps/css-workshop/pages/footer.html b/apps/css-workshop/pages/footer.html
index 5231a6c6a6e..616f91060bf 100644
--- a/apps/css-workshop/pages/footer.html
+++ b/apps/css-workshop/pages/footer.html
@@ -56,6 +56,7 @@ <h1>Footer</h1>
             href="https://connect-agreementportal.bentley.com/AgreementApp/Home/Eula/view/readonly/BentleyConnect"
             target="_blank"
             id="test-link-1"
+            class="iui-anchor"
           >
             Terms of service
           </a>
@@ -66,6 +67,7 @@ <h1>Footer</h1>
             href="https://www.bentley.com/en/privacy-policy"
             target="_blank"
             id="test-link-2"
+            class="iui-anchor"
           >
             Privacy
           </a>
@@ -75,6 +77,7 @@ <h1>Footer</h1>
           <a
             href="https://www.bentley.com/en/terms-of-use-and-select-online-agreement"
             target="_blank"
+            class="iui-anchor"
           >
             Terms of use
           </a>
@@ -84,6 +87,7 @@ <h1>Footer</h1>
           <a
             href="https://www.bentley.com/en/cookie-policy"
             target="_blank"
+            class="iui-anchor"
           >
             Cookies
           </a>
@@ -93,6 +97,7 @@ <h1>Footer</h1>
           <a
             href="https://connect.bentley.com/Legal"
             target="_blank"
+            class="iui-anchor"
           >
             Legal notices
           </a>
diff --git a/apps/css-workshop/pages/tag.html b/apps/css-workshop/pages/tag.html
index 1caf72eb8ae..ac3b9806343 100644
--- a/apps/css-workshop/pages/tag.html
+++ b/apps/css-workshop/pages/tag.html
@@ -733,38 +733,38 @@ <h2>Basic tag containers</h2>
       <div class="iui-tag-container">
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
           id="test-tag-3"
         >
           tags
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           go
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           here
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           tags
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           go
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           here
         </a>
@@ -797,110 +797,110 @@ <h2>Truncate basic tag containers</h2>
       <div class="iui-tag-container iui-truncate">
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
           id="test-tag-3"
         >
           tags
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           go
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           here
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           tags
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           go
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           here
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           tags
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           go
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           here
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           tags
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           go
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           here
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           tags
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           go
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           here
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           tags
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           go
         </a>
         <a
           href="#"
-          class="iui-tag-basic"
+          class="iui-anchor iui-tag-basic"
         >
           here
         </a>
diff --git a/apps/css-workshop/pages/toast.html b/apps/css-workshop/pages/toast.html
index 2135dc7a21c..911635569dc 100644
--- a/apps/css-workshop/pages/toast.html
+++ b/apps/css-workshop/pages/toast.html
@@ -151,8 +151,10 @@ <h3>Toast placement:</h3>
             </div>
             <div class="iui-message">Job processing completed.</div>
             <a
-              class="iui-toast-anchor"
+              class="iui-anchor iui-toast-anchor"
               href="#"
+              data-iui-underline="true"
+              data-iui-status="positive"
             >View the report</a>
             <button
               aria-label="Close"
@@ -223,8 +225,10 @@ <h3>Toast placement:</h3>
               frankfurter sausage.
             </div>
             <a
-              class="iui-toast-anchor"
+              class="iui-anchor iui-toast-anchor"
               href="#"
+              data-iui-underline="true"
+              data-iui-status="informational"
             >View</a>
             <button
               aria-label="Close"
@@ -254,8 +258,10 @@ <h3>Toast placement:</h3>
               26 files are available for synchronization.
             </div>
             <a
-              class="iui-toast-anchor"
+              class="iui-anchor iui-toast-anchor"
               href="#"
+              data-iui-underline="true"
+              data-iui-status="informational"
             >View</a>
           </div>
 
@@ -271,8 +277,10 @@ <h3>Toast placement:</h3>
             </div>
             <div class="iui-message">Job processing error.</div>
             <a
-              class="iui-toast-anchor"
+              class="iui-anchor iui-toast-anchor"
               href="#"
+              data-iui-underline="true"
+              data-iui-status="negative"
             >View the report</a>
             <button
               aria-label="Close"
@@ -300,8 +308,10 @@ <h3>Toast placement:</h3>
             </div>
             <div class="iui-message">Job processing requires approval.</div>
             <a
-              class="iui-toast-anchor"
+              class="iui-anchor iui-toast-anchor"
               href="#"
+              data-iui-underline="true"
+              data-iui-status="warning"
             >Approve</a>
             <button
               aria-label="Close"
diff --git a/packages/itwinui-css/src/alert/alert.scss b/packages/itwinui-css/src/alert/alert.scss
index 9a73b289c9d..d0b06fbd46f 100644
--- a/packages/itwinui-css/src/alert/alert.scss
+++ b/packages/itwinui-css/src/alert/alert.scss
@@ -1,6 +1,5 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
-@use '../anchor/mixins' as anchor;
 @use '../mixins';
 @use '../button/base';
 @use '../button/borderless';
@@ -27,10 +26,6 @@
 
       @include mixins.iui-text-selection($statusColor);
 
-      .iui-alert-link {
-        @include anchor.iui-anchor-status($statusColor);
-      }
-
       .iui-button:focus {
         outline-color: var(--iui-color-text-#{$statusColor});
       }
@@ -54,8 +49,6 @@
 }
 
 .iui-alert-link {
-  @include anchor.iui-anchor;
-  @include anchor.iui-anchor-underline('on-initial');
   border-radius: var(--iui-border-radius-1);
   cursor: pointer;
   margin-inline-start: var(--iui-size-xs);
diff --git a/packages/itwinui-css/src/anchor/anchor.scss b/packages/itwinui-css/src/anchor/anchor.scss
index 950e0165746..b6465c9dbde 100644
--- a/packages/itwinui-css/src/anchor/anchor.scss
+++ b/packages/itwinui-css/src/anchor/anchor.scss
@@ -1,9 +1,44 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
-@use './mixins' as *;
+@use '../mixins';
 
 .iui-anchor {
-  @include iui-anchor;
+  @include mixins.iui-focus($color: var(--iui-color-text-accent), $offset: 1px);
+  color: var(--iui-color-text-accent);
+  -webkit-tap-highlight-color: hsl(var(--iui-color-accent-hsl) / var(--iui-opacity-6));
+  border-radius: var(--iui-border-radius-1);
+  cursor: pointer;
+
+  text-decoration: none;
+
+  &:where(button) {
+    font: inherit;
+    border: none;
+    background: transparent;
+    padding: 0;
+  }
+
+  &:hover {
+    color: var(--iui-color-text-accent-hover);
+    text-decoration: underline;
+  }
+
+  @media (prefers-contrast: more) {
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  &[data-iui-underline='true'],
+  :is([data-iui-contrast='high'] &) {
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
 
   &-external {
     --_iui-anchor-external-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
@@ -22,4 +57,17 @@
       }
     }
   }
+
+  @each $statusColor in informational, positive, warning, negative {
+    &:where([data-iui-status='#{$statusColor}']) {
+      @include mixins.iui-focus($color: var(--iui-color-text-#{$statusColor}), $offset: 1px);
+      color: var(--iui-color-text-#{$statusColor});
+      -webkit-tap-highlight-color: hsl(var(--iui-color-#{$statusColor}-hsl) / var(--iui-opacity-6));
+      @include mixins.iui-text-selection(#{$statusColor});
+
+      &:hover {
+        color: var(--iui-color-text-#{$statusColor}-hover);
+      }
+    }
+  }
 }
diff --git a/packages/itwinui-css/src/anchor/mixins.scss b/packages/itwinui-css/src/anchor/mixins.scss
deleted file mode 100644
index 9b2e693bfa3..00000000000
--- a/packages/itwinui-css/src/anchor/mixins.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-// See LICENSE.md in the project root for license terms and full copyright notice.
-@use '../mixins';
-
-@mixin iui-anchor {
-  &:where(button) {
-    font: inherit;
-    border: none;
-    background: transparent;
-    padding: 0;
-  }
-
-  @include iui-anchor-status('accent');
-  border-radius: var(--iui-border-radius-1);
-  cursor: pointer;
-
-  @include iui-anchor-underline('on-hover');
-
-  @media (prefers-contrast: more) {
-    @include iui-anchor-underline('on-initial');
-  }
-
-  &[data-iui-underline='true'],
-  :is([data-iui-contrast='high'] &) {
-    @include iui-anchor-underline('on-initial');
-  }
-}
-
-@mixin iui-anchor-status($status: accent) {
-  @include mixins.iui-focus($color: var(--iui-color-text-#{$status}), $offset: 1px);
-  color: var(--iui-color-text-#{$status});
-  -webkit-tap-highlight-color: hsl(var(--iui-color-#{$status}-hsl) / var(--iui-opacity-6));
-  @if $status != accent {
-    @include mixins.iui-text-selection($status);
-  }
-
-  &:hover {
-    color: var(--iui-color-text-#{$status}-hover);
-  }
-}
-
-/// $behavior should be one of: 'on-hover' or 'on-initial'
-@mixin iui-anchor-underline($behavior: 'on-hover') {
-  @if $behavior == 'on-hover' {
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  } @else {
-    text-decoration: underline;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-}
diff --git a/packages/itwinui-css/src/breadcrumbs/mixins.scss b/packages/itwinui-css/src/breadcrumbs/mixins.scss
index d96fc1e9cdd..44fd04e9bd1 100644
--- a/packages/itwinui-css/src/breadcrumbs/mixins.scss
+++ b/packages/itwinui-css/src/breadcrumbs/mixins.scss
@@ -1,6 +1,5 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
-@use '../anchor/mixins' as anchor;
 @use '../button/borderless';
 @use '../mixins';
 @use '../button/base';
@@ -41,8 +40,6 @@
   line-height: var(--iui-component-height);
 
   &:where(a) {
-    @include anchor.iui-anchor;
-
     &:focus {
       outline-offset: -1px;
     }
diff --git a/packages/itwinui-css/src/footer/footer.scss b/packages/itwinui-css/src/footer/footer.scss
index 5bf68e4a03b..a3ba8934f27 100644
--- a/packages/itwinui-css/src/footer/footer.scss
+++ b/packages/itwinui-css/src/footer/footer.scss
@@ -1,6 +1,5 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
-@use '../anchor/mixins' as anchor;
 @use '../mixins';
 
 .iui-legal-footer {
@@ -32,12 +31,27 @@
   color: var(--iui-color-text-muted);
 
   > a {
-    @include anchor.iui-anchor;
-
     &,
     &:hover {
       color: var(--iui-color-text-muted);
     }
+
+    &:not(:hover) {
+      text-decoration: none;
+    }
+
+    @media (prefers-contrast: more) {
+      &:not(:hover) {
+        text-decoration: underline;
+      }
+    }
+
+    &[data-iui-underline='true'],
+    :is([data-iui-contrast='high'] &) {
+      &:not(:hover) {
+        text-decoration: underline;
+      }
+    }
   }
 }
 
diff --git a/packages/itwinui-css/src/tag/base.scss b/packages/itwinui-css/src/tag/base.scss
index d536d3f3565..356e1b0de42 100644
--- a/packages/itwinui-css/src/tag/base.scss
+++ b/packages/itwinui-css/src/tag/base.scss
@@ -2,7 +2,6 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @use '../mixins';
 @use '../text/mixins' as text-mixins;
-@use '../anchor/mixins' as anchor;
 
 @mixin iui-tag-basic {
   &:not(a) {
diff --git a/packages/itwinui-css/src/tag/tag.scss b/packages/itwinui-css/src/tag/tag.scss
index 8bcd01d9e1f..746f1456fc5 100644
--- a/packages/itwinui-css/src/tag/tag.scss
+++ b/packages/itwinui-css/src/tag/tag.scss
@@ -2,7 +2,6 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @use './base' as *;
 @use '../mixins';
-@use '../anchor/mixins' as anchor;
 
 .iui-tag {
   @include iui-tag;
@@ -20,11 +19,6 @@
   @include iui-tag-button;
 }
 
-a.iui-tag-basic {
-  @include anchor.iui-anchor;
-  @include mixins.iui-focus($offset: 1px);
-}
-
 .iui-tag-container {
   @include iui-tag-container;
 }
diff --git a/packages/itwinui-css/src/toast/toast.scss b/packages/itwinui-css/src/toast/toast.scss
index 90d78d10687..6436ed36ff6 100644
--- a/packages/itwinui-css/src/toast/toast.scss
+++ b/packages/itwinui-css/src/toast/toast.scss
@@ -1,6 +1,5 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
-@use '../anchor/mixins' as anchor;
 @use '../mixins';
 
 /// category must be one of: informational, positive, warning, negative
@@ -26,10 +25,6 @@
     }
   }
 
-  > .iui-toast-anchor {
-    @include anchor.iui-anchor-status($category);
-  }
-
   > button {
     outline-color: var(--iui-color-text-#{$category});
   }
@@ -164,7 +159,6 @@
       background: transparent;
       padding: 0;
     }
-    @include anchor.iui-anchor-underline('on-initial');
     border-radius: var(--iui-border-radius-1);
     cursor: pointer;
     font-size: var(--iui-font-size-0);
diff --git a/packages/itwinui-react/src/core/Alert/Alert.tsx b/packages/itwinui-react/src/core/Alert/Alert.tsx
index 38909183e47..16849bf06f8 100644
--- a/packages/itwinui-react/src/core/Alert/Alert.tsx
+++ b/packages/itwinui-react/src/core/Alert/Alert.tsx
@@ -10,11 +10,11 @@ import {
   StatusIconMap,
   SvgCloseSmall,
   Box,
-  ButtonBase,
 } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { Icon } from '../Icon/Icon.js';
+import { Anchor } from '../Typography/Anchor.js';
 
 const AlertContext = React.createContext<
   | {
@@ -132,16 +132,19 @@ AlertMessage.displayName = 'Alert.Message';
 
 const AlertAction = React.forwardRef((props, ref) => {
   const { children, className, ...rest } = props;
+  const { type } = useSafeContext(AlertContext);
 
   return (
-    <ButtonBase
+    <Anchor
       as={(!!props.href ? 'a' : 'button') as 'a'}
-      className={cx('iui-alert-link', className)}
+      className={cx('iui-button-base', 'iui-alert-link', className)}
+      underline
+      data-iui-status={type}
       ref={ref}
       {...rest}
     >
       {children}
-    </ButtonBase>
+    </Anchor>
   );
 }) as PolymorphicForwardRefComponent<'a'>;
 AlertAction.displayName = 'Alert.Action';
diff --git a/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx b/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx
index d4cff691cd8..0ddeb453408 100644
--- a/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/itwinui-react/src/core/Breadcrumbs/Breadcrumbs.tsx
@@ -13,6 +13,7 @@ import {
 } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import { Button } from '../Buttons/Button.js';
+import { Anchor } from '../Typography/Anchor.js';
 
 const logWarningInDev = createWarningLogger();
 
@@ -230,7 +231,7 @@ const Separator = ({ separator }: Pick<BreadcrumbsProps, 'separator'>) => (
 const BreadcrumbsItem = React.forwardRef((props, forwardedRef) => {
   const { children: childrenProp, className, ...rest } = props;
 
-  const defaultAs = !!props.href ? 'a' : !!props.onClick ? 'button' : 'span';
+  const defaultAs = !!props.href ? Anchor : !!props.onClick ? 'button' : 'span';
   const children =
     defaultAs === 'button' ? <span>{childrenProp}</span> : childrenProp;
 
diff --git a/packages/itwinui-react/src/core/Footer/Footer.test.tsx b/packages/itwinui-react/src/core/Footer/Footer.test.tsx
index 418cc889a6b..6c54af11323 100644
--- a/packages/itwinui-react/src/core/Footer/Footer.test.tsx
+++ b/packages/itwinui-react/src/core/Footer/Footer.test.tsx
@@ -35,7 +35,7 @@ const assertFooterItems = (
     }
 
     const dataIndex = Math.floor(i / 2);
-    expect(element.textContent).toBe(data[dataIndex].title);
+    expect(element).toHaveTextContent(data[dataIndex].title);
     if (data[dataIndex].url) {
       expect((element.firstChild as HTMLAnchorElement).href).toBe(
         data[dataIndex].url,
diff --git a/packages/itwinui-react/src/core/Footer/Footer.tsx b/packages/itwinui-react/src/core/Footer/Footer.tsx
index a2cd4cc366d..8470de95484 100644
--- a/packages/itwinui-react/src/core/Footer/Footer.tsx
+++ b/packages/itwinui-react/src/core/Footer/Footer.tsx
@@ -9,6 +9,7 @@ import type { CommonProps } from '../utils/index.js';
 import { FooterItem } from './FooterItem.js';
 import { FooterSeparator } from './FooterSeparator.js';
 import { FooterList } from './FooterList.js';
+import { Anchor } from '../Typography/Anchor.js';
 
 export type TitleTranslations = {
   termsOfService: string;
@@ -146,9 +147,13 @@ export const Footer = Object.assign(
                   {index > 0 && <FooterSeparator />}
                   <FooterItem>
                     {element.url ? (
-                      <a href={element.url} target='_blank' rel='noreferrer'>
+                      <Anchor
+                        href={element.url}
+                        target='_blank'
+                        rel='noreferrer'
+                      >
                         {element.title}
-                      </a>
+                      </Anchor>
                     ) : (
                       element.title
                     )}
diff --git a/packages/itwinui-react/src/core/Toast/Toast.tsx b/packages/itwinui-react/src/core/Toast/Toast.tsx
index e9b704a95d5..1f9ef2077fe 100644
--- a/packages/itwinui-react/src/core/Toast/Toast.tsx
+++ b/packages/itwinui-react/src/core/Toast/Toast.tsx
@@ -285,7 +285,13 @@ export const ToastPresentation = React.forwardRef((props, forwardedRef) => {
         {content}
       </Box>
       {link && (
-        <ButtonBase className='iui-toast-anchor' {...link} title={undefined}>
+        <ButtonBase
+          {...link}
+          className={cx('iui-anchor', 'iui-toast-anchor', link.className)}
+          title={undefined}
+          data-iui-status={category}
+          data-iui-underline
+        >
           {link.title}
         </ButtonBase>
       )}