From 531f55120c997d36317646ede60e3d00f2f77e85 Mon Sep 17 00:00:00 2001
From: Abe Jellinek <jellinek@berkeley.edu>
Date: Thu, 8 Aug 2024 00:22:09 -0400
Subject: [PATCH] Feed settings: Make disclosure triangle focusable, extract
 SCSS (#4513)

- <hbox> -> <button>, <toolbarbutton> -> <dropmarker>
- Extract styles to SCSS and use focus-ring mixin

Fixes #4512
---
 chrome/content/zotero/feedSettings.xhtml |  6 ++---
 chrome/skin/default/zotero/zotero.css    | 22 ------------------
 scss/_zotero.scss                        |  1 +
 scss/components/_feedSettings.scss       | 29 ++++++++++++++++++++++++
 4 files changed, 33 insertions(+), 25 deletions(-)
 create mode 100644 scss/components/_feedSettings.scss

diff --git a/chrome/content/zotero/feedSettings.xhtml b/chrome/content/zotero/feedSettings.xhtml
index 5d9cc2ceff..fcbbdf8853 100644
--- a/chrome/content/zotero/feedSettings.xhtml
+++ b/chrome/content/zotero/feedSettings.xhtml
@@ -36,12 +36,12 @@
 		<html:input id="feed-title" style="max-width: 30em;" />
 	</html:div>
 	<vbox id="advanced-options" class="zotero-advanced-options">
-		<hbox onclick="Zotero_Feed_Settings.toggleAdvancedOptions()"  class="zotero-advanced-options-label">
-			<toolbarbutton class="toolbarbutton-menu-dropmarker"/>
+		<button oncommand="Zotero_Feed_Settings.toggleAdvancedOptions()" class="zotero-advanced-options-label">
+			<dropmarker type="menu" class="toolbarbutton-menu-dropmarker"/>
 			<hbox align="center">
 				<label value="&zotero.general.advancedOptions.label;"/>
 			</hbox>
-		</hbox>
+		</button>
 		<vbox id="advanced-options-togglable">
 			<hbox align="center">
 				<label value="&zotero.feedSettings.refresh.label1;" control="feed-ttl"/>
diff --git a/chrome/skin/default/zotero/zotero.css b/chrome/skin/default/zotero/zotero.css
index e372585d24..8ea48cddb3 100644
--- a/chrome/skin/default/zotero/zotero.css
+++ b/chrome/skin/default/zotero/zotero.css
@@ -97,28 +97,6 @@ zoterosearch .menulist-icon {
 	max-width: 29.5em;
 }
 
-.zotero-advanced-options > .zotero-advanced-options-label > .toolbarbutton-menu-dropmarker {
-	transform: rotate(270deg);
-}
-
-.zotero-advanced-options[state=open] > .zotero-advanced-options-label > .toolbarbutton-menu-dropmarker {
-	transform: none;
-}
-
-#zotero-feed-settings grid hbox:first-child {
-	-moz-box-pack: end;
-}
-
-#zotero-feed-settings .html-input {
-	width: 50px;
-	text-align: right;
-}
-
-#zotero-feed-settings #advanced-options-togglable hbox {
-	display: flex;
-	align-items: center;
-}
-
 #zotero-edit-bibliography-dialog #item-list .listcell-icon {
 	max-width: 16px;
 }
diff --git a/scss/_zotero.scss b/scss/_zotero.scss
index f6cdd80432..27735bc1d9 100644
--- a/scss/_zotero.scss
+++ b/scss/_zotero.scss
@@ -34,6 +34,7 @@
 @import "components/editable";
 @import "components/editBibliographyDialog";
 @import "components/exportOptions";
+@import "components/feedSettings";
 @import "components/icons";
 @import "components/import-wizard";
 @import "components/item-tree";
diff --git a/scss/components/_feedSettings.scss b/scss/components/_feedSettings.scss
new file mode 100644
index 0000000000..c16cb4acca
--- /dev/null
+++ b/scss/components/_feedSettings.scss
@@ -0,0 +1,29 @@
+#zotero-feed-settings {
+	.zotero-advanced-options > .zotero-advanced-options-label {
+		@include focus-ring;
+		
+		appearance: none;
+		border: none;
+		outline: none;
+		background: transparent;
+		padding: 0;
+	}
+
+	.zotero-advanced-options > .zotero-advanced-options-label > .toolbarbutton-menu-dropmarker {
+		transform: rotate(270deg);
+	}
+
+	.zotero-advanced-options[state=open] > .zotero-advanced-options-label > .toolbarbutton-menu-dropmarker {
+		transform: none;
+	}
+
+	.html-input {
+		width: 50px;
+		text-align: right;
+	}
+
+	#advanced-options-togglable hbox {
+		display: flex;
+		align-items: center;
+	}
+}