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 :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

1. Click the logo
2. 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.

Resolution

• I would be interested in resolving this bug.