Add visually hidden info ('opens in a new tab') to external links for screen readers

Author: SiniCode

public/locales/en/translation.json

@@ -79,7 +79,8 @@
     "code": "Code",
     "organisationCode": "Organisation code",
     "startDate": "Start date",
-    "endDate": "End date"
+    "endDate": "End date",
+    "opensInNewTab": ", opens in a new tab"
   },
   "validationErrors": {
     "required": "This field is required",

public/locales/fi/translation.json

@@ -79,7 +79,8 @@
     "code": "Koodi",
     "organisationCode": "Organisaatiokoodi",
     "startDate": "Aloituspvm",
-    "endDate": "Lopetuspvm"
+    "endDate": "Lopetuspvm",
+    "opensInNewTab": ", avautuu uudelle välilehdelle"
   },
   "validationErrors": {
     "required": "Tämä kenttä vaaditaan",

public/locales/sv/translation.json

@@ -74,7 +74,8 @@
     "descending": "fallande",
     "notEditable": "Inställningen kan inte ändras, då den har offentligjorts på en högre nivå.",
     "feedbacksGivenRatio": "Givna återkopplingar / Antal anmälda studenter",
-    "additional": "Ytterligare"
+    "additional": "Ytterligare",
+    "opensInNewTab": ", öppnas i en ny flik"
   },
   "validationErrors": {
     "required": "Fältet krävs",

src/client/components/common/ExternalLink.jsx

@@ -1,6 +1,8 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { Link } from '@mui/material'
 import ExternalLinkIcon from '@mui/icons-material/OpenInNew'
+import { visuallyHidden } from '@mui/utils'
 
 const styles = {
   icon: {
@@ -9,11 +11,16 @@ const styles = {
   },
 }
 
-const ExternalLink = ({ children, ...props }) => (
-  <Link target="_blank" rel="noopener" {...props} underline="always">
-    {children}
-    <ExternalLinkIcon sx={styles.icon} />
-  </Link>
-)
+const ExternalLink = ({ children, ...props }) => {
+  const { t } = useTranslation()
+
+  return (
+    <Link target="_blank" rel="noopener" {...props} underline="always">
+      {children}
+      <ExternalLinkIcon sx={styles.icon} aria-hidden="true" />
+      <span style={visuallyHidden}>{t('common:opensInNewTab')}</span>
+    </Link>
+  )
+}
 
 export default ExternalLink

src/client/components/common/LinkButton.jsx

@@ -1,12 +1,21 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import { Button, Link as MuiLink } from '@mui/material'
 import { OpenInNew } from '@mui/icons-material'
+import { visuallyHidden } from '@mui/utils'
 
 const LinkButton = ({ title, to, external = false, ...rest }) => {
+  const { t } = useTranslation()
   const buttonProps = {
     ...(external
-      ? { component: MuiLink, href: to, rel: 'noopener noreferrer', target: '_blank', endIcon: <OpenInNew /> }
+      ? {
+          component: MuiLink,
+          href: to,
+          rel: 'noopener noreferrer',
+          target: '_blank',
+          endIcon: <OpenInNew aria-hidden="true" />,
+        }
       : { component: Link, to }),
   }
 
@@ -18,6 +27,7 @@ const LinkButton = ({ title, to, external = false, ...rest }) => {
       sx={{ textDecoration: 'underline', '&:hover': { textDecoration: 'underline' } }}
     >
       {title}
+      {external && <span style={visuallyHidden}>{t('common:opensInNewTab')}</span>}
     </Button>
   )
 }