Skip to content

Commit

Permalink
[FEATURE] Add aria-attributes to social icons (#341)
Browse files Browse the repository at this point in the history 
* [FEATURE] Add aria-attributes to social icons

* Add aria label to link
* hide icon from screenreaders

* [FEATURE] Add aria-attributes to social icons

remove obsolete space between attributes in affected tags
  • Loading branch information
@hputzek @MattiasNilsson
hputzek authored and MattiasNilsson committed Nov 16, 2017
1 parent 4c9b2aa commit 6257544
Showing 1 changed file with 18 additions and 18 deletions.
36 changes: 18 additions & 18 deletions Resources/Private/Partials/ContentElements/Socialmedia.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,107 +8,107 @@
<f:if condition="{settings.facebookLink}">
<f:then>
<a class="social-icons__item" href="{settings.facebookLink}"
target="_blank" title="Facebook"><span class="icons icon-t3-facebook"></span></a>
target="_blank" title="Facebook" aria-label="Facebook"><span aria-hidden="true" class="icons icon-t3-facebook"></span></a>
</f:then>
<f:else>
<a class="social-icons__item" href="{theme:constant(constant:'themes.configuration.socialmedia.facebookLink')}"
target="_blank" title="Facebook"><span class="icons icon-t3-facebook"></span></a>
target="_blank" title="Facebook" aria-label="Facebook"><span aria-hidden="true" class="icons icon-t3-facebook"></span></a>
</f:else>
</f:if>
</f:if>
<f:if condition="{theme:constant(constant:'themes.configuration.socialmedia.useTwitter')}">
<f:if condition="{settings.twitterLink}">
<f:then>
<a class="social-icons__item" href="{settings.twitterLink}"
target="_blank" title="Twitter"><span class="icons icon-t3-twitter"></span></a>
target="_blank" title="Twitter" aria-label="Twitter"><span aria-hidden="true" class="icons icon-t3-twitter"></span></a>
</f:then>
<f:else>
<a class="social-icons__item" href="{theme:constant(constant:'themes.configuration.socialmedia.twitterLink')}"
target="_blank" title="Twitter"><span class="icons icon-t3-twitter"></span></a>
target="_blank" title="Twitter" aria-label="Twitter"><span aria-hidden="true" class="icons icon-t3-twitter"></span></a>
</f:else>
</f:if>
</f:if>
<f:if condition="{theme:constant(constant:'themes.configuration.socialmedia.useLinkedIn')}">
<f:if condition="{settings.linkedInLink}">
<f:then>
<a class="social-icons__item" href="{settings.linkedInLink}"
target="_blank" title="LinkedIn"><span class="icons icon-t3-linkedin"></span></a>
target="_blank" title="LinkedIn" aria-label="LinkedIn"><span aria-hidden="true" class="icons icon-t3-linkedin"></span></a>
</f:then>
<f:else>
<a class="social-icons__item" href="{theme:constant(constant:'themes.configuration.socialmedia.linkedInLink')}"
target="_blank" title="LinkedIn"><span class="icons icon-t3-linkedin"></span></a>
target="_blank" title="LinkedIn" aria-label="LinkedIn"><span aria-hidden="true" class="icons icon-t3-linkedin"></span></a>
</f:else>
</f:if>
</f:if>
<f:if condition="{theme:constant(constant:'themes.configuration.socialmedia.useXing')}">
<f:if condition="{settings.xingLink}">
<f:then>
<a class="social-icons__item" href="{settings.xingLink}"
target="_blank" title="Xing"><span class="icons icon-t3-xing"></span></a>
target="_blank" title="Xing" aria-label="Xing"><span aria-hidden="true" class="icons icon-t3-xing"></span></a>
</f:then>
<f:else>
<a class="social-icons__item" href="{theme:constant(constant:'themes.configuration.socialmedia.xingLink')}"
target="_blank" title="Xing"><span class="icons icon-t3-xing"></span></a>
target="_blank" title="Xing" aria-label="Xing"><span aria-hidden="true" class="icons icon-t3-xing"></span></a>
</f:else>
</f:if>
</f:if>
<f:if condition="{theme:constant(constant:'themes.configuration.socialmedia.useVimeo')}">
<f:if condition="{settings.vimeoLink}">
<f:then>
<a class="social-icons__item" href="{settings.vimeoLink}"
target="_blank" title="Vimeo"><span class="icons icon-t3-vimeo"></span></a>
target="_blank" title="Vimeo" aria-label="Vimeo"><span aria-hidden="true" class="icons icon-t3-vimeo"></span></a>
</f:then>
<f:else>
<a class="social-icons__item" href="{theme:constant(constant:'themes.configuration.socialmedia.vimeoLink')}"
target="_blank" title="Vimeo"><span class="icons icon-t3-vimeo"></span></a>
target="_blank" title="Vimeo" aria-label="Vimeo"><span aria-hidden="true" class="icons icon-t3-vimeo"></span></a>
</f:else>
</f:if>
</f:if>
<f:if condition="{theme:constant(constant:'themes.configuration.socialmedia.useGooglePlus')}">
<f:if condition="{settings.googlePlusLink}">
<f:then>
<a class="social-icons__item" href="{settings.googlePlusLink}"
target="_blank" title="Googleplus"><span class="icons icon-t3-googleplus"></span></a>
target="_blank" title="Googleplus" aria-label="Googleplus"><span aria-hidden="true" class="icons icon-t3-googleplus"></span></a>
</f:then>
<f:else>
<a class="social-icons__item" href="{theme:constant(constant:'themes.configuration.socialmedia.googlePlusLink')}"
target="_blank" title="Googleplus"><span class="icons icon-t3-googleplus"></span></a>
target="_blank" title="Googleplus" aria-label="Googleplus"><span aria-hidden="true" class="icons icon-t3-googleplus"></span></a>
</f:else>
</f:if>
</f:if>
<f:if condition="{theme:constant(constant:'themes.configuration.socialmedia.usePinterest')}">
<f:if condition="{settings.pinterestLink}">
<f:then>
<a class="social-icons__item" href="{settings.pinterestLink}"
target="_blank" title="Pinterest"><span class="icons icon-t3-pinterest"></span></a>
target="_blank" title="Pinterest" aria-label="Pinterest"><span aria-hidden="true" class="icons icon-t3-pinterest"></span></a>
</f:then>
<f:else>
<a class="social-icons__item" href="{theme:constant(constant:'themes.configuration.socialmedia.pinterestLink')}"
target="_blank" title="Pinterest"><span class="icons icon-t3-pinterest"></span></a>
target="_blank" title="Pinterest" aria-label="Pinterest"><span aria-hidden="true" class="icons icon-t3-pinterest"></span></a>
</f:else>
</f:if>
</f:if>
<f:if condition="{theme:constant(constant:'themes.configuration.socialmedia.useInstagram')}">
<f:if condition="{settings.instagramLink}">
<f:then>
<a class="social-icons__item" href="{settings.instagramLink}"
target="_blank" title="Instagram"><span class="icons icon-t3-instagram"></span></a>
target="_blank" title="Instagram" aria-label="Instagram"><span aria-hidden="true" class="icons icon-t3-instagram"></span></a>
</f:then>
<f:else>
<a class="social-icons__item" href="{theme:constant(constant:'themes.configuration.socialmedia.instagramLink')}"
target="_blank" title="Instagram"><span class="icons icon-t3-instagram"></span></a>
target="_blank" title="Instagram" aria-label="Instagram"><span aria-hidden="true" class="icons icon-t3-instagram"></span></a>
</f:else>
</f:if>
</f:if>
<f:if condition="{theme:constant(constant:'themes.configuration.socialmedia.useYoutube')}">
<f:if condition="{settings.youtubeLink}">
<f:then>
<a class="social-icons__item" href="{settings.youtubeLink}"
target="_blank" title="Youtube"><span class="icons icon-t3-youtube"></span></a>
target="_blank" title="Youtube" aria-label="Youtube"><span aria-hidden="true" class="icons icon-t3-youtube"></span></a>
</f:then>
<f:else>
<a class="social-icons__item" href="{theme:constant(constant:'themes.configuration.socialmedia.youtubeLink')}"
target="_blank" title="Youtube"><span class="icons icon-t3-youtube"></span></a>
target="_blank" title="Youtube" aria-label="Youtube"><span aria-hidden="true" class="icons icon-t3-youtube"></span></a>
</f:else>
</f:if>
</f:if>
Expand Down

0 comments on commit 6257544

Please sign in to comment.