fix(browser-extension): dialog structure and styles

packages/browser-extension/src/scripts/dialog.js

@@ -12,6 +12,196 @@ const reasons = [
   'Popup showed up',
 ];
 
+/**
+ * @description Report dialog ID
+ */
+
+const reportDialogId = 'report-dialog';
+
+/**
+ * @description Report dialog outer HTML
+ */
+
+const reportDialogHtml = `
+  <dialog id="${reportDialogId}" tabindex="0">
+    <report-dialog-header>
+      <span>Cookie Dialog Monster</span>
+      <report-dialog-close-button role="button" tabindex="0">
+        <svg 
+          viewBox="0 0 24 24" 
+          width="20" 
+          height="20" 
+          stroke="currentColor" 
+          stroke-width="2" 
+          fill="none" 
+          stroke-linecap="round" 
+          stroke-linejoin="round"
+        >
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      </report-dialog-close-button>
+    </report-dialog-header>
+    <report-dialog-body>
+      <report-dialog-form-view>
+        <report-dialog-body-text>
+          ${chrome.i18n.getMessage('reportDialog_bodyText')}
+        </report-dialog-body-text>
+        <report-dialog-form>
+          <report-dialog-radio-group>
+            <report-dialog-radio 
+              aria-checked="false" 
+              data-value="0" role="radio" 
+              tabindex="0">
+              ${chrome.i18n.getMessage('reportDialog_cannotClickOption')}
+            </report-dialog-radio>
+            <report-dialog-radio 
+              aria-checked="false" 
+              data-value="1" 
+              role="radio" 
+              tabindex="0">
+              ${chrome.i18n.getMessage('reportDialog_pageVisualGlitchOption')}
+            </report-dialog-radio>
+            <report-dialog-radio 
+              aria-checked="false" 
+              data-value="2" 
+              role="radio" 
+              tabindex="0">
+              ${chrome.i18n.getMessage('reportDialog_blankPageOption')}
+            </report-dialog-radio>
+            <report-dialog-radio 
+              aria-checked="false" 
+              data-value="3" 
+              role="radio" 
+              tabindex="0">
+              ${chrome.i18n.getMessage('reportDialog_laggyPageOption')}
+            </report-dialog-radio>
+            <report-dialog-radio 
+              aria-checked="false" 
+              data-value="4" 
+              role="radio" 
+              tabindex="0">
+              ${chrome.i18n.getMessage('reportDialog_pageNotRespondingOption')}
+            </report-dialog-radio>
+            <report-dialog-radio 
+              aria-checked="false" 
+              data-value="5" 
+              role="radio" 
+              tabindex="0">
+              ${chrome.i18n.getMessage('reportDialog_popupShowUpOption')}
+            </report-dialog-radio>
+          </report-dialog-radio-group>
+          <report-dialog-submit-button aria-disabled="true" role="button" tabindex="0">
+            ${chrome.i18n.getMessage('contextMenu_reportOption')?.replace('...', '')}
+          </report-dialog-submit-button>
+        </report-dialog-form>
+      </report-dialog-form-view>
+      <report-dialog-submit-view hidden>
+        <svg 
+          viewBox="0 0 24 24" 
+          width="48" 
+          height="48" 
+          stroke="var(--cookie-dialog-monster-color-success)" 
+          stroke-width="2" 
+          fill="none" 
+          stroke-linecap="round" 
+          stroke-linejoin="round"
+        >
+          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+          <polyline points="22 4 12 14.01 9 11.01" />
+        </svg>
+        <report-dialog-submit-text>
+          ${chrome.i18n.getMessage('reportDialog_submitText')}
+        </report-dialog-submit-text>
+        <report-dialog-submit-extra-text>
+          ${chrome.i18n.getMessage('reportDialog_submitExtraText')}
+        </report-dialog-submit-extra-text>
+      </report-dialog-submit-view>
+    </report-dialog-body>
+  </dialog>
+`;
+
+/**
+ * @description Dialog close button click handler
+ * @param {MouseEvent} event
+ */
+
+const closeButtonClickHandler = (event) => {
+  const dialog = document.getElementById(reportDialogId);
+
+  event.preventDefault();
+  dialog?.remove();
+};
+
+/**
+ * @description Hides report dialog
+ */
+
+const hideReportDialog = () => {
+  document.getElementById(reportDialogId)?.remove();
+};
+
+/**
+ * @description Dialog radio input click handler
+ * @param {MouseEvent} event
+ */
+
+const radioClickHandler = (event) => {
+  const dialog = document.getElementById(reportDialogId);
+  const radios = dialog.getElementsByTagName('report-dialog-radio');
+  const submitButton = dialog?.getElementsByTagName('report-dialog-submit-button')[0];
+
+  for (const radio of radios) {
+    radio.setAttribute('aria-checked', 'false');
+  }
+
+  event.preventDefault();
+  event.currentTarget.setAttribute('aria-checked', 'true');
+  submitButton.setAttribute('aria-disabled', 'false');
+  submitButton.addEventListener('click', submitButtonClickHandler);
+};
+
+/**
+ * @description Shows report dialog
+ */
+
+const showReportDialog = () => {
+  const parser = new DOMParser();
+  const result = parser.parseFromString(reportDialogHtml, 'text/html');
+  const dialog = result.body.firstElementChild;
+  const closeButton = dialog.getElementsByTagName('report-dialog-close-button')[0];
+  const radios = dialog.getElementsByTagName('report-dialog-radio');
+
+  closeButton.addEventListener('click', closeButtonClickHandler);
+
+  for (const radio of radios) {
+    radio.addEventListener('click', radioClickHandler);
+  }
+
+  document.body.appendChild(dialog);
+  dialog.showModal();
+};
+
+/**
+ * @description Dialog submit button click handler
+ * @param {MouseEvent} event
+ */
+
+const submitButtonClickHandler = (event) => {
+  const dialog = document.getElementById(reportDialogId);
+  const formView = dialog?.getElementsByTagName('report-dialog-form-view')[0];
+  const option = dialog?.querySelector('report-dialog-radio[aria-checked="true"]');
+  const reasonIndex = option?.dataset.value;
+  const reason = Number.isNaN(reasonIndex) ? 'Unknown' : reasons[reasonIndex];
+  const submitView = dialog?.getElementsByTagName('report-dialog-submit-view')[0];
+  const userAgent = window.navigator.userAgent;
+
+  event.preventDefault();
+  dispatch({ userAgent, reason, type: 'REPORT' });
+  formView?.setAttribute('hidden', 'true');
+  submitView?.removeAttribute('hidden');
+};
+
 /**
  * @description Listens to messages
  */
