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

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

@ -53,38 +53,22 @@
<label value="&zotero.preferences.quickCopy.noteFormat;" control="zotero-noteQuickCopy-menu"/> <label value="&zotero.preferences.quickCopy.noteFormat;" control="zotero-noteQuickCopy-menu"/>
<menulist id="zotero-noteQuickCopy-menu" label="&zotero.general.loading;" native="true"/> <menulist id="zotero-noteQuickCopy-menu" label="&zotero.general.loading;" native="true"/>
<box id="noteQuickCopy-wrapper">
<table id="noteQuickCopy-format-options" <vbox id="noteQuickCopy-format-options" hidden="true" align="center">
xmlns="http://www.w3.org/1999/xhtml" <hbox id="noteQuickCopy-markdown-options" align="center">
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" <label control="noteQuickCopy-markdown-includeAppLinks"></label>
hidden="hidden"> <checkbox id="noteQuickCopy-markdown-includeAppLinks"
<tbody id="noteQuickCopy-markdown-options"> oncommand="Zotero_Preferences.Export.onUpdateNoteExportOptions()"
<tr> native="true"/>
<th> </hbox>
<xul:label/> <hbox id="noteQuickCopy-html-options" align="center">
</th> <label control="noteQuickCopy-html-includeAppLinks"></label>
<td> <checkbox id="noteQuickCopy-html-includeAppLinks"
<xul:checkbox id="noteQuickCopy-markdown-includeAppLinks" oncommand="Zotero_Preferences.Export.onUpdateNoteExportOptions()"
oncommand="Zotero_Preferences.Export.onUpdateNoteExportOptions()" native="true"/>
native="true"/> </hbox>
</td> </vbox>
</tr> </box>
</tbody>
<tbody id="noteQuickCopy-html-options">
<tr>
<th>
<xul:label/>
</th>
<td>
<xul:checkbox id="noteQuickCopy-html-includeAppLinks"
oncommand="Zotero_Preferences.Export.onUpdateNoteExportOptions()"
native="true"/>
</td>
</tr>
</tbody>
</table>
<separator/> <separator/>
<label value="&zotero.preferences.quickCopy.siteEditor.setings;" control="quickCopy-siteSettings"/> <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 */ min-height: 1.5em; /* Fix collapse on Windows */
} }
#noteQuickCopy-format-options th { #noteQuickCopy-wrapper {
font-weight: normal; margin-left: 30px;
text-align: end; @media (-moz-platform: windows) {
max-width: 3.6em; 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%;
} }