fix(a11y): sitename in logo alt

jwplayer · Apr 11, 2024 · 051e46f · 051e46f
1 parent 2a5e2fe
commit 051e46f
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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",