mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

vpat 80: focus first field in search window/dialog (#4402)

Browse source 
Instead of focusing the first condition, which ends up placing
focus in the middle of the new window or modal. It is best
to focus the first node, which is the general convention,
per https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/, and
what many screen reader users expect. When we focus a field in
the middle of the window/dialog, it makes it seem for some users
that this is the first node, which will make them miss all the
fields above it.

Also, linked search name input to its label in searchDialog.xhtml.
This commit is contained in:
abaevbog 2024-07-21 03:02:50 -07:00 committed by GitHub
parent 846279da01
commit c5c613c82c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 6 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
chrome/content/zotero/advancedSearch.js
View file

@ -90,6 +90,8 @@ var ZoteroAdvancedSearch = new function() {
}; };
this.itemsView.changeCollectionTreeRow(collectionTreeRow); this.itemsView.changeCollectionTreeRow(collectionTreeRow);
// Focus the first field in the window
Services.focus.moveFocus(window, null, Services.focus.MOVEFOCUS_FORWARD, 0);
} }
this.onUnload = function () { this.onUnload = function () {

2
chrome/content/zotero/elements/zoteroSearch.js
View file

@ -631,8 +631,6 @@
} }
this.onConditionSelected(menu.value); this.onConditionSelected(menu.value);
this.querySelector('#conditionsmenu').focus();
} }
updateSearch() { updateSearch() {

4
chrome/content/zotero/searchDialog.js
View file

@ -40,7 +40,9 @@ function doLoad()
var searchBox = document.getElementById('search-box'); var searchBox = document.getElementById('search-box');
searchBox.groups = io.dataIn.groups; searchBox.groups = io.dataIn.groups;
searchBox.search = io.dataIn.search; searchBox.search = io.dataIn.search;
document.getElementById('search-name').value = io.dataIn.name; let searchName = document.getElementById('search-name');
searchName.value = io.dataIn.name;
searchName.select();
document.addEventListener('dialogaccept', doAccept); document.addEventListener('dialogaccept', doAccept);
} }

2
chrome/content/zotero/searchDialog.xhtml
View file

@ -35,7 +35,7 @@
<vbox id="zotero-search-box-container" flex="1"> <vbox id="zotero-search-box-container" flex="1">
<hbox align="center"> <hbox align="center">
<label value="&zotero.search.name;"/> <label control="search-name" value="&zotero.search.name;"/>
<html:input id="search-name" type="text" width="275" maxlength="80"/> <html:input id="search-name" type="text" width="275" maxlength="80"/>
</hbox> </hbox>
<zoterosearch id="search-box" flex="1"/> <zoterosearch id="search-box" flex="1"/>