Add ARIA label to social media icons on truss.works

[xtine]

Issue 7: Social media icons in footer and contact us need label.
Our social media icons need labels on their links so that screen readers know what they are. Right now, screen readers are reading all three as “Link, Trussworks”, so it’s unknown to users who use screen readers that it is a social media link.
Doc with all documented accessibility issues:
https://docs.google.com/document/d/1upM9ue4UAuJwIBbZ6fRdjGKmzs-odcWxDQfYftIrHyw/edit?usp=sharing

PT IMPORTED STORY: https://www.pivotaltracker.com/story/show/171138668

[xtine]

This is proving to be much more difficult than it seems. Because we cannot edit HTML or have control of classes or attributes for social media links, I tried to set the attribute manually via Code Injection in the footer. However, even setting

window.Squarespace.onInitialize(Y, function(){
 document.querySelector("[href='https://twitter.com/truss_works']").setAttribute('aria-label', 'Trussworks Twitter');
});

to just target the Twitter link, it does not seem to have any affect on production.

Upon inspection of the source code, it seems that there is some after body loading scripting of the social media link SVG icons that may reset the attribute setting.

I'm not sure how to proceed in fixing this unless we flip the entire site to edit HTML which then we may lose easier thematic editing in the Squarespace UI.