fix(a11y): Adress PR comments

box · Apr 14, 2021 · ce9163c · ce9163c
1 parent 2762678
commit ce9163c
Showing 1 changed file with 6 additions and 10 deletions.
diff --git a/src/lib/PreviewUI.js b/src/lib/PreviewUI.js
@@ -48,9 +48,6 @@ class PreviewUI {
     /** @property {HTMLElement} - Preview container element which houses the sidebar and content */
     previewContainer;
 
-    /** @property {HTMLElement} - Preview container element which houses the custom-logo */
-    customLogoEl;
-
     /**
      * Destroy preview container content.
      *
@@ -115,10 +112,6 @@ class PreviewUI {
         this.container = this.container.querySelector(SELECTOR_BOX_PREVIEW_CONTAINER);
         this.previewContainer = this.container.querySelector(SELECTOR_BOX_PREVIEW);
         this.contentContainer = this.container.querySelector(SELECTOR_BOX_PREVIEW_CONTENT);
-        this.customLogoEl = this.container.querySelector(SELECTOR_BOX_PREVIEW_LOGO_CUSTOM);
-
-        // Set alternative accesible text
-        this.customLogoEl.setAttribute('alt', __('logo'));
 
         // Setup the header, buttons, and theme
         if (options.header !== 'none') {
@@ -376,11 +369,14 @@ class PreviewUI {
      */
     setupHeader(headerTheme, logoUrl) {
         const headerContainerEl = this.container.querySelector(SELECTOR_BOX_PREVIEW_HEADER_CONTAINER);
-        headerContainerEl.classList.remove(CLASS_HIDDEN);
-
+        const customLogoEl = this.container.querySelector(SELECTOR_BOX_PREVIEW_LOGO_CUSTOM);
         const headerEl = headerContainerEl.firstElementChild;
+        const defaultLogoEl = headerEl.querySelector(SELECTOR_BOX_PREVIEW_LOGO_DEFAULT);
+
+        headerContainerEl.classList.remove(CLASS_HIDDEN);
         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') {
@@ -389,8 +385,8 @@ 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'));
 
             this.customLogoEl.src = logoUrl;
             this.customLogoEl.classList.remove(CLASS_HIDDEN);