vpat 51: add aria labels to advanced search (#3987)
In addition, make toolbarbuttons explicitly focusable and make them clickable on space/Enter.
This commit is contained in:
parent
5a45717270
commit
a81701d7e7
2 changed files with 35 additions and 7 deletions
|
@ -40,15 +40,15 @@
|
|||
<vbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
|
||||
id="search-box" flex="1" onkeypress="this.closest('zoterosearch').handleKeyPress(event)">
|
||||
<hbox align="center">
|
||||
<label value="&zotero.search.searchInLibrary;" control="libraryMenu"/>
|
||||
<menulist id="libraryMenu" oncommand="this.closest('zoterosearch').updateLibrary();" native="true">
|
||||
<label id="libraryMenu-label" value="&zotero.search.searchInLibrary;" control="libraryMenu"/>
|
||||
<menulist id="libraryMenu" aria-labelledby="libraryMenu-label" oncommand="this.closest('zoterosearch').updateLibrary();" native="true">
|
||||
<menupopup/>
|
||||
</menulist>
|
||||
</hbox>
|
||||
<groupbox>
|
||||
<caption align="center">
|
||||
<label value="&zotero.search.joinMode.prefix;"/>
|
||||
<menulist id="joinModeMenu" oncommand="this.closest('zoterosearch').updateJoinMode();" native="true">
|
||||
<label id="joinModeMenu-label" value="&zotero.search.joinMode.prefix;"/>
|
||||
<menulist id="joinModeMenu" aria-labelledby="joinModeMenu-label" oncommand="this.closest('zoterosearch').updateJoinMode();" native="true">
|
||||
<menupopup>
|
||||
<menuitem label="&zotero.search.joinMode.any;" value="any"/>
|
||||
<menuitem label="&zotero.search.joinMode.all;" value="all" selected="true"/>
|
||||
|
@ -203,6 +203,11 @@
|
|||
}
|
||||
|
||||
handleKeyPress(event) {
|
||||
// Space/Enter on toolbarbutton will click it
|
||||
if (event.target.tagName == "toolbarbutton" && [" ", "Enter"].includes(event.key)) {
|
||||
event.target.click();
|
||||
return;
|
||||
}
|
||||
switch (event.keyCode) {
|
||||
case event.DOM_VK_RETURN:
|
||||
this.active = true;
|
||||
|
@ -239,8 +244,8 @@
|
|||
<menupopup/>
|
||||
</menulist>
|
||||
<zoterosearchagefield id="value-date-age" class="value-date-age" hidden="true"/>
|
||||
<toolbarbutton id="remove" class="zotero-clicky zotero-clicky-minus" value="-" onclick="this.closest('zoterosearchcondition').onRemoveClicked(event)"/>
|
||||
<toolbarbutton id="add" class="zotero-clicky zotero-clicky-plus" value="+" onclick="this.closest('zoterosearchcondition').onAddClicked(event)"/>
|
||||
<toolbarbutton id="remove" tabindex="0" data-l10n-id="advanced-search-remove-btn" class="zotero-clicky zotero-clicky-minus" value="-" onclick="this.closest('zoterosearchcondition').onRemoveClicked(event)"/>
|
||||
<toolbarbutton id="add" tabindex="0" data-l10n-id="advanced-search-add-btn" class="zotero-clicky zotero-clicky-plus" value="+" onclick="this.closest('zoterosearchcondition').onAddClicked(event)"/>
|
||||
</html:div>
|
||||
`, ['chrome://zotero/locale/zotero.dtd', 'chrome://zotero/locale/searchbox.dtd']);
|
||||
|
||||
|
@ -541,6 +546,13 @@
|
|||
this.querySelector('#valuemenu').hidden = true;
|
||||
this.querySelector('#value-date-age').hidden = true;
|
||||
}
|
||||
var conditionsMenu = this.querySelector('#conditionsmenu');
|
||||
document.l10n.setAttributes(conditionsMenu, 'advanced-search-conditions-menu', { label: conditionsMenu.label });
|
||||
document.l10n.setAttributes(operatorsList, 'advanced-search-operators-menu', { label: operatorsList.label });
|
||||
var valueMenu = this.querySelector("#valuemenu");
|
||||
if (!valueMenu.hidden) {
|
||||
document.l10n.setAttributes(valueMenu, 'advanced-search-condition-input', { label: valueMenu.label });
|
||||
}
|
||||
}
|
||||
|
||||
createValueMenu(rows) {
|
||||
|
@ -778,7 +790,9 @@
|
|||
autocompletesearch="zotero"
|
||||
autocompletepopup="search-autocomplete-popup"
|
||||
timeout="250"
|
||||
type="search"/>
|
||||
type="search"
|
||||
data-l10n-id="advanced-search-condition-input"
|
||||
/>
|
||||
|
||||
<xul:toolbarbutton
|
||||
id="textbox-button"
|
||||
|
|
|
@ -529,3 +529,17 @@ first-run-guidance-quickFormat = Type a title, author, and/or year to search for
|
|||
You can also add a page number directly by including it with your search terms or typing it after the bubble and pressing { return-or-enter }.
|
||||
|
||||
first-run-guidance-authorMenu = { -app-name } lets you specify editors and translators too. You can turn an author into an editor or translator by selecting from this menu.
|
||||
|
||||
advanced-search-remove-btn =
|
||||
.tooltiptext = { general-remove }
|
||||
advanced-search-add-btn =
|
||||
.tooltiptext = { general-add }
|
||||
advanced-search-conditions-menu =
|
||||
.aria-label = Search condition
|
||||
.label = { $label }
|
||||
advanced-search-operators-menu =
|
||||
.aria-label = Operator
|
||||
.label = { $label }
|
||||
advanced-search-condition-input =
|
||||
.aria-label = Value
|
||||
.label = { $label }
|
||||
|
|
Loading…
Reference in a new issue