when clicked the logos and social icons flash to a purple color briefly on click. This is due to the fact that the way in which the logo and social icons was implemented sets the svg a mask of the element, rather than to a mask of a child pseudo element of :before or :after. This disallows any outline or border indicators on that element for a :focus state. To correct for this in a temporary fashion, color was used to denote an item "in focus".
As a side effect when an item is clicked it is briefly "in focus", which makes it turn purple.
However, this behavior needs to change, so that proper outline behavior will occur.
Reproduction
Click the logo
See it briefly turn purple
Expectation
The items in question need to have standard default browser outline focus indicators, and the method of svg replacement needs to be moved to a child pseudo element to allow for this.
Description
when clicked the logos and social icons flash to a purple color briefly on click. This is due to the fact that the way in which the logo and social icons was implemented sets the svg a mask of the element, rather than to a mask of a child pseudo element of
:beforeor:after. This disallows any outline or border indicators on that element for a:focusstate. To correct for this in a temporary fashion, color was used to denote an item "in focus".As a side effect when an item is clicked it is briefly "in focus", which makes it turn purple.
However, this behavior needs to change, so that proper outline behavior will occur.
Reproduction
Expectation
The items in question need to have standard default browser outline focus indicators, and the method of svg replacement needs to be moved to a child pseudo element to allow for this.
Resolution