diff --git a/.changeset/rotten-apes-tie.md b/.changeset/rotten-apes-tie.md new file mode 100644 index 0000000000..7418d1305e --- /dev/null +++ b/.changeset/rotten-apes-tie.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": patch +--- + +``: improved accessibility by correcting active and focus styles diff --git a/elements/rh-cta/rh-cta-lightdom-shim.css b/elements/rh-cta/rh-cta-lightdom-shim.css index 2b921d15bb..a0f400ceca 100644 --- a/elements/rh-cta/rh-cta-lightdom-shim.css +++ b/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) { diff --git a/elements/rh-cta/rh-cta.css b/elements/rh-cta/rh-cta.css index 96dd0b4fcb..298917e68c 100644 --- a/elements/rh-cta/rh-cta.css +++ b/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,7 +326,7 @@ 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, @@ -329,6 +334,7 @@ a:focus-within, #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,