vpat 40/41: style editor aria fixes (#4022)

- linked all labels to their respective inputs so they are announced by
screen readers
- added aria-labels for the actual editor and preview iframes
- locator type and locator input are assigned aria-labels
- added visible labels to citation style and language menus,
since vpat 40 specifically asks for visible labels
This commit is contained in:
Bogdan Abaev 2024-04-23 15:59:04 -04:00 • committed by Dan Stillman
parent 684c63669b
commit 6282eef3cc
2 changed files with 28 additions and 7 deletions

View file

@ -41,19 +41,24 @@
<script src="chrome://zotero/content/include.js"/>
<script src="csledit.js"/>
<linkset>
<html:link rel="localization" href="zotero.ftl"/>
</linkset>
<vbox flex="1">
<vbox class="csl-edit-toolbars">
<hbox class="csl-edit-toolbar">
<button id="preview-refresh-button" label="&zotero.general.refresh;" oncommand="Zotero_CSL_Editor.refresh()"/>
<button id="zotero-csl-save" label="&zotero.general.saveAs;" oncommand="Zotero_CSL_Editor.save()"/>
<html:div class="divider" />
<menulist id="zotero-csl-page-type" oncommand="Zotero_CSL_Editor.refresh()" native="true" />
<menulist id="zotero-csl-page-type" oncommand="Zotero_CSL_Editor.refresh()" native="true" data-l10n-id="styleEditor-locatorType"/>
<label value=":" />
<html:input size="5" id="preview-pages" oninput="Zotero_CSL_Editor.refreshDebounced()"/>
<label id="locator-input" data-l10n-id="styleEditor-locatorInput" hidden="true"/>
<html:input size="5" id="preview-pages" oninput="Zotero_CSL_Editor.refreshDebounced()" aria-labelledby="zotero-csl-page-type locator-input"/>
<html:div class="divider" />
<checkbox oncommand="Zotero_CSL_Editor.refresh()" id="preview-suppress-author" label="&zotero.citation.suppressAuthor.label;" native="true" />
<html:div class="divider" />
<label value="&styles.editor.citePosition;" />
<label value="&styles.editor.citePosition;" control="zotero-ref-position"/>
<menulist id="zotero-ref-position" oncommand="Zotero_CSL_Editor.refresh()" native="true">
<menupopup>
<menuitem label="first" value="0"/>
@ -65,16 +70,19 @@
</menulist>
</hbox>
<hbox class="csl-edit-toolbar">
<label data-l10n-id="styleEditor-citationStyle" control="zotero-csl-list"/>
<menulist id="zotero-csl-list" oncommand="Zotero_CSL_Editor.onStyleSelected(this.value)" native="true"/>
<html:div class="divider" />
<label data-l10n-id="styleEditor-locale" control="locale-menu"/>
<menulist id="locale-menu" oncommand="Zotero.Prefs.set('export.lastLocale', this.value); Zotero_CSL_Editor.refresh()" native="true" />
</hbox>
</vbox>
<iframe id="zotero-csl-editor-iframe" src="chrome://scaffold/content/monaco/monaco.html" flex="1"
onmousedown="this.focus()"/>
onmousedown="this.focus()" data-l10n-id="styleEditor-editor"/>
<splitter id="csledit-splitter" collapse="before" persist="state" orient="vertical">
<grippy/>
</splitter>
<iframe id="zotero-csl-preview-box" flex="1" overflow="auto" type="content"/>
<iframe id="zotero-csl-preview-box" flex="1" overflow="auto" type="content" data-l10n-id="styleEditor-preview"/>
</vbox>
<keyset>

View file

@ -16,6 +16,9 @@ general-tag = Tag
general-done = Done
general-view-troubleshooting-instructions = View Troubleshooting Instructions
citation-style-label = Citation Style:
language-label = Language:
menu-file-show-in-finder =
.label = Show in Finder
menu-file-show-file =
@ -276,8 +279,8 @@ runJS-run-async = Run as async function
bibliography-window =
.title = { -app-name } - Create Citation/Bibliography
bibliography-style-label = Citation Style:
bibliography-locale-label = Language:
bibliography-style-label = { citation-style-label }
bibliography-locale-label = { language-label }
bibliography-displayAs-label = Display citations as:
bibliography-advancedOptions-label = Advanced Options
bibliography-outputMode-label = Output Mode:
@ -311,6 +314,16 @@ integration-editBibliography-window =
integration-quickFormatDialog-window =
.title = { -app-name } - Quick Format Citation
styleEditor-locatorType =
.aria-label = Locator type
styleEditor-locatorInput = Locator input
styleEditor-citationStyle = { citation-style-label }
styleEditor-locale = { language-label }
styleEditor-editor =
.aria-label = Style editor
styleEditor-preview =
.aria-label = Preview
integration-prefs-displayAs-label = Display Citations As:
integration-prefs-footnotes =
.label = Footnotes