From 0e6b095c30b120128976b590a3d735c744024ef9 Mon Sep 17 00:00:00 2001
From: Jeana Clark <jeana@jeanaclark.org>
Date: Thu, 18 Nov 2021 19:58:55 -0600
Subject: [PATCH 1/3] Adds aria-labels to svg social links so they can be
 read/understood by screen readers

---
 src/_components/footer/Footer.svelte      |  5 ++++-
 src/_components/footer/socials.js         | 25 +++++++++++++++--------
 src/_components/members/MemberCard.svelte |  2 +-
 src/_components/social/SocialLink.svelte  | 15 +++++++++++++-
 4 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/_components/footer/Footer.svelte b/src/_components/footer/Footer.svelte
index 5dc14ce20..aeb4d4444 100644
--- a/src/_components/footer/Footer.svelte
+++ b/src/_components/footer/Footer.svelte
@@ -5,6 +5,9 @@
 	import socials from './socials';
 
 	import { thatLinks, supportLinks, companyLinks, legalLinks } from './links';
+
+	const ariaLabel = $$props['aria-label']
+
 </script>
 
 <footer class="bg-white border-t border-gray-200" aria-labelledby="footerHeading">
@@ -19,7 +22,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>
diff --git a/src/_components/footer/socials.js b/src/_components/footer/socials.js
index 2a74c90f9..eb40215d2 100644
--- a/src/_components/footer/socials.js
+++ b/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'
 	}
 ];
diff --git a/src/_components/members/MemberCard.svelte b/src/_components/members/MemberCard.svelte
index 153ef1f09..8f2592786 100644
--- a/src/_components/members/MemberCard.svelte
+++ b/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>
diff --git a/src/_components/social/SocialLink.svelte b/src/_components/social/SocialLink.svelte
index 1e96e4335..0c4e36d18 100644
--- a/src/_components/social/SocialLink.svelte
+++ b/src/_components/social/SocialLink.svelte
@@ -17,6 +17,7 @@
 
 	export let network;
 	export let href;
+	export let ariaLabel;
 	export let isLast = false;
 
 	let socialIcon;
@@ -24,44 +25,56 @@
 	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 ${

From 61b82e26cd370fb390994b8052240e525dcd5a8c Mon Sep 17 00:00:00 2001
From: Jeana Clark <jeana@jeanaclark.org>
Date: Thu, 18 Nov 2021 21:18:53 -0600
Subject: [PATCH 2/3] remove bad test code

---
 src/_components/footer/Footer.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/_components/footer/Footer.svelte b/src/_components/footer/Footer.svelte
index aeb4d4444..f0a90829a 100644
--- a/src/_components/footer/Footer.svelte
+++ b/src/_components/footer/Footer.svelte
@@ -6,8 +6,6 @@
 
 	import { thatLinks, supportLinks, companyLinks, legalLinks } from './links';
 
-	const ariaLabel = $$props['aria-label']
-
 </script>
 
 <footer class="bg-white border-t border-gray-200" aria-labelledby="footerHeading">

From d218146eefd08c4458c476cc0fc3889681b6ff2e Mon Sep 17 00:00:00 2001
From: Jeana Clark <jeana@jeanaclark.org>
Date: Thu, 18 Nov 2021 22:00:44 -0600
Subject: [PATCH 3/3] adds classes to activity details button on activity event
 page

---
 src/routes/join/[activityId]/index.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/join/[activityId]/index.svelte b/src/routes/join/[activityId]/index.svelte
index d31de6a7a..27e635bab 100644
--- a/src/routes/join/[activityId]/index.svelte
+++ b/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>