fix(a11y): Add meaningful alt text to custom logo (#1352)

* fix(custom_logo): Adds missing alt attribute to custom-logo element * fix(custom_logo): Internationalize alternative image text * fix(a11y): Adress PR comments * fix(a11y): Adress PR comments
box · Apr 15, 2021 · 4e11fbe · 4e11fbe
1 parent a80ab58
commit 4e11fbe
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/i18n/en-US.properties b/src/i18n/en-US.properties
@@ -34,6 +34,8 @@ print_loading=Preparing to print...
 print_ready=Ready to print.
 # Accessible text for right navigation arrow that navigates user to previous file in collection
 previous_file=Previous file
+# Alternative text for logo-image
+logo=Logo
 # Accessible text for right navigation arrow that navigates user to next file in collection
 next_file=Next file
 # Text shown while preview is loading

diff --git a/src/lib/PreviewUI.js b/src/lib/PreviewUI.js
@@ -372,8 +372,12 @@ class PreviewUI {
         headerContainerEl.classList.remove(CLASS_HIDDEN);
 
         const headerEl = headerContainerEl.firstElementChild;
+        const defaultLogoEl = headerEl.querySelector(SELECTOR_BOX_PREVIEW_LOGO_DEFAULT);
+        const customLogoEl = headerEl.querySelector(SELECTOR_BOX_PREVIEW_LOGO_CUSTOM);
+
         headerEl.className = `${CLASS_BOX_PREVIEW_HEADER} ${CLASS_BOX_PREVIEW_BASE_HEADER}`;
         this.previewContainer.classList.add(CLASS_BOX_PREVIEW_HAS_HEADER);
+        defaultLogoEl.setAttribute('aria-label', __('logo'));
 
         // Setup theme, default is 'light'
         if (headerTheme === 'dark') {
@@ -382,10 +386,9 @@ class PreviewUI {
 
         // Set custom logo
         if (logoUrl) {
-            const defaultLogoEl = headerEl.querySelector(SELECTOR_BOX_PREVIEW_LOGO_DEFAULT);
             defaultLogoEl.classList.add(CLASS_HIDDEN);
+            customLogoEl.setAttribute('alt', __('logo'));
 
-            const customLogoEl = headerEl.querySelector(SELECTOR_BOX_PREVIEW_LOGO_CUSTOM);
             customLogoEl.src = logoUrl;
             customLogoEl.classList.remove(CLASS_HIDDEN);
         }