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

vpat 49: refactor note format preference section (#4027)

Browse source 
"Note format" section in "Export" tab is technically a table and is
announced as such by screen readers, which is misleading.
It also opens a menulist when a checkbox is clicked, which is
not an expected behavior and can shift focus.

This refactors the "Note format" section to be a vbox container
with <checkbox>es and labels, which is more correct semantically and
does not confuse screen readers. In addition, when a chekbox is
clicked, dispatch a "change" event instead of unnecessarily open
up a menu.
This commit is contained in:
abaevbog 2024-06-07 04:25:37 -05:00 • committed by GitHub
parent 7f84716c7e
commit 249c5b8d12
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 37 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

6
chrome/content/zotero/preferences/preferences_export.jsx
View file

@ -258,9 +258,9 @@ Zotero_Preferences.Export = {
}
item.value = JSON.stringify(format);
}
// After updating menulist item value we have to wait a bit before doing click(), to avoid anomalies
// like an empty row in menulist. 0 in setTimeout is not enough
setTimeout(() => menulist.click(), 50);
// After updating item's value we have to wait before dispatching event.
// menulist.value does not reflect changes immediately item.value is updated.
setTimeout(() => menulist.dispatchEvent(new Event("change", { bubbles: true })), 50);
},

40
chrome/content/zotero/preferences/preferences_export.xhtml
View file

@ -53,38 +53,22 @@
<label value="&zotero.preferences.quickCopy.noteFormat;" control="zotero-noteQuickCopy-menu"/>
<menulist id="zotero-noteQuickCopy-menu" label="&zotero.general.loading;" native="true"/>
<table id="noteQuickCopy-format-options"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
hidden="hidden">
<tbody id="noteQuickCopy-markdown-options">
<tr>
<th>
<xul:label/>
</th>
<td>
<xul:checkbox id="noteQuickCopy-markdown-includeAppLinks"
<box id="noteQuickCopy-wrapper">
<vbox id="noteQuickCopy-format-options" hidden="true" align="center">
<hbox id="noteQuickCopy-markdown-options" align="center">
<label control="noteQuickCopy-markdown-includeAppLinks"></label>
<checkbox id="noteQuickCopy-markdown-includeAppLinks"
oncommand="Zotero_Preferences.Export.onUpdateNoteExportOptions()"
native="true"/>
</td>
</tr>
</tbody>
<tbody id="noteQuickCopy-html-options">
<tr>
<th>
<xul:label/>
</th>
<td>
<xul:checkbox id="noteQuickCopy-html-includeAppLinks"
</hbox>
<hbox id="noteQuickCopy-html-options" align="center">
<label control="noteQuickCopy-html-includeAppLinks"></label>
<checkbox id="noteQuickCopy-html-includeAppLinks"
oncommand="Zotero_Preferences.Export.onUpdateNoteExportOptions()"
native="true"/>
</td>
</tr>
</tbody>
</table>
</hbox>
</vbox>
</box>
<separator/>
<label value="&zotero.preferences.quickCopy.siteEditor.setings;" control="quickCopy-siteSettings"/>

22
scss/preferences/_export.scss
View file

@ -16,8 +16,22 @@
min-height: 1.5em; /* Fix collapse on Windows */
}
#noteQuickCopy-format-options th {
font-weight: normal;
text-align: end;
max-width: 3.6em;
#noteQuickCopy-wrapper {
margin-left: 30px;
@media (-moz-platform: windows) {
margin-left: 45px;
}
@media (-moz-platform: linux) {
margin-left: 25px;
}
}
#noteQuickCopy-markdown-options > label,
#noteQuickCopy-html-options > label{
margin-inline-end: 8px;
}
#noteQuickCopy-format-options hbox {
justify-content: end;
width: 100%;
}