update aria attributes + elements should be in getter

Author: billyvg

packages/feedback/src/types/index.ts

@@ -254,7 +254,7 @@ export interface FeedbackThemes {
 }
 
 export interface FeedbackComponent<T extends HTMLElement> {
-  el: T;
+  el: T | null;
 }
 
 /**

packages/feedback/src/widget/Actor.ts

@@ -30,8 +30,8 @@ export function Actor({ buttonLabel, onClick }: ActorProps): ActorComponent {
     {
       type: 'button',
       className: 'widget__actor',
-      ariaLabel: buttonLabel,
-      ariaHidden: 'false',
+      ['aria-label']: buttonLabel,
+      ['aria-hidden']: 'false',
     },
     Icon().el,
     createElement(
@@ -46,14 +46,14 @@ export function Actor({ buttonLabel, onClick }: ActorProps): ActorComponent {
   el.addEventListener('click', _handleClick);
 
   return {
-    el,
+    get el() { return el },
     show: (): void => {
       el.classList.remove('widget__actor--hidden');
-      el.setAttribute('ariaHidden', 'false');
+      el.setAttribute('aria-hidden', 'false');
     },
     hide: (): void => {
       el.classList.add('widget__actor--hidden');
-      el.setAttribute('ariaHidden', 'true');
+      el.setAttribute('aria-hidden', 'true');
     },
   };
 }

packages/feedback/src/widget/Dialog.ts

@@ -128,7 +128,7 @@ export function Dialog({
   );
 
   return {
-    el,
+    get el() { return el; },
     showError,
     hideError,
     open,

packages/feedback/src/widget/Form.ts

@@ -95,25 +95,25 @@ export function Form({
 
   const errorEl = createElement('div', {
     className: 'form__error-container form__error-container--hidden',
-    ariaHidden: 'true',
+    ['aria-hidden']: 'true',
   });
 
   function showError(message: string): void {
     errorEl.textContent = message;
     errorEl.classList.remove('form__error-container--hidden');
-    errorEl.setAttribute('ariaHidden', 'false');
+    errorEl.setAttribute('aria-hidden', 'false');
   }
 
   function hideError(): void {
     errorEl.textContent = '';
     errorEl.classList.add('form__error-container--hidden');
-    errorEl.setAttribute('ariaHidden', 'true');
+    errorEl.setAttribute('aria-hidden', 'true');
   }
 
   const nameEl = createElement('input', {
     id: 'name',
     type: showName ? 'text' : 'hidden',
-    ariaHidden: showName ? 'false' : 'true',
+    ['aria-hidden']: showName ? 'false' : 'true',
     name: 'name',
     className: 'form__input',
     placeholder: namePlaceholder,
@@ -123,7 +123,7 @@ export function Form({
   const emailEl = createElement('input', {
     id: 'email',
     type: showEmail ? 'text' : 'hidden',
-    ariaHidden: showEmail ? 'false' : 'true',
+    ['aria-hidden']: showEmail ? 'false' : 'true',
     name: 'email',
     className: 'form__input',
     placeholder: emailPlaceholder,
@@ -145,6 +145,7 @@ export function Form({
     {
       type: 'button',
       className: 'btn btn--default',
+      ['aria-label']: cancelButtonLabel,
       onClick: (e: Event) => {
         onCancel && onCancel(e);
       },

packages/feedback/src/widget/Icon.ts

@@ -51,6 +51,6 @@ export function Icon(): IconReturn {
   svg.appendChild(speakerDefs).appendChild(speakerClipPathDef).appendChild(speakerRect);
 
   return {
-    el: svg,
+    get el() {return svg},
   };
 }

packages/feedback/src/widget/SuccessIcon.ts

@@ -57,6 +57,6 @@ export function SuccessIcon(): IconReturn {
   svg.appendChild(speakerDefs).appendChild(speakerClipPathDef).appendChild(speakerRect);
 
   return {
-    el: svg,
+    get el() {return svg},
   };
 }

packages/feedback/src/widget/createWidget.ts

@@ -42,6 +42,10 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
         },
       });
 
+      if (!success.el) {
+        throw new Error('Unable to show success message')
+      }
+
       shadow.appendChild(success.el);
 
       const timeoutId = setTimeout(() => {
@@ -108,7 +112,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
    * Removes the default actor element
    */
   function removeActor(): void {
-    actor && actor.el.remove();
+    actor && actor.el && actor.el.remove();
   }
 
   /**
@@ -155,6 +159,10 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
         onSubmit: _handleFeedbackSubmit,
       });
 
+      if (!dialog.el) {
+        throw new Error('Unable to open Feedback dialog');
+      }
+
       shadow.appendChild(dialog.el);
 
       // Hides the default actor whenever dialog is opened
@@ -189,7 +197,8 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
   function removeDialog(): void {
     if (dialog) {
       hideDialog();
-      dialog.el.remove();
+      const dialogEl = dialog.el;
+      dialogEl && dialogEl.remove();
       dialog = undefined;
     }
   }
@@ -213,7 +222,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
 
   if (!attachTo) {
     actor = Actor({ buttonLabel: options.buttonLabel, onClick: handleActorClick });
-    shadow.appendChild(actor.el);
+    actor.el && shadow.appendChild(actor.el);
   } else {
     attachTo.addEventListener('click', handleActorClick);
   }