@@ -28,150 +218,3 @@ chrome.runtime.onMessage.addListener((message) => {
       break;
   }
 });
-
-/**
- * @description Report dialog ID
- */
-
-const REPORT_DIALOG_ID = 'report-dialog';
-
-/**
- * @description Report dialog outer HTML
- */
-
-const REPORT_DIALOG_HTML = `
-  <dialog class="report-dialog" id="${REPORT_DIALOG_ID}">
-    <div class="report-dialog-header">
-      <span>Cookie Dialog Monster</span>
-      <button class="report-dialog-close-button">
-        <svg 
-          viewBox="0 0 24 24" 
-          width="20" 
-          height="20" 
-          stroke="currentColor" 
-          stroke-width="2" 
-          fill="none" 
-          stroke-linecap="round" 
-          stroke-linejoin="round"
-        >
-          <line x1="18" y1="6" x2="6" y2="18" />
-          <line x1="6" y1="6" x2="18" y2="18" />
-        </svg>
-      </button>
-    </div>
-    <div class="report-dialog-body">
-      <div data-view="form">
-        <p class="report-dialog-body-text">
-          ${chrome.i18n.getMessage('reportDialog_bodyText')}
-        </p>
-        <form id="report-dialog-form">
-          <label>
-            <input name="report-dialog-option" type="radio" value="0" />
-            ${chrome.i18n.getMessage('reportDialog_cannotClick')}
-          </label>  
-          <label>
-            <input name="report-dialog-option" type="radio" value="1" />
-            ${chrome.i18n.getMessage('reportDialog_pageVisualGlitchOption')}
-          </label>
-          <label>
-            <input name="report-dialog-option" type="radio" value="2" />
-            ${chrome.i18n.getMessage('reportDialog_blankPageOption')}
-          </label>
-          <label>
-            <input name="report-dialog-option" type="radio" value="3" />
-            ${chrome.i18n.getMessage('reportDialog_laggyPageOption')}
-          </label>
-          <label>
-            <input name="report-dialog-option" type="radio" value="4" />
-            ${chrome.i18n.getMessage('reportDialog_pageNotRespondingOption')}
-          </label>
-          <label>
-            <input name="report-dialog-option" type="radio" value="5" />
-            ${chrome.i18n.getMessage('reportDialog_popupShowUpOption')}
-          </label>
-          <button class="report-dialog-submit-button" disabled type="submit">
-            ${chrome.i18n.getMessage('contextMenu_reportOption')?.replace('...', '')}
-          </button>
-        </form>
-      </div>
-      <div class="report-dialog-submit-view" data-view="submit" hidden>
-        <svg 
-          viewBox="0 0 24 24" 
-          width="48" 
-          height="48" 
-          stroke="var(--cookie-dialog-monster-color-success)" 
-          stroke-width="2" 
-          fill="none" 
-          stroke-linecap="round" 
-          stroke-linejoin="round"
-        >
-          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
-          <polyline points="22 4 12 14.01 9 11.01" />
-        </svg>
-        <p class="report-dialog-submit-text">
-          ${chrome.i18n.getMessage('reportDialog_submitText')}
-        </p>
-        <p class="report-dialog-submit-extra-text">
-          ${chrome.i18n.getMessage('reportDialog_submitExtraText')}
-        </p>
-      </div>
-    </div>
-  </dialog>
-`;
-
-/**
- * @description Hides report dialog
- */
-
-const hideReportDialog = () => {
-  document.getElementById(REPORT_DIALOG_ID)?.close();
-};
-
-/**
- * @description Shows report dialog
- */
-
-const showReportDialog = () => {
-  const element = document.getElementById(REPORT_DIALOG_ID);
-
-  if (element) {
-    element.showModal();
-  } else {
-    const parser = new DOMParser();
-    const result = parser.parseFromString(REPORT_DIALOG_HTML, 'text/html');
-    const dialog = result.body.firstElementChild;
-    const closeButton = dialog.getElementsByClassName('report-dialog-close-button')[0];
-    const form = dialog.querySelector('#report-dialog-form');
-    const formView = dialog.querySelector('[data-view="form"]');
-    const labels = dialog.getElementsByTagName('label');
-    const submitButton = dialog.getElementsByClassName('report-dialog-submit-button')[0];
-    const submitView = dialog.querySelector('[data-view="submit"]');
-
-    closeButton.addEventListener('click', () => {
-      dialog.close();
-      formView.removeAttribute('hidden');
-      submitView.setAttribute('hidden', 'true');
-    });
-
-    form.addEventListener('submit', (event) => {
-      const formData = new FormData(form);
-      const reasonIndex = Number(formData.get('report-dialog-option'));
-      const reason = Number.isNaN(reasonIndex) ? 'Unknown' : reasons[reasonIndex];
-      const userAgent = window.navigator.userAgent;
-
-      event.preventDefault();
-      dispatch({ userAgent, reason, type: 'REPORT' });
-      formView.setAttribute('hidden', 'true');
-      submitView.removeAttribute('hidden');
-    });
-
-    for (const label of labels) {
-      label.addEventListener('click', () => {
-        submitButton.removeAttribute('disabled');
-      });
-    }
-
-    document.body.appendChild(dialog);
-    dialog.showModal();
-  }
-};

