From 4432f88f1d51f806d9c0d9321dcce506299d09f6 Mon Sep 17 00:00:00 2001
From: abaevbog <bogdan@zotero.org>
Date: Fri, 12 Apr 2024 06:22:16 -0400
Subject: [PATCH] vpat_11: add roles and states to tags in selector (#3967)

- set each tag's role as "checkbox"
- set "aria-checked" status depending on if the tag
is selected
- added aria-label to tag selector so it does not
default to "grid"
---
 .../zotero/components/tagSelector/tagSelectorList.jsx        | 5 ++++-
 chrome/content/zotero/zoteroPane.xhtml                       | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/chrome/content/zotero/components/tagSelector/tagSelectorList.jsx b/chrome/content/zotero/components/tagSelector/tagSelectorList.jsx
index f02af93b6e..e0da739ef2 100644
--- a/chrome/content/zotero/components/tagSelector/tagSelectorList.jsx
+++ b/chrome/content/zotero/components/tagSelector/tagSelectorList.jsx
@@ -187,7 +187,9 @@ class TagList extends React.PureComponent {
 			...style
 		};
 		props.tabIndex = "0";
-		
+		props.role = "checkbox";
+		props['aria-checked'] = tag.selected;
+		props['aria-disabled'] = tag.disabled;
 		// Don't specify explicit width unless we're truncating, because for some reason the width
 		// from canvas can sometimes be slightly smaller than the actual width, resulting in an
 		// unnecessary ellipsis.
@@ -249,6 +251,7 @@ class TagList extends React.PureComponent {
 					verticalOverscanSize={300}
 					width={this.props.width}
 					height={this.props.height - filterBarHeight}
+					aria-label={document.querySelector("#zotero-tag-selector").getAttribute("label") || ""}
 				/>
 			);
 		}
diff --git a/chrome/content/zotero/zoteroPane.xhtml b/chrome/content/zotero/zoteroPane.xhtml
index 0630d7e021..35089cb5bf 100644
--- a/chrome/content/zotero/zoteroPane.xhtml
+++ b/chrome/content/zotero/zoteroPane.xhtml
@@ -1030,7 +1030,7 @@
 										 TODO: deal with this some other way?
 									-->
 									<vbox id="zotero-tag-selector-container" zotero-persist="height,collapsed" clickthrough="never">
-										<html:div id="zotero-tag-selector"/>
+										<html:div id="zotero-tag-selector" label="&tagSelector.label;"/>
 									</vbox>
 								</vbox>