Icons only visible when logged in

Hello,

The theme (or some custom JavaScript via the theme) is breaking the buttons by trying to insert an icon that indicates external links. Specifically, the ‘screen reader only’ element is the issue:

<span class="sr-only">This off-site link opens in new tab or window.</span>

The linkHelpers() function in /wp-content/themes/insite-starter/inc/assets/js/custom.js is the source of that element.

Hi micropat – thank you SO much! You hit the nail on the head!

Thanks for this plugin, and thanks for the terrific response.

My javascript, as you noted, tries to ‘enhance’ external links in various ways: identifying them with a class attribute so we can add “new window” icons via CSS (which can be applied, or not, selectively), augmenting their titles, and adding screen reader tags for accessibility. After it finds all of the external links, it iterates through them and adds the enhancements.

To exclude the AddToAny items, I had to resort to the rather awkward code:

$(this).not('class^="a2a_"').attr({
				target: '_blank',
				title: 'Off-site link opens in a new tab or window '+origTitle
			}).append('<span class="sr-only">This off-site link opens in new tab or window.</span>');

Just as a tiny suggestion: it would be lovely if you gave every button a class name like class=”a2a_button” in addition to its more specific class names, so it wouldn’t be necessary to resort to that “starts with” selector.

.not('.a2a_button') would be much simpler. Currently, they don’t have a class name in common.

Am I understanding correctly that you are using the

<span class="a2a_label">Facebook</span>

to function as an accessibility feature? Then I feel better that I don’t have to add an accessibility feature in addition to that.

Thanks again!

Thanks for your kind words and great feedback @hommealone!

Yes, the visually hidden .a2a_label is for screen reader accessibility.