Merge branch 'chore/merge-main' into HEAD

Schroedinger-Hat · Dec 8, 2023 · 41f2665 · 41f2665
2 parents 53c0197 + 00fb59d
commit 41f2665
Show file tree

Hide file tree

Showing 12 changed files with 86 additions and 43 deletions.
diff --git a/index.html b/index.html
@@ -23,12 +23,6 @@
 
     gtag('config', 'UA-97271870-3')
   </script>
-  <script
-    async
-    src="https://eocampaign1.com/form/e9fb84c2-ebfc-11ed-8424-fbce0ce9d7bc.js"
-    data-form="e9fb84c2-ebfc-11ed-8424-fbce0ce9d7bc"
-  >
-  </script>
 </head>
 
 <body>

diff --git a/src/App.vue b/src/App.vue
@@ -1,15 +1,19 @@
 <script setup lang="ts">
 import { useElementBounding } from '@vueuse/core'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useHead } from '@unhead/vue'
 import { useI18n } from 'vue-i18n'
+import { useNewsletter } from '@/functions/useNewsletter'
 import TheContributing from '@/components/TheContributing.vue'
 import TheFooter from '@/components/layout/TheFooter.vue'
 import TheNavbar from '@/components/layout/TheNavbar.vue'
 
 const navbar = ref<HTMLElement | null>(null)
 const { height } = useElementBounding(navbar)
 const { t } = useI18n()
