From 80ac628d98dc2693d3b1041c4fcee7c0dd08fcd7 Mon Sep 17 00:00:00 2001 From: abaevbog Date: Wed, 17 Apr 2024 04:15:47 -0400 Subject: [PATCH] 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 --- chrome/content/zotero/elements/quickSearchTextbox.js | 8 +++++++- chrome/locale/en-US/zotero/zotero.ftl | 7 ++++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/chrome/content/zotero/elements/quickSearchTextbox.js b/chrome/content/zotero/elements/quickSearchTextbox.js index 3e822bc30b..06badd0489 100644 --- a/chrome/content/zotero/elements/quickSearchTextbox.js +++ b/chrome/content/zotero/elements/quickSearchTextbox.js @@ -31,6 +31,7 @@ super(); this.searchTextbox = null; + MozXULElement.insertFTLIfNeeded("zotero.ftl"); this.content = MozXULElement.parseXULToFragment(` @@ -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) { diff --git a/chrome/locale/en-US/zotero/zotero.ftl b/chrome/locale/en-US/zotero/zotero.ftl index 6e2dea0d09..300d94e0b7 100644 --- a/chrome/locale/en-US/zotero/zotero.ftl +++ b/chrome/locale/en-US/zotero/zotero.ftl @@ -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 \ No newline at end of file + .tooltiptext = Save edits to this citation + +quicksearch-mode = + .aria-label = Quick Search mode +quicksearch-input = + .aria-label = Quick Search