From 3f772cc2abf6148801bd718b310e84f798b553c7 Mon Sep 17 00:00:00 2001
From: wanhose <hello@wanhose.dev>
Date: Thu, 12 Sep 2024 20:00:32 +0200
Subject: [PATCH] fix(browser-extension): issue #924

---
 .../browser-extension/src/scripts/dialog.js   | 31 ++++++-------------
 .../browser-extension/src/styles/dialog.css   |  3 +-
 2 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/packages/browser-extension/src/scripts/dialog.js b/packages/browser-extension/src/scripts/dialog.js
index 64db741..ff914c2 100644
--- a/packages/browser-extension/src/scripts/dialog.js
+++ b/packages/browser-extension/src/scripts/dialog.js
@@ -40,16 +40,12 @@ const reportDialogHtml = `
               ${browser.i18n.getMessage('reportDialog_urlInputLabel')}
               <span class="report-dialog-input-label-required">*</span>
             </div>
-            <div
+            <input
               aria-labelledby="report-dialog-label-url"
-              aria-multiline="false"
               aria-required="true"
               class="report-dialog-input"
-              contenteditable="true"
               id="report-dialog-input-url"
-              role="textbox"
-              tabindex="0"
-            ></div>
+            />
             <div class="report-dialog-input-error" id="report-dialog-input-url-error">
               ${browser.i18n.getMessage('reportDialog_urlInputError')}
             </div>
@@ -59,19 +55,13 @@ const reportDialogHtml = `
               ${browser.i18n.getMessage('reportDialog_reasonInputLabel')}
               <span class="report-dialog-input-label-required">*</span>
             </div>
-            <div
+            <textarea
               aria-labelledby="report-dialog-label-reason"
-              aria-multiline="true"
-              aria-placeholder="${browser.i18n.getMessage('reportDialog_reasonInputLabel')}"
               aria-required="true"
               class="report-dialog-input"
-              contenteditable="true"
               id="report-dialog-input-reason"
-              role="textbox"
-              tabindex="0"
-            >
-              ${browser.i18n.getMessage('reportDialog_reasonInputPlaceholder')}
-            </div>
+              rows="4"
+            >${browser.i18n.getMessage('reportDialog_reasonInputPlaceholder')}</textarea>
             <div class="report-dialog-input-error" id="report-dialog-input-reason-error">
               ${browser.i18n.getMessage('reportDialog_reasonInputError')}
             </div>
@@ -152,8 +142,8 @@ function inputKeyDownHandler(event) {
  */
 function inputPasteHandler(event) {
   event.preventDefault();
-  const text = event.clipboardData?.getData('text').replace(/\r?\n|\r/g, ' ');
 
+  const text = event.clipboardData?.getData('text').replace(/\r?\n|\r/g, ' ');
   const selection = window.getSelection();
 
   if (selection.rangeCount) {
@@ -174,7 +164,7 @@ function showReportDialog() {
 
     existingDialog.showModal();
     submitButton.setAttribute('aria-disabled', 'false');
-    urlInput.textContent = window.location.origin + window.location.pathname;
+    urlInput.setAttribute('value', window.location.origin + window.location.pathname);
     return;
   }
 
@@ -188,8 +178,7 @@ function showReportDialog() {
   const urlInput = dialog?.querySelector('#report-dialog-input-url');
 
   closeButton.addEventListener('click', closeButtonClickHandler);
-  dialog.querySelector('#report-dialog-input-url').textContent =
-    window.location.origin + window.location.pathname;
+  urlInput.setAttribute('value', window.location.origin + window.location.pathname);
   link.setAttribute('href', 'https://fonts.googleapis.com/css?family=Inter');
   link.setAttribute('id', 'report-dialog-font');
   link.setAttribute('rel', 'stylesheet');
@@ -222,9 +211,9 @@ async function submitButtonClickHandler(event) {
 
   const dialog = document.getElementById(reportDialogId);
   const reasonInput = dialog?.querySelector('#report-dialog-input-reason');
-  const reasonText = reasonInput?.textContent.trim();
+  const reasonText = reasonInput?.value.trim();
   const urlInput = dialog?.querySelector('#report-dialog-input-url');
-  const urlText = urlInput?.textContent.trim();
+  const urlText = urlInput?.value.trim();
 
   const errors = validateForm({ reason: reasonText, url: urlText });
 
diff --git a/packages/browser-extension/src/styles/dialog.css b/packages/browser-extension/src/styles/dialog.css
index f4934e3..091fa3a 100644
--- a/packages/browser-extension/src/styles/dialog.css
+++ b/packages/browser-extension/src/styles/dialog.css
@@ -126,6 +126,7 @@
 }
 
 #report-dialog .report-dialog-input {
+  all: unset;
   border: 1px solid var(--cookie-dialog-monster-color-tertiary);
   border-radius: 4px;
   color: var(--cookie-dialog-monster-color-secondary);
@@ -213,7 +214,7 @@
   display: flex;
   font-family: Inter, Arial, Helvetica, sans-serif;
   font-size: 14px;
-  height: 39px;
+  height: 42px;
   justify-content: center;
   line-height: 1.2;
   outline: none;