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"

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") || ""}
 				/>
 			);
 		}

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>