[FIX] website: fix input attributes translation

Issue:

- Go to website > edit mode > add a form
- On one of the form fields, add a placeholder > save
- Change language > translate > impossible to translate the placeholder.

The fix on [1] was added to prevent interacting with inputs in editable
zones. This prevents translating attributes on those inputs too (using
the AttributeTranslateDialog) so the goal of this commit is to add
an exception to the restriction in [1], when input attributes are
translated.

[1]: https://github.com/odoo/odoo/commit/3e598a8014966e1a07a08d53bf85050b458e05a6



task-3042522

closes odoo/odoo#106198

Signed-off-by: Benoit Socias (bso) <bso@odoo.com>

addons/website/static/src/scss/website.edit_mode.scss

@@ -228,12 +228,12 @@ body.editor_enable {
 // target all inputs and/or target specific snippets in their own app.
 .editor_enable {
     .s_website_form, .s_wsale_products_searchbar_input, .js_subscribe, .js_follow_alias {
-        input {
+        input:not(.o_translatable_attribute) {
             pointer-events: none;
         }
     }
     .s_website_form {
-        [data-toggle="datetimepicker"], textarea {
+        [data-toggle="datetimepicker"], textarea:not(.o_translatable_attribute) {
             pointer-events: none;
         }
     }

addons/website/static/src/scss/website.scss

@@ -1517,3 +1517,17 @@ $ribbon-padding: 100px;
     // hide them if a modal is open.
     display: none !important;
 }
+// On translation editor, inputs & textareas with translatable "placeholder"
+// will get HTML content as translation value for the attribute. The goal here
+// is to hide these values until the editor's code sets the right ones on the
+// elements.
+[placeholder*="data-oe-translation-id"] {
+    &::-webkit-input-placeholder{ /* WebKit */
+        color: transparent;
+        opacity: 0;
+    }
+    &::-moz-placeholder { /* Firefox */
+        color: transparent;
+        opacity: 0;
+    }
+}