From a8578f5d9907e67c85f2d007ac3984236dbfbd16 Mon Sep 17 00:00:00 2001
From: Victoria League <vleague@bitwarden.com>
Date: Tue, 24 Sep 2024 12:30:33 -0400
Subject: [PATCH] [CL-454] Improve color a11y for toast and banner interactive
 elements (#11200)

---
 libs/components/src/banner/banner.component.html | 5 ++++-
 libs/components/src/toast/toast.component.html   | 3 ++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/libs/components/src/banner/banner.component.html b/libs/components/src/banner/banner.component.html
index 6c1375293b5..566494eb64a 100644
--- a/libs/components/src/banner/banner.component.html
+++ b/libs/components/src/banner/banner.component.html
@@ -5,11 +5,14 @@
   [attr.aria-live]="useAlertRole ? 'polite' : null"
 >
   <i class="bwi tw-align-middle tw-text-base" [ngClass]="icon" *ngIf="icon" aria-hidden="true"></i>
-  <span class="tw-grow tw-text-base">
+  <!-- Overriding focus-visible color for link buttons for a11y against colored background -->
+  <span class="tw-grow tw-text-base [&>button[bitlink]:focus-visible:before]:!tw-ring-text-main">
     <ng-content></ng-content>
   </span>
+  <!-- Overriding hover and focus-visible colors for a11y against colored background -->
   <button
     *ngIf="showClose"
+    class="hover:tw-border-text-main focus-visible:before:tw-ring-text-main"
     type="button"
     bitIconButton="bwi-close"
     buttonType="main"
diff --git a/libs/components/src/toast/toast.component.html b/libs/components/src/toast/toast.component.html
index 210c11ae74a..84154cba611 100644
--- a/libs/components/src/toast/toast.component.html
+++ b/libs/components/src/toast/toast.component.html
@@ -17,8 +17,9 @@
         {{ m }}
       </p>
     </div>
+    <!-- Overriding hover and focus-visible colors for a11y against colored background -->
     <button
-      class="tw-ml-auto"
+      class="tw-ml-auto hover:tw-border-text-main focus-visible:before:tw-ring-text-main"
       bitIconButton="bwi-close"
       buttonType="main"
       type="button"