Merge pull request #1092 from tsidel/master

Adds aria-labels to svg social icon links

src/_components/footer/Footer.svelte

@@ -5,6 +5,7 @@
 	import socials from './socials';
 
 	import { thatLinks, supportLinks, companyLinks, legalLinks } from './links';
+
 </script>
 
 <footer class="bg-white border-t border-gray-200" aria-labelledby="footerHeading">
@@ -19,7 +20,7 @@
 				<div class="flex space-x-2">
 					{#each socials as s}
 						<div class="h-6 w-6">
-							<SocialLink href={s.href} network={s.network} />
+							<SocialLink href={s.href} ariaLabel={s.ariaLabel} network={s.network} />
 						</div>
 					{/each}
 				</div>

src/_components/footer/socials.js

@@ -1,34 +1,43 @@
 export default [
 	{
 		href: 'https://github.com/thatconference',
-		network: 'GITHUB'
+		network: 'GITHUB',
+		ariaLabel: 'Github Repo'
 	},
 	{
 		href: 'https://twitter.com/thatconference',
-		network: 'TWITTER'
+		network: 'TWITTER',
+		ariaLabel: 'Twitter'
+
 	},
 	{
 		href: 'https://facebook.com/thatconference',
-		network: 'FACEBOOK'
+		network: 'FACEBOOK',
+		ariaLabel: 'Facebook'
 	},
 	{
 		href: 'https://instagram.com/thatconference',
-		network: 'INSTAGRAM'
+		network: 'INSTAGRAM',
+		ariaLabel: 'Instagram'
 	},
 	{
 		href: 'https://linkedin.com/company/that-conference',
-		network: 'LINKEDIN'
+		network: 'LINKEDIN',
+		ariaLabel: 'LinkedIn'
 	},
 	{
 		href: 'https://youtube.com/c/thatconference',
-		network: 'YOUTUBE'
+		network: 'YOUTUBE',
+		ariaLabel: 'YouTube'
 	},
 	{
 		href: 'https://that.live',
-		network: 'TWITCH'
+		network: 'TWITCH',
+		ariaLabel: 'Twitch'
 	},
 	{
 		href: '/signup/',
-		network: 'SLACK'
+		network: 'SLACK',
+		ariaLabel: 'Join Us on Slack'
 	}
 ];

src/_components/members/MemberCard.svelte

@@ -61,7 +61,7 @@
 					<dt class="sr-only">Social Links</dt>
 					<dd class="mt-2">
 						{#each profileLinks as link}
-							<SocialLinks href={link.url} network={link.linkType} />
+							<SocialLinks href={link.url} ariaLabel={link.ariaLabel} network={link.linkType} />
 						{/each}
 					</dd>
 				</dl>

src/_components/social/SocialLink.svelte

@@ -17,51 +17,64 @@
 
 	export let network;
 	export let href;
+	export let ariaLabel;
 	export let isLast = false;
 
 	let socialIcon;
 
 	switch (network) {
 		case 'FACEBOOK':
 			socialIcon = facebook;
+			ariaLabel = 'Facebook';
 			break;
 		case 'TWITTER':
 			socialIcon = twitter;
+			ariaLabel = 'Twitter';
 			break;
 		case 'GITHUB':
 			socialIcon = github;
+			ariaLabel = 'Github';
 			break;
 		case 'INSTAGRAM':
 			socialIcon = instagram;
+			ariaLabel = 'Instagram';
 			break;
 		case 'WEBSITE':
 			socialIcon = link;
+			ariaLabel = 'Website';
 			break;
 		case 'LINKEDIN':
 			socialIcon = linkedin;
+			ariaLabel = 'LinkedIn';
 			break;
 		case 'YOUTUBE':
 			socialIcon = youtubePlay;
+			ariaLabel = 'YouTube';
 			break;
 		case 'TWITCH':
 			socialIcon = twitch;
+			ariaLabel = 'Twitch';
 			break;
 		case 'DRIBBBLE':
 			socialIcon = dribbble;
+			ariaLabel = 'Dribble';
 			break;
 		case 'MEDIUM':
 			socialIcon = medium;
+			ariaLabel = 'Medium';
 			break;
 		case 'STACK_OVERFLOW':
 			socialIcon = stackOverflow;
+			ariaLabel = 'Stack Overflow';
 			break;
 		case 'SLACK':
 			socialIcon = slack;
+			ariaLabel = 'Slack';
 			break;
 	}
 </script>
 
-<a {href} target="_blank" rel="noopener">
+<a {href} aria-label={ariaLabel} target="_blank" rel="noopener" >
 	<Icon
 		data={socialIcon}
 		class={`transition duration-500 ease-in-out transform hover:scale-125 cursor-pointer ${

src/routes/join/[activityId]/index.svelte

@@ -271,7 +271,7 @@
 
 		{#if activityDetails}
 			<ActionHeader title={activityDetails.title}>
-				<a href="/activities/{activityId}/">Activity Details</a>
+				<a href="/activities/{activityId}/" class="px-8 py-3 rounded-md shadow text-base leading-6 font-medium border-2 border-thatBlue-500 text-thatBlue-500 bg-white hover:bg-thatBlue-500 hover:text-white focus:bg-thatBlue-500 focus:text-white focus:outline-none focus:ring-thatBlue-500 focus:border-thatBlue-800 transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10" target="_blank" rel="noopener">Activity Details</a>
 			</ActionHeader>
 		{/if}
 	</div>