fix: Set width and height to 0 for visuallyHidden components to avoid double scroll bar

Author: SiniCode

src/client/components/NavBar/NavBar.jsx

@@ -289,7 +289,7 @@ const NavBar = ({ guest = false }) => {
       {LANGUAGES.map(l => (
         <MenuItem key={l} sx={i18n.language === l && styles.activeItem} onClick={() => changeLanguage(l)}>
           <span aria-hidden="true">{l.toUpperCase()}</span>
-          <span style={visuallyHidden}>{t(`common:languageMenu:${l}`)}</span>
+          <span style={{ ...visuallyHidden, width: '0px', height: '0px' }}>{t(`common:languageMenu:${l}`)}</span>
         </MenuItem>
       ))}
       {!guest && <Divider component="li" sx={styles.languageMenuDivider} />}

src/client/components/common/ExternalLink.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Link } from '@mui/material'
+import { Link, Box } from '@mui/material'
 import ExternalLinkIcon from '@mui/icons-material/OpenInNew'
 import { visuallyHidden } from '@mui/utils'
 
@@ -18,7 +18,9 @@ const ExternalLink = ({ children, ...props }) => {
     <Link target="_blank" rel="noopener" {...props} underline="always">
       {children}
       <ExternalLinkIcon sx={styles.icon} aria-hidden="true" />
-      <span style={visuallyHidden}>{t('common:opensInNewTab')}</span>
+      <Box component="span" sx={{ ...visuallyHidden, width: '0px', height: '0px' }}>
+        {t('common:opensInNewTab')}
+      </Box>
     </Link>
   )
 }

src/client/components/common/LinkButton.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
-import { Button, Link as MuiLink } from '@mui/material'
+import { Button, Link as MuiLink, Box } from '@mui/material'
 import { OpenInNew } from '@mui/icons-material'
 import { visuallyHidden } from '@mui/utils'
 
@@ -27,7 +27,11 @@ const LinkButton = ({ title, to, external = false, ...rest }) => {
       sx={{ textDecoration: 'underline', '&:hover': { textDecoration: 'underline' } }}
     >
       {title}
-      {external && <span style={visuallyHidden}>{t('common:opensInNewTab')}</span>}
+      {external && (
+        <Box component="span" sx={{ ...visuallyHidden, width: '0px', height: '0px' }}>
+          {t('common:opensInNewTab')}
+        </Box>
+      )}
     </Button>
   )
 }