Merge branch 'main' into fix/tooltip/a11y-announce-content

.changeset/rotten-apes-tie.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-cta>`: improved accessibility by correcting active and focus styles

elements/rh-cta/rh-cta-lightdom-shim.css

@@ -70,6 +70,7 @@ rh-cta:not(:defined):hover {
 
 rh-cta:not(:defined):active {
   background-color: var(--rh-cta-active-background-color);
+  color: var(--rh-cta-active-color);
 }
 
 rh-cta[variant='primary']:not(:defined) {

elements/rh-cta/rh-cta.css

@@ -115,20 +115,19 @@ a:focus-within,
 
 :host(:is(:focus, :focus-within)) #container {
   --_background-color: var(--rh-cta-focus-background-color);
+  --_color: var(--_focus-color);
+  --_text-decoration: var(--_focus-text-decoration);
 
   border-color: var(--_focus-border-color);
   background-color:
     var(--_focus-container-background-color,
       var(--_focus-background-color));
-  color: var(--rh-cta-focus-color);
+  color: var(--rh-cta-focus-color, var(--_color));
   outline:
     var(--rh-border-width-md, 2px)
     solid
     var(--rh-cta-focus-container-outline-color, var(--rh-cta-focus-outline-color));
   outline-offset: 2px;
-
-  --_color: var(--_focus-color);
-  --_text-decoration: var(--_focus-text-decoration);
 }
 
 :host(:is(:focus, :focus-within)) #container:after {
@@ -162,6 +161,7 @@ a:focus-within,
 
 :host(:active) #container {
   background-color: var(--_background-color);
+  color: var(--_active-color);
 
   --_background-color:
     var(--rh-cta-background-color,
@@ -274,6 +274,7 @@ a:focus-within,
   --_background-color: var(--rh-cta-background-color, var(--rh-color-brand-red));
   --_border-color: var(--rh-cta-border-color, var(--rh-color-brand-red));
   --_color: var(--rh-cta-color, var(--rh-color-text-primary-on-dark, #ffffff));
+  --_active-color: var(--rh-cta-color, var(--rh-color-text-primary-on-dark, #ffffff));
   --_hover-background-color:
     var(--rh-cta-hover-background-color,
       var(--rh-color-brand-red-dark, #a60000));
@@ -283,14 +284,18 @@ a:focus-within,
     var(--rh-cta-focus-background-color,
       var(--rh-color-brand-red-dark, #a60000));
   --_focus-border-color: var(--rh-cta-focus-border-color, var(--rh-color-brand-red-dark, #a60000));
-  --_focus-color: var(--rh-cta-focus-color, var(--rh-color-text-primary-on-dark, #ffffff));
-  --_focus-inner-border-color: var(--rh-cta-focus-inner-border-color, var(--rh-color-text-primary));
+  --_focus-color:
+    var(--rh-cta-focus-color,
+      var(--rh-color-text-primary-on-dark, #ffffff)) !important;
+  --_focus-inner-border-color:
+    var(--rh-cta-focus-inner-border-color,
+      var(--rh-color-text-primary-on-dark, #ffffff));
   --_active-background-color:
     var(--rh-cta-active-background-color,
       var(--rh-color-brand-red-dark, #a60000));
   --_active-inner-border-color:
     var(--rh-cta-active-inner-border-color,
-      var(--rh-color-text-primary));
+      var(--rh-color-text-primary-on-dark, #ffffff));
 }
 
 /*****************************************************************************
@@ -302,7 +307,7 @@ a:focus-within,
 
   --_background-color: var(--rh-cta-background-color, transparent);
   --_border-color: var(--rh-cta-border-color, var(--rh-color-border-strong));
-  --_color: var(--rh-cta-color, var(--rh-color-text-primary));
+  --_color: var(--rh-cta-color, var(--rh-color-text-primary-on-light, #151515));
   --_hover-background-color:
     var(--rh-cta-hover-background-color,
       var(--rh-color-surface-darkest,
@@ -321,14 +326,15 @@ a:focus-within,
   --_focus-inner-border-color:
     var(--rh-cta-focus-inner-border-color,
       var(--rh-color-border-strong));
-  --_active-color: var(--rh-cta-active-color, var(--rh-color-text-primary));
+  --_active-color: var(--rh-cta-active-color, var(--rh-color-text-primary-on-light, #151515));
   --_active-background-color: var(--rh-cta-active-background-color, var(--rh-color-border-strong));
   --_active-inner-border-color:
     var(--rh-cta-active-inner-border-color,
       var(--rh-color-surface-light,
       #e0e0e0));
 
   &.dark {
+    --_color: var(--rh-cta-color, var(--rh-color-text-primary-on-dark, #ffffff));
     --_hover-background-color:
       var(--rh-cta-hover-background-color,
         var(--rh-color-surface-lightest,
@@ -338,7 +344,8 @@ a:focus-within,
         var(--rh-color-surface-dark,
         #383838));
     --_hover-color: var(--rh-cta-hover-color, var(--rh-color-text-primary-on-light, #151515));
-    --_focus-color: var(--rh-cta-focus-color, var(--rh-color-text-primary));
+    --_focus-color: var(--rh-cta-focus-color, var(--rh-color-text-primary-on-light, #151515));
+    --_active-color: var(--rh-cta-active-color, var(--rh-color-text-primary-on-dark, #ffffff));
     --_active-background-color:
       var(--rh-cta-active-background-color,
         var(--rh-color-surface-lightest,