Set 'control' attribute for item box fields

Set 'control' to the id of either the value label or the textbox,
depending on whether the field is being edited. This causes NVDA to read
the label associated with the textbox, but seemingly only the first time
it's selected.

Unfortunately NVDA also does some other unpleasant things, like reading
a description from the duplicate-merging pane, which isn't the active
element in the deck, and reading the entire text, including all field
labels, of the item box) I'm not sure how much we can improve this until
we're on Electron.

VoiceOver doesn't read the textbox's label either, even though it does
so in the bookmarks window in Firefox. Maybe things have improved since
Firefox 52, so we can text again after upgrading to Firefox 60.

Addresses #1411
This commit is contained in:
Dan Stillman 2018-04-14 13:25:31 -04:00
parent 0cc3e64b8a
commit 794d3880e7

View File

@ -1274,6 +1274,7 @@
var valueElement = document.createElement("label"); var valueElement = document.createElement("label");
} }
valueElement.setAttribute('id', `itembox-field-value-${fieldName}`);
valueElement.setAttribute('fieldname', fieldName); valueElement.setAttribute('fieldname', fieldName);
valueElement.setAttribute('flex', 1); valueElement.setAttribute('flex', 1);
@ -1429,6 +1430,7 @@
return (async function () { return (async function () {
Zotero.debug(`Showing editor for ${elem.getAttribute('fieldname')}`); Zotero.debug(`Showing editor for ${elem.getAttribute('fieldname')}`);
var label = Zotero.getAncestorByTagName(elem, 'row').querySelector('label');
var lastTabIndex = this._lastTabIndex = parseInt(elem.getAttribute('ztabindex')); var lastTabIndex = this._lastTabIndex = parseInt(elem.getAttribute('ztabindex'));
// If a field is open, hide it before selecting the new field, which might // If a field is open, hide it before selecting the new field, which might
@ -1493,6 +1495,7 @@
} }
var t = document.createElement("textbox"); var t = document.createElement("textbox");
t.setAttribute('id', `itembox-field-textbox-${fieldName}`);
t.setAttribute('value', value); t.setAttribute('value', value);
t.setAttribute('fieldname', fieldName); t.setAttribute('fieldname', fieldName);
t.setAttribute('ztabindex', tabindex); t.setAttribute('ztabindex', tabindex);
@ -1549,6 +1552,9 @@
var box = elem.parentNode; var box = elem.parentNode;
box.replaceChild(t, elem); box.replaceChild(t, elem);
// Associate textbox with label
label.setAttribute('control', t.getAttribute('id'));
// Prevent error when clicking between a changed field // Prevent error when clicking between a changed field
// and another -- there's probably a better way // and another -- there's probably a better way
if (!t.select) { if (!t.select) {
@ -1775,6 +1781,7 @@
return (async function () { return (async function () {
Zotero.debug(`Hiding editor for ${textbox.getAttribute('fieldname')}`); Zotero.debug(`Hiding editor for ${textbox.getAttribute('fieldname')}`);
var label = Zotero.getAncestorByTagName(textbox, 'row').querySelector('label');
this._lastTabIndex = -1; this._lastTabIndex = -1;
// Prevent autocomplete breakage in Firefox 3 // Prevent autocomplete breakage in Firefox 3
@ -1965,6 +1972,9 @@
var box = textbox.parentNode; var box = textbox.parentNode;
box.replaceChild(elem, textbox); box.replaceChild(elem, textbox);
// Disassociate textbox from label
label.setAttribute('control', elem.getAttribute('id'));
if (this.saveOnEdit) { if (this.saveOnEdit) {
await this.item.saveTx(); await this.item.saveTx();
} }