From 051e46f54a55aec5a6cde3b296859472bb362e6a Mon Sep 17 00:00:00 2001
From: Mike van Veenhuijzen <mike@videodock.com>
Date: Fri, 5 Apr 2024 16:31:42 +0200
Subject: [PATCH] fix(a11y): sitename in logo alt

---
 packages/ui-react/src/components/Header/Header.tsx | 4 +++-
 packages/ui-react/src/components/Logo/Logo.tsx     | 5 +++--
 packages/ui-react/src/containers/Layout/Layout.tsx | 1 +
 platforms/web/public/locales/en/menu.json          | 1 +
 platforms/web/public/locales/es/menu.json          | 1 +
 5 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/ui-react/src/components/Header/Header.tsx b/packages/ui-react/src/components/Header/Header.tsx
index c3f592f56..6dc5d636f 100644
--- a/packages/ui-react/src/components/Header/Header.tsx
+++ b/packages/ui-react/src/components/Header/Header.tsx
@@ -51,6 +51,7 @@ type Props = {
   currentLanguage: LanguageDefinition | undefined;
   onLanguageClick: (code: string) => void;
   favoritesEnabled?: boolean;
+  siteName?: string;
 
   profilesData?: {
     currentProfile: Profile | null;
@@ -87,6 +88,7 @@ const Header: React.FC<Props> = ({
   currentLanguage,
   onLanguageClick,
   favoritesEnabled,
+  siteName,
   profilesData: { currentProfile, profiles, profilesEnabled, selectProfile, isSelectingProfile } = {},
 }) => {
   const { t } = useTranslation('menu');
@@ -215,7 +217,7 @@ const Header: React.FC<Props> = ({
         </div>
         {logoSrc && (
           <div className={styles.brand}>
-            <Logo src={logoSrc} onLoad={() => setLogoLoaded(true)} />
+            <Logo alt={t('logo_alt', { siteName })} src={logoSrc} onLoad={() => setLogoLoaded(true)} />
           </div>
         )}
         <nav className={styles.nav}>{logoLoaded || !logoSrc ? children : null}</nav>
diff --git a/packages/ui-react/src/components/Logo/Logo.tsx b/packages/ui-react/src/components/Logo/Logo.tsx
index a6eef375c..77b88bdb9 100644
--- a/packages/ui-react/src/components/Logo/Logo.tsx
+++ b/packages/ui-react/src/components/Logo/Logo.tsx
@@ -5,6 +5,7 @@ import styles from './Logo.module.scss';
 
 type Props = {
   src: string;
+  alt?: string;
   onLoad: () => void;
 };
 
@@ -13,7 +14,7 @@ type ImgRef = {
   width?: number;
 };
 
-const Logo: React.FC<Props> = ({ src, onLoad }: Props) => {
+const Logo: React.FC<Props> = ({ src, alt = 'logo', onLoad }: Props) => {
   const [imgDimensions, updateImgDimensions] = useState<ImgRef>({ height: undefined, width: undefined });
 
   const onLoadHandler = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
@@ -24,7 +25,7 @@ const Logo: React.FC<Props> = ({ src, onLoad }: Props) => {
 
   return (
     <Link to="/">
-      <img className={styles.logo} alt="logo" src={src} height={imgDimensions.height} width={imgDimensions.width} onLoad={onLoadHandler} onError={onLoad} />
+      <img className={styles.logo} alt={alt} src={src} height={imgDimensions.height} width={imgDimensions.width} onLoad={onLoadHandler} onError={onLoad} />
     </Link>
   );
 };
diff --git a/packages/ui-react/src/containers/Layout/Layout.tsx b/packages/ui-react/src/containers/Layout/Layout.tsx
index 845f79cc3..d81f8fd21 100644
--- a/packages/ui-react/src/containers/Layout/Layout.tsx
+++ b/packages/ui-react/src/containers/Layout/Layout.tsx
@@ -189,6 +189,7 @@ const Layout = () => {
           canLogin={canLogin}
           showPaymentsMenuItem={accessModel !== ACCESS_MODEL.AVOD}
           favoritesEnabled={favoritesEnabled}
+          siteName={siteName}
           profilesData={{
             currentProfile: profile,
             profiles,
diff --git a/platforms/web/public/locales/en/menu.json b/platforms/web/public/locales/en/menu.json
index c6713a53e..8ae298bee 100644
--- a/platforms/web/public/locales/en/menu.json
+++ b/platforms/web/public/locales/en/menu.json
@@ -1,6 +1,7 @@
 {
   "close_menu": "Close menu",
   "language_menu": "Open language menu",
+  "logo_alt": "Homepage of {{siteName}}",
   "open_menu": "Open menu",
   "open_user_menu": "Open user menu",
   "profile_icon": "Profile icon",
diff --git a/platforms/web/public/locales/es/menu.json b/platforms/web/public/locales/es/menu.json
index 28fb0e7b9..9df1f6161 100644
--- a/platforms/web/public/locales/es/menu.json
+++ b/platforms/web/public/locales/es/menu.json
@@ -1,6 +1,7 @@
 {
   "close_menu": "Cerrar menú",
   "language_menu": "Abrir el menú de idiomas",
+  "logo_alt": "Página de inicio de {{siteName}}",
   "open_menu": "Abrir menú",
   "open_user_menu": "Abrir menú de usuario",
   "profile_icon": "Icono de perfil",