Skip to content

Commit

Permalink
Merge pull request appwrite#348 from guptadeepak8/fix-aria-labels-for…
Browse files Browse the repository at this point in the history 
…-social-icons

fix: Update aria-labels for social icons in footer
  • Loading branch information
@TGlide
TGlide authored Dec 18, 2023
2 parents f434d92 + 8473c80 commit 742c13e
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 96 deletions.
39 changes: 3 additions & 36 deletions src/lib/components/MainFooter.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,8 @@
<script lang="ts">
import { socials } from '$lib/constants';
import ThemeSelect from './ThemeSelect.svelte';
export let variant: 'homepage' | 'docs' = 'homepage';
type Social = {
icon: string;
label?: string;
link: string;
};
const socials: Array<Social> = [
{
icon: 'aw-icon-discord',
link: 'https://appwrite.io/discord'
},
{
icon: 'aw-icon-github',
link: 'https://github.com/appwrite'
},
{
icon: 'aw-icon-x',
link: 'https://twitter.com/intent/follow?screen_name=appwrite'
},
{
icon: 'aw-icon-linkedin',
link: 'https://www.linkedin.com/company/appwrite'
},
{
icon: 'aw-icon-youtube',
label: 'YouTube',
link: 'https://www.youtube.com/c/appwrite?sub_confirmation=1'
}
];
function getSocialLabel(social: Social) {
return social.label ?? social.icon;
}
</script>

{#if variant === 'homepage'}
Expand All @@ -46,7 +13,7 @@
<a
href={social.link}
class="aw-icon-button"
aria-label="Appwrite on {getSocialLabel(social)}"
aria-label={social.label}
target="_blank"
rel="noopener noreferrer"
>
Expand All @@ -68,7 +35,7 @@
<a
href={social.link}
class="aw-icon-button"
aria-label="Appwrite on {getSocialLabel(social)}"
aria-label={social.label}
target="_blank"
rel="noopener noreferrer"
>
Expand Down
36 changes: 35 additions & 1 deletion src/lib/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,38 @@ export const BANNER_KEY = 'pricing-banner-01'; // Change key to force banner to
* History:
* discord-banner-01
* pricing-banner-01
*/
*/

export type Social = {
icon: string;
label: string;
link: string;
};

export const socials: Array<Social> = [
{
icon: 'aw-icon-discord',
label: 'Discord',
link: 'https://appwrite.io/discord'
},
{
icon: 'aw-icon-github',
label: 'Github',
link: 'https://github.com/appwrite'
},
{
icon: 'aw-icon-x',
label: 'Twitter',
link: 'https://twitter.com/intent/follow?screen_name=appwrite'
},
{
icon: 'aw-icon-linkedin',
label: 'LinkedIn',
link: 'https://www.linkedin.com/company/appwrite'
},
{
icon: 'aw-icon-youtube',
label: 'YouTube',
link: 'https://www.youtube.com/c/appwrite?sub_confirmation=1'
}
];
8 changes: 4 additions & 4 deletions src/routes/community/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -499,7 +499,7 @@
<span
class="icon-discord aw-u-font-size-40"
aria-hidden="true"
aria-label="Discord logo"
aria-label="Discord"
/>
</div>
<div class="aw-title u-margin-block-start-auto">
Expand All @@ -519,7 +519,7 @@
<span
class="aw-icon-x aw-u-font-size-40"
aria-hidden="true"
aria-label="X logo"
aria-label="X"
/>
</div>
<div class="aw-title u-margin-block-start-auto">
Expand All @@ -539,7 +539,7 @@
<span
class="icon-github aw-u-font-size-40"
aria-hidden="true"
aria-label="GitHub logo"
aria-label="GitHub"
/>
</div>
<div class="aw-title u-margin-block-start-auto">
Expand All @@ -559,7 +559,7 @@
<span
class="icon-youtube aw-u-font-size-40"
aria-hidden="true"
aria-label="Youtube logo"
aria-label="Youtube"
/>
</div>
<div class="aw-title u-margin-block-start-auto">
Expand Down
69 changes: 14 additions & 55 deletions src/routes/contact-us/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
import { TITLE_SUFFIX } from '$routes/titles';
import FooterNav from '../../lib/components/FooterNav.svelte';
import MainFooter from '../../lib/components/MainFooter.svelte';
import { socials } from '$lib/constants';
let email = '';
let firstName = '';
Expand Down Expand Up @@ -104,61 +105,19 @@
>
<h2 class="aw-label aw-u-color-text-primary">Follow us</h2>
<ul class="u-flex u-gap-8">
<li>
<a
href="/discord"
class="aw-icon-button"
aria-label="Appwrite on aw-icon-discord"
target="_blank"
rel="noopener noreferrer"
>
<span class="aw-icon-discord" aria-hidden="true" />
</a>
</li>
<li>
<a
href="https://github.com/appwrite"
class="aw-icon-button"
aria-label="Appwrite on aw-icon-github"
target="_blank"
rel="noopener noreferrer"
>
<span class="aw-icon-github" aria-hidden="true" />
</a>
</li>
<li>
<a
href="https://twitter.com/appwrite"
class="aw-icon-button"
aria-label="Appwrite on aw-icon-x"
target="_blank"
rel="noopener noreferrer"
>
<span class="aw-icon-x" aria-hidden="true" />
</a>
</li>
<li>
<a
href="https://linkedin.com/company/appwrite"
class="aw-icon-button"
aria-label="Appwrite on aw-icon-linkedin"
target="_blank"
rel="noopener noreferrer"
>
<span class="aw-icon-linkedin" aria-hidden="true" />
</a>
</li>
<li>
<a
href="https://youtube.com/c/appwrite?sub_confirmation=1"
class="aw-icon-button"
aria-label="Appwrite on YouTube"
target="_blank"
rel="noopener noreferrer"
>
<span class="aw-icon-youtube" aria-hidden="true" />
</a>
</li>
{#each socials as social}
<li>
<a
href={social.link}
class="aw-icon-button"
aria-label={social.label}
target="_blank"
rel="noopener noreferrer"
>
<span class={social.icon} aria-hidden="true" />
</a>
</li>
{/each}
</ul>
</section>
<div
Expand Down

0 comments on commit 742c13e

Please sign in to comment.