feature: fix itemTile add aria labels to footer (#73)

UEK-i-team · Jun 10, 2024 · 8551079 · 8551079
1 parent 992b483
commit 8551079
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 23 deletions.
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
@@ -54,32 +54,43 @@ export const Footer = () => {
   return (
     <div
       className={theme(mainContainerLight, mainContainerDark)}
-      aria-label="site's footer"
+      aria-label={t('ariaLabelFooter')}
     >
       <div className={theme(containerGridLight, containerGridDark)}>
         <div>
-          <h3 className={title}>{t('scienceClub')}</h3>
+          <h3
+            tabIndex="0"
+            aria-label={t('ariaLabelScienceClub')}
+            className={title}
+          >
+            {t('scienceClub')}
+          </h3>
           <h2>
-            <div> {t('iTeam')} </div>
-            <div>i::team {t('uniName')}</div>
+            <div tabIndex="0" aria-label={t('ariaLabelTeamName')}>
+              {' '}
+              {t('iTeam')}{' '}
+            </div>
+            <div tabIndex="0" aria-label={t('ariaLabelUniName')}>
+              i::team {t('uniName')}
+            </div>
             <div>Uniwersytetu Ekonomicznego</div>
             {t('uniTown')}
           </h2>
         </div>
-        <div>
+        <div tabIndex="0" aria-label={t('ariaLabelboard')}>
           <h3>{t('board')}</h3>
           <p>zarzad@example.com</p>
         </div>
         <div>
           {isDarkTheme ? (
             <>
-              <div className={logo}>
+              <div aria-hidden="true" className={logo}>
                 <StaticImage
                   src="../../assets/images/logo_icon_dark_theme.png"
                   alt="ITeam Logo"
                 ></StaticImage>
               </div>
-              <div className={name}>
+              <div aria-hidden="true" className={name}>
                 <StaticImage
                   src="../../assets/images/logo_text_dark_theme.png"
                   alt="ITeam Logo"
@@ -88,13 +99,13 @@ export const Footer = () => {
             </>
           ) : (
             <>
-              <div className={logo}>
+              <div aria-hidden="true" className={logo}>
                 <StaticImage
                   src="../../assets/images/logo_icon_light_theme.png"
                   alt="ITeam Logo"
                 ></StaticImage>
               </div>
-              <div className={name}>
+              <div aria-hidden="true" className={name}>
                 <StaticImage
                   src="../../assets/images/logo_text_light_theme.png"
                   alt="ITeam Logo"
@@ -105,9 +116,13 @@ export const Footer = () => {
         </div>
         <div>
           <div>
-            <h3>{t('address')}</h3>
+            <h3 aria-label={t('ariaLabelAddressWrapper')}>{t('address')}</h3>
           </div>
-          <div className={addressContainer}>
+          <div
+            tabIndex="0"
+            aria-label={t('ariaLabelAddress')}
+            className={addressContainer}
+          >
             <p>
               Rakowicka 27, 31-510 <br />
               {t('town')}
@@ -120,28 +135,27 @@ export const Footer = () => {
           </div>
         </div>
         <div>
-          <h3>{t('supervisor')}</h3>
+          <h3 tabIndex="0" aria-label={t('ariaLabelSupervisor')}>
+            {t('supervisor')}
+          </h3>
           <p>
             mgr Katarzyna Wójcik <br />
             katwoj@fakemail.com
           </p>
         </div>
-        <div>
+        <div aria-label={t('ariaLabelfindUs')}>
           <h3>{t('findUs')}</h3>
-          <div
-            className={theme(containerIconsLight, containerIconsDark)}
-            aria-label="I:: team github link"
-          >
-            <a href={GITHUB_LINK}>
+          <div className={theme(containerIconsLight, containerIconsDark)}>
+            <a href={GITHUB_LINK} aria-label={t('ariaLabelGitHub')}>
               <GithubSVG />
             </a>
-            <a href={FACEBOOK_LINK} aria-label="I:: team facebook link">
+            <a href={FACEBOOK_LINK} aria-label={t('ariaLabelFacebook')}>
               <FacebookSVG />
             </a>
           </div>
         </div>
         <div className="linksWrapper">
-          <h3>Linki:</h3>
+          <h3>{t('links')}</h3>
           <div className="linksListWrapper">
             <ul>
               {LINKS.map(({ title, to, arialLabel, type }) => (

diff --git a/src/components/ItemTile/ItemTile.module.scss b/src/components/ItemTile/ItemTile.module.scss
@@ -36,7 +36,7 @@
   margin-top: 15px;
 }
 
-@media (max-width: 768px){
+@media (max-width: $breakpoint-desktop){
   .border{
     width: min-content;
   }
@@ -57,8 +57,6 @@
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
   }
   .content {
-    width: 326px;
-    height: 219px;
     overflow-y: hidden;
   }
   .title {

diff --git a/src/i18n/enTranslation.js b/src/i18n/enTranslation.js
@@ -19,6 +19,7 @@ const enTranslations = {
     address: 'Address',
     ourProjects: 'Our projects',
     lang: 'English',
+    links: 'Links:',
     ariaLabelSidebarButton: 'Sidebar Button',
     ariaLabelSidebarCloseButton: 'close sidebar button',
     ariaLabelLangButton: 'Language switching button',
@@ -30,6 +31,18 @@ const enTranslations = {
     ariaLabelNews: 'Link to News',
     ariaLabelJoinUs: 'Link to Join Us',
     ariaLabelContact: 'Link to Contact',
+    ariaLabelTeamName: 'Name of the team',
+    ariaLabelUniName: 'Name of the university',
+    ariaLabeluniTown: 'Name of the town',
+    ariaLabelboard: 'Contact to the science club board',
+    ariaLabelAddress: 'Address of our University, and number of our room',
+    ariaLabelSupervisor: 'Contact details to our supervisor',
+    ariaLabelfindUs: 'Details where to find us on social media',
+    ariaLabelGitHub: 'Link to our GitHub',
+    ariaLabelFacebook: 'Link to our Facebook',
+    ariaLabelFooter: 'Footer',
+    ariaLabelScienceClub: 'Science Club',
+    ariaLabelAddressWrapper: 'Address details',
   },
 };
 

diff --git a/src/i18n/plTranslation.js b/src/i18n/plTranslation.js
@@ -19,6 +19,7 @@ const plTranslations = {
     address: 'Adres',
     ourProjects: 'Nasze projekty',
     lang: 'Polski',
+    links: 'Linki: ',
     ariaLabelSidebarButton: 'przycisk do otwarcia sidebara',
     ariaLabelSidebarCloseButton: 'przycisk do zamknięcia sidebara',
     ariaLabelLangButton: 'przycisk  do zmiany jezyka',
@@ -30,6 +31,18 @@ const plTranslations = {
     ariaLabelNews: 'Link do Aktualności',
     ariaLabelJoinUs: 'Link do Dołącz Do Nas',
     ariaLabelContact: 'Link do Kontakt',
+    ariaLabelTeamName: 'Nazwa koła naukowego',
+    ariaLabelUniName: 'Nazwa uniwersytetu',
+    ariaLabeluniTown: 'Nazwa miasta',
+    ariaLabelboard: 'Kontakt do zarządu',
+    ariaLabelAddress: 'Adres uniwersytetu',
+    ariaLabelSupervisor: 'Dane kontaktowe do opiekuna koła',
+    ariaLabelfindUs: 'Informacja gdzie nas znaleźć w mediach społecznych',
+    ariaLabelGitHub: 'Link do naszego Githuba',
+    ariaLabelFacebook: 'Link do naszego Facebooka',
+    ariaLabelFooter: 'Stopka',
+    ariaLabelScienceClub: 'Koło Naukowe',
+    ariaLabelAddressWrapper: 'Detale adresowe',
   },
 };