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

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

View file

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

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-item = Press { return-or-enter } to select this item. Press Tab to return to the search field.
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