packages/browser-extension/src/styles/dialog.css

@@ -6,130 +6,192 @@
   --cookie-dialog-monster-color-white: #ffffff;
 }
 
-.report-dialog {
+#report-dialog {
-  background-color: var(--cookie-dialog-monster-color-white) !important;
+  background-color: var(--cookie-dialog-monster-color-white);
-  border: none !important;
+  border: none;
-  border-radius: 4px !important;
+  border-radius: 4px;
-  box-sizing: border-box !important;
+  box-sizing: border-box;
-  color: var(--cookie-dialog-monster-color-secondary) !important;
+  color: var(--cookie-dialog-monster-color-secondary);
-  font-family: 'Lato', Arial, Helvetica, sans-serif !important;
+  font-family: 'Lato', Arial, Helvetica, sans-serif;
-  font-size: 14px !important;
+  font-size: 100%;
-  font-weight: normal !important;
   margin: auto !important;
-  height: 380px !important;
   padding: 0px !important;
-  width: 320px !important;
+  width: 320px;
 }
 
-.report-dialog::backdrop {
+#report-dialog::backdrop {
-  background-color: rgba(0, 0, 0, 0.75) !important;
+  background-color: rgba(0, 0, 0, 0.5);
 }
 
-.report-dialog * {
+#report-dialog * {
-  box-sizing: border-box !important;
+  box-sizing: border-box;
 }
 
