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

vpat 52: added aria label to quick search button (#3986)

Browse source 
Plus minor tweaks to get fluent to work in shadow doms
of the search textbox components
This commit is contained in:
abaevbog 2024-04-17 04:15:47 -04:00 committed by GitHub
parent e2970f242c
commit 80ac628d98
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 13 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
chrome/content/zotero/elements/quickSearchTextbox.js
View file

@ -31,6 +31,7 @@
super(); super();
this.searchTextbox = null; this.searchTextbox = null;
MozXULElement.insertFTLIfNeeded("zotero.ftl");
this.content = MozXULElement.parseXULToFragment(` this.content = MozXULElement.parseXULToFragment(`
<hbox id="search-wrapper" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox id="search-wrapper" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
</hbox> </hbox>
@ -57,6 +58,7 @@
// which we need for the menupopup, don't break the search textbox // which we need for the menupopup, don't break the search textbox
let dropmarkerHost = document.createXULElement('hbox'); let dropmarkerHost = document.createXULElement('hbox');
let dropmarkerShadow = dropmarkerHost.attachShadow({ mode: 'open' }); let dropmarkerShadow = dropmarkerHost.attachShadow({ mode: 'open' });
document.l10n.connectRoot(dropmarkerHost.shadowRoot);
dropmarkerHost.id = 'zotero-tb-search-dropmarker'; dropmarkerHost.id = 'zotero-tb-search-dropmarker';
let s1 = document.createElement("link"); let s1 = document.createElement("link");
@ -69,13 +71,15 @@
let dropmarker = document.createXULElement('button'); let dropmarker = document.createXULElement('button');
dropmarker.id = "zotero-tb-search-menu-button"; dropmarker.id = "zotero-tb-search-menu-button";
dropmarker.tabIndex = -1; dropmarker.tabIndex = 0;
dropmarker.setAttribute("type", "menu"); dropmarker.setAttribute("type", "menu");
dropmarker.setAttribute("data-l10n-id", "quicksearch-mode");
dropmarker.append(this.searchModePopup); dropmarker.append(this.searchModePopup);
dropmarkerShadow.append(s1, s2, dropmarker); dropmarkerShadow.append(s1, s2, dropmarker);
let searchBox = document.createXULElement("search-textbox"); let searchBox = document.createXULElement("search-textbox");
searchBox.inputField.setAttribute("data-l10n-id", "quicksearch-input");
searchBox.id = "zotero-tb-search-textbox"; searchBox.id = "zotero-tb-search-textbox";
this.searchTextbox = searchBox; this.searchTextbox = searchBox;
@ -142,6 +146,8 @@
this.searchModePopup.querySelector(`menuitem[value="${mode}"]`) this.searchModePopup.querySelector(`menuitem[value="${mode}"]`)
.setAttribute('checked', 'true'); .setAttribute('checked', 'true');
this.searchTextbox.placeholder = this._searchModes[mode]; this.searchTextbox.placeholder = this._searchModes[mode];
// Have the placeholder announced by screen readers after the label for additional context
this.searchTextbox.inputField.setAttribute("aria-description", this.searchTextbox.placeholder);
} }
_id(id) { _id(id) {

7
chrome/locale/en-US/zotero/zotero.ftl
View file

@ -472,4 +472,9 @@ quickformat-aria-bubble = Press Down Arrow to open citation properties.
quickformat-aria-input = Type your search term. Use Down Arrow and Up Arrow to navigate the search results. quickformat-aria-input = Type your search term. Use Down Arrow and Up Arrow to navigate the search results.
quickformat-aria-item = Press { return-or-enter } to select this item. Press Tab to return to the search field. quickformat-aria-item = Press { return-or-enter } to select this item. Press Tab to return to the search field.
quickformat-accept = quickformat-accept =
.tooltiptext = Save edits to this citation .tooltiptext = Save edits to this citation
quicksearch-mode =
.aria-label = Quick Search mode
quicksearch-input =
.aria-label = Quick Search