From 3f348e33408952d8665bd736906c10c352c9a52a Mon Sep 17 00:00:00 2001
From: Abe Jellinek <jellinek@berkeley.edu>
Date: Wed, 31 Jan 2024 13:06:57 -0500
Subject: [PATCH] Use actual placeholder attribute for editable-texts

As far as I can tell, the Abstract field was the only editable-text
using a placeholder set by Fluent.

https://github.com/zotero/zotero/pull/3632#issuecomment-1919619813
---
 chrome/content/zotero/elements/abstractBox.js  |  2 +-
 chrome/content/zotero/elements/editableText.js | 17 +++--------------
 chrome/locale/en-US/zotero/zotero.ftl          |  2 +-
 3 files changed, 5 insertions(+), 16 deletions(-)

diff --git a/chrome/content/zotero/elements/abstractBox.js b/chrome/content/zotero/elements/abstractBox.js
index 9c6e062966..97ad4962b2 100644
--- a/chrome/content/zotero/elements/abstractBox.js
+++ b/chrome/content/zotero/elements/abstractBox.js
@@ -30,7 +30,7 @@
 		content = MozXULElement.parseXULToFragment(`
 			<collapsible-section data-l10n-id="section-abstract" data-pane="abstract">
 				<html:div class="body">
-					<editable-text multiline="true" data-l10n-id="abstract-field" />
+					<editable-text multiline="true" data-l10n-id="abstract-field" data-l10n-attrs="placeholder" />
 				</html:div>
 			</collapsible-section>
 		`);
diff --git a/chrome/content/zotero/elements/editableText.js b/chrome/content/zotero/elements/editableText.js
index 8e07933052..7250f06a4b 100644
--- a/chrome/content/zotero/elements/editableText.js
+++ b/chrome/content/zotero/elements/editableText.js
@@ -35,7 +35,6 @@
 			'multiline',
 			'readonly',
 			'placeholder',
-			'label',
 			'aria-label',
 			'aria-labelledby',
 			'value',
@@ -67,22 +66,12 @@
 			this.toggleAttribute('readonly', readOnly);
 		}
 
-		// Fluent won't set placeholder on an editable-text for some reason, so we use the label property to store
-		// the placeholder that will be set on the child <textarea> or <input>
 		get placeholder() {
-			return this.label;
+			return this.getAttribute('placeholder') || '';
 		}
 		
 		set placeholder(placeholder) {
-			this.label = placeholder;
-		}
-		
-		get label() {
-			return this.getAttribute('label') || '';
-		}
-		
-		set label(label) {
-			this.setAttribute('label', label || '');
+			this.setAttribute('placeholder', placeholder || '');
 		}
 		
 		get ariaLabel() {
@@ -254,7 +243,7 @@
 				}
 			}
 			this._input.readOnly = this.readOnly;
-			this._input.placeholder = this.label;
+			this._input.placeholder = this.placeholder;
 			if (this.ariaLabel.length) {
 				this._input.setAttribute('aria-label', this.ariaLabel);
 			}
diff --git a/chrome/locale/en-US/zotero/zotero.ftl b/chrome/locale/en-US/zotero/zotero.ftl
index 6c3217b193..32d7ce678c 100644
--- a/chrome/locale/en-US/zotero/zotero.ftl
+++ b/chrome/locale/en-US/zotero/zotero.ftl
@@ -375,7 +375,7 @@ expand-all-sections =
     .label = Expand All Sections
 
 abstract-field =
-    .label = Add abstract…
+    .placeholder = Add abstract…
 
 tagselector-search =
     .placeholder = Filter Tags