From 0f565ecfef00fc6eef751b7c2703f77e25167e50 Mon Sep 17 00:00:00 2001
From: Tom Najdek <tom@doppnet.com>
Date: Tue, 3 Feb 2026 21:51:24 +0100
Subject: [PATCH] =?UTF-8?q?Replace=20`=C3=97`=20close=20links=20with=20but?=
 =?UTF-8?q?tons=20in=20banners=20(#5735)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 chrome/content/zotero/zoteroPane.xhtml | 16 ++++++++++++----
 chrome/locale/en-US/zotero/zotero.ftl  |  3 +++
 scss/components/_banners.scss          | 22 ++++++++++++++++------
 3 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/chrome/content/zotero/zoteroPane.xhtml b/chrome/content/zotero/zoteroPane.xhtml
index a8bb3e66bc..2ec234dfe1 100644
--- a/chrome/content/zotero/zoteroPane.xhtml
+++ b/chrome/content/zotero/zoteroPane.xhtml
@@ -1135,7 +1135,9 @@
 									<html:div class="spacer"/>
 									<html:a id="sync-reminder-disable" class="link"/>
 									<html:a id="sync-reminder-remind" class="link"/>
-									<label is="text-link" id="sync-reminder-close" class="close-link">×</label>
+									<html:div role="button" id="sync-reminder-close" class="close-btn" data-l10n-id="banner-close-button">
+										<html:span class="icon" />
+									</html:div>
 								</html:div>
 							</vbox>
 							
@@ -1160,7 +1162,9 @@
 								<html:div id="retracted-items-banner" class="banner">
 									<html:div id="retracted-items-message" class="message"/>
 									<label is="text-link" id="retracted-items-link"/>
-									<label is="text-link" id="retracted-items-close" class="close-link">×</label>
+									<html:div role="button" id="retracted-items-close" class="close-btn" data-l10n-id="banner-close-button">
+										<html:span class="icon" />
+									</html:div>
 								</html:div>
 							</vbox>
 
@@ -1170,7 +1174,9 @@
 									<html:a id="architecture-warning-action" data-l10n-id="architecture-warning-action" class="link" />
 									<html:div class="spacer" />
 									<label is="text-link" id="architecture-warning-remind" data-l10n-id="general-remind-me-later" />
-									<label is="text-link" id="architecture-warning-close" class="close-link">×</label>
+									<html:div role="button" id="architecture-warning-close" class="close-btn" data-l10n-id="banner-close-button">
+										<html:span class="icon" />
+									</html:div>
 								</html:div>
 							</vbox>
 
@@ -1179,7 +1185,9 @@
 									<html:div id="file-renaming-message" class="message" data-l10n-id="file-renaming-banner-message" />
 									<html:a id="file-renaming-documentation-link" data-l10n-id="file-renaming-banner-documentation-link" class="link" />
 									<html:div class="spacer" />
-									<label is="text-link" id="file-renaming-banner-close" class="close-link">×</label>
+									<html:div role="button" id="file-renaming-banner-close" class="close-btn" data-l10n-id="banner-close-button">
+										<html:span class="icon" />
+									</html:div>
 								</html:div>
 							</vbox>
 							
diff --git a/chrome/locale/en-US/zotero/zotero.ftl b/chrome/locale/en-US/zotero/zotero.ftl
index 083edfa2e2..0b237ad79a 100644
--- a/chrome/locale/en-US/zotero/zotero.ftl
+++ b/chrome/locale/en-US/zotero/zotero.ftl
@@ -856,3 +856,6 @@ normalize-attachment-titles-text = { -app-name } automatically renames files on
     In older versions of { -app-name }, as well as when using certain plugins, attachment titles could be changed unnecessarily to match the filenames.
     
     Would you like to update the selected attachments to use simpler titles? Only primary attachments with titles that match the filename will be changed.
+
+banner-close-button = 
+    .aria-label = Dismiss notification
diff --git a/scss/components/_banners.scss b/scss/components/_banners.scss
index c0b7f0c6cc..a00f3f3829 100644
--- a/scss/components/_banners.scss
+++ b/scss/components/_banners.scss
@@ -32,12 +32,22 @@
 		padding-inline: 0.5em;
 	}
 	
-	label[is="text-link"].close-link {
-		text-decoration: none;
-		cursor: pointer;
-		font-size: 22px;
-		line-height: 26px;
-		margin-inline-end: -0.5em;
+	.close-btn {
+		border-radius: 4px;
+		display: flex;
+		
+		&:hover {
+			background-color: var(--color-background50);
+		}
+		
+		.icon {
+			width: 20px;
+			height: 20px;
+			@include svgicon("x-8", "universal", "16");
+			color: inherit;
+			padding-block: 4px;
+			box-sizing: border-box;
+		}
 	}
 	
 	.message {