-.report-dialog [data-view][hidden] {
+report-dialog-body {
-  display: none !important;
+  display: block;
+  font-size: 14px;
+  line-height: 14px;
+  padding: 16px;
 }
 
-.report-dialog-body {
+report-dialog-body-text {
-  height: 326px !important;
+  display: block;
-  padding: 16px !important;
+  margin: 0px;
+  padding: 0px;
 }
 
-.report-dialog-body-text {
+report-dialog-close-button {
-  margin: 0px !important;
+  align-items: center;
-  padding: 0px !important;
+  background-color: transparent;
+  border: none;
+  border-radius: 4px;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  margin: 0px;
+  outline: none;
+  padding: 0px;
+  transition: 0.4s;
 }
 
-.report-dialog-close-button {
+report-dialog-close-button:focus,
-  align-items: center !important;
+report-dialog-close-button:hover {
-  background-color: transparent !important;
+  background-color: var(--cookie-dialog-monster-color-white);
-  border: none !important;
+  color: var(--cookie-dialog-monster-color-secondary);
-  border-radius: 4px !important;
-  color: inherit !important;
-  cursor: pointer !important;
-  display: inline-flex !important;
-  justify-content: center !important;
-  margin: 0px !important;
-  outline: none !important;
-  padding: 0px !important;
-  transition: 0.4s !important;
 }
 
-.report-dialog-close-button:focus,
+report-dialog-form-view[hidden] {
-.report-dialog-close-button:hover {
+  display: none;
-  background-color: var(--cookie-dialog-monster-color-white) !important;
-  color: var(--cookie-dialog-monster-color-secondary) !important;
 }
 
-#report-dialog-form > label {
+report-dialog-header {
-  color: var(--cookie-dialog-monster-color-tertiary) !important;
+  align-items: center;
-  cursor: pointer !important;
+  background-color: var(--cookie-dialog-monster-color-secondary);
-  display: block !important;
+  color: var(--cookie-dialog-monster-color-white);
-  margin-top: 16px !important;
+  display: flex;
-}
+  font-size: 16px;
-
-.report-dialog-header {
-  align-items: center !important;
-  background-color: var(--cookie-dialog-monster-color-secondary) !important;
-  color: var(--cookie-dialog-monster-color-white) !important;
-  display: flex !important;
-  font-size: 16px !important;
   height: 54px;
-  justify-content: space-between !important;
+  justify-content: space-between;
-  padding: 16px !important;
+  line-height: 16px;
+  padding: 16px;
 }
 
-.report-dialog-submit-button {
+report-dialog-radio {
-  background-color: var(--cookie-dialog-monster-color-secondary) !important;
+  color: var(--cookie-dialog-monster-color-tertiary);
-  border: 1px solid var(--cookie-dialog-monster-color-secondary) !important;
+  cursor: pointer;
-  border-radius: 4px !important;
+  display: block;
-  color: var(--cookie-dialog-monster-color-white) !important;
+  margin-top: 18px;
-  cursor: pointer !important;
+  outline: none;
-  display: block !important;
+  padding-left: 24px;
-  font-family: inherit !important;
+  position: relative;
-  font-size: inherit !important;
-  margin-top: 32px !important;
-  outline: none !important;
-  padding: 8px 16px !important;
-  text-align: center !important;
-  transition: 0.4s !important;
-  width: 100% !important;
 }
 
-.report-dialog-submit-button:focus,
+report-dialog-radio[aria-checked='true']:after {
-.report-dialog-submit-button:hover {
+  opacity: 1;
-  background-color: var(--cookie-dialog-monster-color-white) !important;
+  transform: scale(1, 1);
-  color: var(--cookie-dialog-monster-color-secondary) !important;
 }
 
-.report-dialog-submit-button:disabled {
+report-dialog-radio:after {
-  background-color: var(--cookie-dialog-monster-color-tertiary) !important;
+  background-color: var(--cookie-dialog-monster-color-primary);
-  border: 1px solid var(--cookie-dialog-monster-color-tertiary) !important;
+  border-radius: 50%;
-  color: var(--cookie-dialog-monster-color-white) !important;
+  box-sizing: border-box;
-  cursor: not-allowed !important;
+  content: '';
+  display: block;
+  height: 8px;
+  left: 3px;
+  opacity: 0;
+  position: absolute;
+  top: 3px;
+  transform: scale(0, 0);
+  transition: all 0.2s cubic-bezier(0.64, 0.57, 0.67, 1.53);
+  width: 8px;
 }
 
-.report-dialog-submit-extra-text {
+report-dialog-radio:focus:not([aria-checked='true']):after,
-  font-size: 14px !important;
+report-dialog-radio:hover:not([aria-checked='true']):after {
-  margin: 0px !important;
+  background: var(--cookie-dialog-monster-color-tertiary);
-  margin-top: 16px !important;
+  opacity: 1;
-  text-align: center !important;
+  transform: scale(1, 1);
 }
 
-.report-dialog-submit-text {
+report-dialog-radio:before {
-  font-size: 18px !important;
+  background: var(--cookie-dialog-monster-color-white);
-  margin: 0px !important;
+  border: 1px solid var(--cookie-dialog-monster-color-tertiary);
-  margin-top: 24px !important;
+  border-radius: 50%;
-  text-align: center !important;
+  box-sizing: border-box;
+  content: '';
+  display: block;
+  height: 14px;
+  left: 0px;
+  margin-right: 5px;
+  position: absolute;
+  top: 0px;
+  width: 14px;
 }
 
-.report-dialog-submit-view {
+report-dialog-radio-group {
-  align-items: center !important;
+  display: flex;
-  display: flex !important;
+  flex-direction: column;
-  flex-direction: column !important;
+}
-  height: 100% !important;
+
-  justify-content: center !important;
+report-dialog-submit-button {
+  align-items: center;
+  background-color: var(--cookie-dialog-monster-color-secondary);
+  border: 1px solid var(--cookie-dialog-monster-color-secondary);
+  border-radius: 4px;
+  color: var(--cookie-dialog-monster-color-white);
+  cursor: pointer;
+  display: flex;
+  font-family: inherit;
+  font-size: 14px;
+  height: 39px;
+  justify-content: center;
+  margin-top: 24px;
+  outline: none;
+  padding: 8px 16px;
+  text-align: center;
+  transition: 0.4s;
+  width: 100%;
+}
+
+report-dialog-submit-button:focus,
+report-dialog-submit-button:hover {
+  background-color: var(--cookie-dialog-monster-color-white);
+  color: var(--cookie-dialog-monster-color-secondary);
+}
+
+report-dialog-submit-button[aria-disabled='true'] {
+  background-color: var(--cookie-dialog-monster-color-tertiary);
+  border: 1px solid var(--cookie-dialog-monster-color-tertiary);
+  color: var(--cookie-dialog-monster-color-white);
+  cursor: not-allowed;
+}
+
+report-dialog-submit-extra-text {
+  font-size: 14px;
+  line-height: 14px;
+  margin: 0px;
+  margin-top: 16px;
+  text-align: center;
+}
+
+report-dialog-submit-text {
+  font-size: 18px;
+  line-height: 18px;
+  margin: 0px;
+  margin-top: 24px;
+  text-align: center;
+}
+
+report-dialog-submit-view {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 269px;
+}
+
+report-dialog-submit-view[hidden] {
+  display: none;
 }