+const { init } = useNewsletter()
+
+onMounted(init)
 
 useHead({
   titleTemplate: (title?: string) => title ? `${title} | Schrödinger Hat` : 'Schrödinger Hat',

diff --git a/src/components/TheContributing.vue b/src/components/TheContributing.vue
@@ -16,10 +16,10 @@ const SHGitHubWebsiteRepo = 'https://github.com/Schrodinger-Hat/schrodinger-hat-
     <div class="bg-secondary py-30">
       <div class="container contributing-container-text">
         <div class="inner-text">
-          <h4 data-test="contributing-title">
+          <h2 data-test="contributing-title" tabindex="0">
             {{ $t('contributing.title') }}
-          </h4>
-          <p data-test="contributing-description">
+          </h2>
+          <p data-test="contributing-description" tabindex="0">
             <!-- TODO: Find a way to write this text better -->
             <b>Schrödinger Hat</b> {{ $t('contributing.is-a-project') }}
             <a
@@ -30,7 +30,7 @@ const SHGitHubWebsiteRepo = 'https://github.com/Schrodinger-Hat/schrodinger-hat-
             >GitHub
             </a>.
           </p>
-          <p data-test="contributing-cta">
+          <p data-test="contributing-cta" tabindex="0">
             {{ $t('contributing.cta') }}
             <a
               data-test="contributing-github-website-link"
@@ -49,6 +49,7 @@ const SHGitHubWebsiteRepo = 'https://github.com/Schrodinger-Hat/schrodinger-hat-
               data-test="contributing-open-collective"
               href="https://opencollective.com/schrodinger-hat"
               target="_blank"
+              :aria-label="$t('accessibility.contributing.openCollective_label' as string)"
             >
               <i
                 data-test="contributing-open-collective-icon"
@@ -59,6 +60,7 @@ const SHGitHubWebsiteRepo = 'https://github.com/Schrodinger-Hat/schrodinger-hat-
               data-test="contributing-facebook"
               href="https://www.facebook.com/schrodingerhat"
               target="_blank"
+              :aria-label="$t('accessibility.contributing.facebook_label' as string)"
             >
               <i
                 data-test="contributing-facebook-icon"
@@ -69,6 +71,7 @@ const SHGitHubWebsiteRepo = 'https://github.com/Schrodinger-Hat/schrodinger-hat-
               data-test="contributing-twitter"
               href="https://twitter.com/schrodinger_hat"
               target="_blank"
+              :aria-label="$t('accessibility.contributing.twitter_label' as string)"
             >
               <i
                 data-test="contributing-twitter-icon"
@@ -79,6 +82,7 @@ const SHGitHubWebsiteRepo = 'https://github.com/Schrodinger-Hat/schrodinger-hat-
               data-test="contributing-linkedin"
               href="https://www.linkedin.com/company/schrodinger-hat/"
               target="_blank"
+              :aria-label="$t('accessibility.contributing.linkedin_label' as string)"
             >
               <i
                 data-test="contributing-linkedin-icon"
@@ -89,16 +93,17 @@ const SHGitHubWebsiteRepo = 'https://github.com/Schrodinger-Hat/schrodinger-hat-
               data-test="contributing-instagram"
               href="https://www.instagram.com/schrodinger_hat/"
               target="_blank"
+              :aria-label="$t('accessibility.contributing.instagram_label' as string)"
             >
               <i
-
                 data-test="contributing-instagram-icon"
                 class="fab fa-instagram external-link-color"
               />
             </a>
             <a
               data-test="contributing-discord"
               href="https://discord.gg/RTXr8A3eFn" target="_blank"
+              :aria-label="$t('accessibility.contributing.discord_label' as string)"
             >
               <i
                 data-test="contributing-discord-icon"
@@ -109,9 +114,9 @@ const SHGitHubWebsiteRepo = 'https://github.com/Schrodinger-Hat/schrodinger-hat-
         </div>
         <div class="inner-text" data-test="contributing-partners">
           <!-- TODO: Add title to messages -->
-          <h4 style="padding: 15px 0" data-test="contributing-partners-title">
+          <h2 style="padding: 15px 0" data-test="contributing-partners-title" tabindex="0">
             Community Partners
-          </h4>
+          </h2>
           <div class="partner-image" data-test="contributing-partners-logo">
             <!-- TODO: Create a v-for with all the partners maybe a file also -->
             <a
@@ -238,7 +243,7 @@ const SHGitHubWebsiteRepo = 'https://github.com/Schrodinger-Hat/schrodinger-hat-
   .inner-text {
     padding: 0 0.5em;
 
-    h4 {
+    h2 {
       margin: 0;
       font-size: 2.2em;
     }

diff --git a/src/components/buttons/CtaComponent.vue b/src/components/buttons/CtaComponent.vue
@@ -4,6 +4,7 @@ import { useCtaComponent } from '@/functions/useCtaComponent'
 
 defineProps<{
   secondary?: boolean
+  ariaText?: string
   tertiary?: boolean
   quaternary?: boolean
 }>()
@@ -12,17 +13,12 @@ const { component, bindings } = useCtaComponent(useAttrs())
 </script>
 
 <template>
-  <component
-    :is="component"
-    v-bind="bindings"
-    class="cta"
-    :class="{
-      'py-1 px-1.5 rounded-1': secondary || tertiary || quaternary,
-      'secondary': secondary,
-      'tertiary': tertiary,
-      'quaternary': quaternary,
-    }"
-  >
+  <component :is="component" v-bind="bindings" :aria-label="ariaText" class="cta" :class="{
+    'py-1 px-1.5 rounded-1': secondary || tertiary || quaternary,
+    'secondary': secondary,
+    'tertiary': tertiary,
+    'quaternary': quaternary,
+  }">
     <slot />
   </component>
 </template>
@@ -51,7 +47,7 @@ const { component, bindings } = useCtaComponent(useAttrs())
 
   @include breakpoint(md) {
     &:hover {
-     background: $bg-secondary;
+      background: $bg-secondary;
     }
   }
 }

diff --git a/src/components/buttons/CtaIcon.vue b/src/components/buttons/CtaIcon.vue
@@ -5,6 +5,7 @@ import { useCtaComponent } from '@/functions/useCtaComponent'
 defineProps<{
   icon: string
   small?: boolean
+  ariaLabel?: string
 }>()
 
 const { component, bindings } = useCtaComponent(useAttrs())
@@ -13,6 +14,7 @@ const { component, bindings } = useCtaComponent(useAttrs())
 <template>
   <component
     :is="component"
+    :aria-label="ariaLabel"
     v-bind="bindings"
     class="cta mx-1 px-1 py-0.5 rounded-1"
     :class="{ small }"

diff --git a/src/components/buttons/LogoAnimated.vue b/src/components/buttons/LogoAnimated.vue
@@ -3,7 +3,13 @@
 </script>
 
 <template>
-  <router-link data-test="footer-home-link" class="logo" :to="{ name: 'Home' }">
+  <router-link
+    data-test="footer-home-link"
+    class="logo"
+    :to="{ name: 'Home' }"
+    :aria-label="$t('accessibility.navbar.logo' as string)"
+    tabindex="0"
+  >
     <div data-test="footer-logo" class="flex justify-center items-center">
       <img
         data-test="footer-home-link-img"

diff --git a/src/components/layout/TheNavbar.vue b/src/components/layout/TheNavbar.vue
@@ -19,29 +19,36 @@ interface Link {
 
 const links = [
   {
+    href: '/',
     id: 'Team',
     to: 'Team',
     test: 'team-page-link',
     text: 'navbar.team',
+    ariaText: 'navbar.team',
   },
   {
+    href: '/',
     id: 'Events',
     to: 'Events',
     test: 'event-page-link',
     text: 'navbar.events',
+    ariaText: 'navbar.events',
   },
   {
+    href: '/',
     id: 'CodeOfConduct',
     test: 'code-page-link',
     text: 'navbar.codeOfConduct',
     to: 'CodeOfConduct',
+    ariaText: 'navbar.codeOfConduct',
   },
   {
     href: 'https://ign.schrodinger-hat.it',
     id: 'IGN',
     target: '_blank',
     test: 'IGN-link',
     text: 'navbar.imageGoNord',
+    ariaText: 'navbar.imageGoNord',
   },
 ]
 
@@ -51,6 +58,7 @@ const ghCTA = {
   id: 'GitHub',
   test: 'github-cta',
   text: 'navbar.gitHub',
+  ariaText: 'navbar.gitHub',
 }
 
 const [showMenu, toggleMenu] = useToggle()
@@ -70,8 +78,9 @@ watch(showMenu, value => (value ? scrollLock.value = true : scrollLock.value = f
       <LogoAnimated />
       <nav class="flex">
         <CtaComponent
-          v-for="{ id, href, to, text, test, target } in links"
+          v-for="{ id, href, to, text, test, target, ariaText } in links"
           :key="id"
+          :aria-text="$t(ariaText as string)"
           :data-test="`data-${test}`"
           :to="to ? { name: to } : null"
           :href="href"
@@ -82,18 +91,21 @@ watch(showMenu, value => (value ? scrollLock.value = true : scrollLock.value = f
           <span>{{ $t(text as string) }}</span>
         </CtaComponent>
         <CtaIcon
+          :aria-label="$t(ghCTA.ariaText as string)"
           :data-test="ghCTA.test"
           :href="ghCTA.href"
           :icon="ghCTA.icon"
           target="_blank"
         />
         <CtaIcon
+          :aria-label="$t('accessibility.navbar.openMenu' as string)"
           class="md:hidden"
           data-test="nav-burger-menu-cta"
           icon="fas fa-hamburger"
           @click="toggleMenu()"
         />
         <CtaIcon
+          :aria-label="$t('accessibility.navbar.toggleIcon' as string)"
           :icon="`fas ${themeIcon}`"
           data-test="nav-theme-icon"
           @click="toggleDark()"

diff --git a/src/functions/useNewsletter.ts b/src/functions/useNewsletter.ts
@@ -0,0 +1,20 @@
+const NEWSLETTER_ID = 'e9fb84c2-ebfc-11ed-8424-fbce0ce9d7bc'
+
+export const useNewsletter = () => {
+  const createScript = () => {
+    const $script = document.createElement('script')
+    $script.setAttribute('src', `https://eocampaign1.com/form/${NEWSLETTER_ID}.js`)
+    $script.setAttribute('async', '')
+    $script.setAttribute('data-form', NEWSLETTER_ID)
+    document.head.appendChild($script)
+  }
+
+  const init = () => {
+    if (!document.cookie.includes(NEWSLETTER_ID))
+      createScript()
+  }
+
+  return {
+    init,
+  }
+}
diff --git a/src/pages/CodeConduct.vue b/src/pages/CodeConduct.vue
@@ -17,14 +17,16 @@ useHead({
 <template>
   <main class="container">
     <div class="py-6 px-12">
-      <h1 class="head-1">
+      <h1 class="head-1" tabindex="0">
         Code of conduct
       </h1>
       <article v-for="{ title, copy } in codeOfConduct" :key="title" class="mt-5">
-        <h2 class="head-4 mb-1">
+        <h2 class="head-4 mb-1" tabindex="0">
           {{ title }}
         </h2>
-        <p>{{ copy }}</p>
+        <p tabindex="0">
+          {{ copy }}
+        </p>
       </article>
     </div>
   </main>

diff --git a/src/pages/PageHome.vue b/src/pages/PageHome.vue
@@ -33,10 +33,10 @@ useHead({ titleTemplate: null, title: t('head.home.title') })
 <template>
   <main class="flex flex-col-reverse justify-center items-center px-6 pt-0 mx-auto lg:flex-row lg:px-16">
     <div class="max-w-144 mr-0 text-center lg:text-left lg:mr-24">
-      <h1 class="head-1 font-bold leading-none">
+      <h1 class="head-1 font-bold leading-none" tabindex="0">
         {{ $t('main.h1') }}
       </h1>
-      <p class="head-1">
+      <p class="head-1" tabindex="0">
         {{ $t('main.h2') }}
       </p>
       <div class="w-full pt-6 space-x-2">

diff --git a/src/pages/TeamMember.vue b/src/pages/TeamMember.vue
@@ -32,7 +32,7 @@ useHead({
   <div v-else class="team">
     <div class="container">
       <div class="content">
-        <h1 data-test="member-page-name" class="head-1">
+        <h1 data-test="member-page-name" class="head-1" tabindex="0">
           {{ $t(`team.${member}.name`) }}
         </h1>
         <div>
@@ -47,27 +47,28 @@ useHead({
             v-if="$t(`team.${member}.github_url`).length > 1"
             :href="$t(`team.${member}.github_url`)" target="_blank"
             data-test="member-page-github"
+            :aria-label="`${$t('accessibility.teamMember.github' as string, { name: $t(`team.${member}.name`) })}`"
           >
             <i class="mobile-menu-icon fab fa-github" />
           </a>
           <a
             v-if="$t(`team.${member}.linkedin_url`).length > 1"
             :href="$t(`team.${member}.linkedin_url`)" target="_blank"
-            data-test="member-page-linkedin"
+            data-test="member-page-linkedin" :aria-label="`${$t('accessibility.teamMember.linkedin' as string, { name: $t(`team.${member}.name`) })}`"
           >
             <i class="mobile-menu-icon fab fa-linkedin" />
           </a>
           <a
             v-if="$t(`team.${member}.twitter_url`).length > 1"
             :href="$t(`team.${member}.twitter_url`)" target="_blank"
-            data-test="member-page-twitter"
+            data-test="member-page-twitter" :aria-label="`${$t('accessibility.teamMember.twitter' as string, { name: $t(`team.${member}.name`) })}`"
           >
             <i class="mobile-menu-icon fab fa-twitter" />
           </a>
           <a
             v-if="$t(`team.${member}.website`).length > 1"
             :href="$t(`team.${member}.website`)" target="_blank"
-            data-test="member-page-website"
+            data-test="member-page-website" :aria-label="`${$t('accessibility.teamMember.website' as string, { name: $t(`team.${member}.name`) })}`"
           >
             <i class="mobile-menu-icon fa fa-cloud" />
           </a>
@@ -77,6 +78,7 @@ useHead({
         <div
           class="description !p-2"
           data-test="member-page-description"
+          tabindex="0"
           v-html="$t(`team.${member}.description`)"
         />