Add descriptive aria-label / alt text to linked images

Author: SiniCode

public/locales/en/translation.json

@@ -342,6 +342,7 @@
     "addGroupingQuestion": "Add grouping question"
   },
   "navBar": {
+    "norppa": "To Norppa homepage",
     "myFeedbacks": "My feedback",
     "browseCourses": "Browse courses",
     "myCourses": "My surveys",
@@ -531,7 +532,8 @@
     "accessibilityDocument": "Accessibility document",
     "lastUpdate": "Latest release {{duration}} ago",
     "server": "Server version {{version}}",
-    "client": "Client version {{version}}"
+    "client": "Client version {{version}}",
+    "toska": "Read about the developers of Norppa."
   },
   "courseRealisationFeedback": {
     "noFeedbackTarget": "This course does not have a feedback available to you"

public/locales/fi/translation.json

@@ -341,6 +341,7 @@
     "addGroupingQuestion": "Lisää ryhmittelykysymys"
   },
   "navBar": {
+    "norppa": "Norpan kotisivulle",
     "myFeedbacks": "Kurssipalautteeni",
     "browseCourses": "Selaa kursseja",
     "myCourses": "Kyselyni",
@@ -531,7 +532,8 @@
     "accessibilityDocument": "Saavutettavuusseloste",
     "lastUpdate": "Viimeisin julkaisu {{duration}} sitten",
     "server": "Palvelinversio {{version}}",
-    "client": "Selainversio {{version}}"
+    "client": "Selainversio {{version}}",
+    "toska": "Lue Norpan kehittäjistä."
   },
   "courseRealisationFeedback": {
     "noFeedbackTarget": "Tällä kurssilla ei ole sinulle saatavilla olevaa palautetta"

public/locales/sv/translation.json

@@ -324,6 +324,7 @@
     "addGroupingQuestion": "Lägg till grupperingsfråga"
   },
   "navBar": {
+    "norppa": "Till Norppas hemsida",
     "myFeedbacks": "Mina responser",
     "browseCourses": "Bläddra kurser",
     "myCourses": "Mina enkäter",
@@ -507,7 +508,8 @@
     "accessibilityDocument": "Tillgänglighetsutlåtande",
     "lastUpdate": "Senaste versionen {{duration}} sedan",
     "server": "Serverversion {{version}}",
-    "client": "Klientversion {{version}}"
+    "client": "Klientversion {{version}}",
+    "toska": "Läs om Norppas utvecklare."
   },
   "courseRealisationFeedback": {
     "noFeedbackTarget": "Det finns ingen respons tillgänglig för dig på denna kurs"

src/client/components/Footer-default.jsx

@@ -69,7 +69,7 @@ const Footer = ({ user }) => {
           </div>
           <Box display="flex" flexDirection="column" alignItems="center" rowGap="1rem">
             <Link href={t('links:toska')} target="_blank" rel="noopener" underline="always">
-              <img src={images.toska_color} loading="lazy" style={styles.logo} alt="Toska" />
+              <img src={images.toska_color} loading="lazy" style={styles.logo} alt={t('footer:toska')} />
             </Link>
             <Typography component="p" variant="subtitle1" fontSize={10}>
               {t('footer:lastUpdate', { duration: uptime })}

src/client/components/NavBar/Logo.jsx

@@ -1,11 +1,13 @@
 import React from 'react'
 /** @jsxImportSource @emotion/react */
 
-import merge from 'lodash/merge'
-import { Box } from '@mui/material'
+import { useTranslation } from 'react-i18next'
 
+import merge from 'lodash/merge'
 import { Link } from 'react-router-dom'
 
+import Box from '@mui/material/Box'
+
 import hyLogo from '../../assets/hy_logo.svg'
 
 import { useUiConfig } from '../CustomUiConfigProvider'
@@ -43,16 +45,17 @@ const styles = {
 }
 
 const Logo = ({ guest = false }) => {
+  const { t } = useTranslation()
   const customUiConfig = useUiConfig()
   const customStyles = customUiConfig?.styles?.logo ?? {}
   const logoStyles = merge(styles, customStyles)
   const customLogo = customUiConfig?.images?.logo
 
   return (
-    <Link to={guest ? '/noad' : '/'} style={{ textDecoration: 'none' }}>
+    <Link to={guest ? '/noad' : '/'} style={{ textDecoration: 'none' }} aria-label={t('navBar:norppa')}>
       <Box sx={logoStyles.link}>
-        <img src={customLogo || hyLogo} alt="HY" style={logoStyles.image} />
-        <Box css={logoStyles.text}>Norppa</Box>
+        <img src={customLogo || hyLogo} alt="" aria-hidden="true" style={logoStyles.image} />
+        <span style={logoStyles.text}>Norppa</span>
       </Box>
     </Link>
   )

src/client/pages/GuestUser/GuestFooter.jsx

@@ -39,7 +39,7 @@ const GuestFooter = () => {
           </div>
 
           <Link href={t('links:toska')} target="_blank" rel="noopener" underline="hover">
-            <img src={images.toska_color} style={styles.logo} alt="Toska" />
+            <img src={images.toska_color} style={styles.logo} alt={t('footer:toska')} />
           </Link>
         </Box>
       </Container>