remove text colour change on :focus from dark links

Author: stephaniehobson

CHANGELOG.md

@@ -24,7 +24,7 @@
   * This will decrease the specificity of Protocol's link and button components, hopefully making local overrides easier, no need to change anything you already have in place.
   * Removal of `:link` pseudo classes in some places will mean that `<a>` elements which do not have a `href` value could now have link styles when previously they would not have. But, like, maybe don't do that?
   * Removed `:visted` styles for `.mzp-c-button` they should match unvisited styles, if you have `:visited` styles defined check they are still legible without the expected inherited styles.
-  * Removed the text colour change from `:link:focus` styles. Rely on the focus ring for a focus indicator instead.
+  * Removed the text colour change from `:focus` styles. Rely on the focus ring for a focus indicator instead.
 
 # 21.1.0
 

assets/sass/protocol/components/_button.scss

@@ -72,8 +72,6 @@
 // * -------------------------------------------------------------------------- */
 // Button shape and size
 
-
-
 .mzp-c-button, /* stylelint-disable-line no-duplicate-selectors */
 a.mzp-c-button {
     @include border-box;

assets/sass/protocol/includes/mixins/_utils.scss

@@ -232,7 +232,6 @@
         }
 
         &:hover,
-        &:focus,
         &:active {
             color: themes.$link-color-hover-inverse;
         }
@@ -247,7 +246,6 @@
             }
 
             &:hover,
-            &:focus,
             &:active {
                 color: var(--link-color-hover-inverse);
             }
@@ -261,7 +259,6 @@
         color: tokens.$color-white;
 
         &:hover,
-        &:focus,
         &:active {
             color: tokens.$color-white;
         }

components/button/button.html

@@ -9,33 +9,6 @@
 # iconStart     - markup
 # iconEnd       - markup
 #}
-
-<p><a href="https://www.mozilla.org">Visited</a></p>
-<p><a href="https://www.example.com/test">Unvisited</a></p>
-<p><button>button</button></p>
-
-<p><a href="https://www.mozilla.org" class="mzp-c-button">Visited</a></p>
-<p><a href="https://www.example.com/test" class="mzp-c-button">Unvisited</a></p>
-<p><button class="mzp-c-button">button</button></p>
-
-<p><a href="https://www.mozilla.org" class="mzp-c-button mzp-t-product">Visited</a></p>
-<p><a href="https://www.example.com/test" class="mzp-c-button mzp-t-product">Unvisited</a></p>
-<p><button class="mzp-c-button mzp-t-product">button</button></p>
-
-<div style="background-color: #000;">
-
- <p><a href="https://www.mozilla.org" class="mzp-c-button mzp-t-dark">Visited</a></p>
-<p><a href="https://www.example.com/test" class="mzp-c-button mzp-t-dark">Unvisited</a></p>
-<p><button class="mzp-c-button mzp-t-dark">button</button></p>
-
-<p><a href="https://www.mozilla.org" class="mzp-c-button mzp-t-product mzp-t-secondary mzp-t-dark">Visited</a></p>
-<p><a href="https://www.example.com/test" class="mzp-c-button mzp-t-product mzp-t-secondary mzp-t-dark">Unvisited</a></p>
-<p><button class="mzp-c-button mzp-t-product mzp-t-secondary mzp-t-dark">button</button></p>
-
-
-</div>
-
-
 {%- if link -%}
 <a class="mzp-c-button{% if class %} {{ class }}{% endif %}" href="{{ link }}">
   {%- if iconStart %}