vpat 25/46: announce section headers of settings (#4434)
Some checks are pending
CI / Build, Upload, Test (push) Waiting to run

- explicitly add aria-labels to groupbox and vbox
sections of the settings. It's required for voiceover
to announce that label when focus enters the group.
It's not needed for NVDA and JAWS as they recognize
most h2 labels as labels of grouppings.
- add all relevant additionl text for the section
as aria-description/aria-describedby so it is
announced after the section's name when focus enters it
- add role="group" to vbox sections, since vbox
does not have any semantics
- skip tabstop on scrollable "#prefs-content" container
since it is not required
This commit is contained in:
abaevbog 2024-09-02 01:46:51 -07:00 committed by GitHub
parent 901cc7d635
commit 576e50552b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 41 additions and 40 deletions

View file

@ -92,7 +92,7 @@
hidden="true"/>
<search-textbox id="prefs-search" placeholder="&zotero.lookup.button.search;" timeout="1"/>
</html:div>
<html:div id="prefs-content">
<html:div id="prefs-content" tabindex="-1">
<html:div id="prefs-help-container">
<button
oncommand="Zotero_Preferences.openHelpLink()"

View file

@ -25,7 +25,7 @@
<vbox id="zotero-prefpane-advanced" onload="Zotero_Preferences.Advanced.init()">
<vbox class="main-section" id="zotero-prefpane-advanced-general-tab">
<groupbox id="zotero-prefpane-advanced-miscellaneous">
<groupbox id="zotero-prefpane-advanced-miscellaneous" aria-label="&zotero.preferences.miscellaneous;">
<label><html:h2>&zotero.preferences.miscellaneous;</html:h2></label>
<hbox align="center">
@ -59,8 +59,8 @@
</vbox>
</groupbox>
<groupbox>
<label><html:h2 data-l10n-id="preferences-advanced-language-and-region-title"/></label>
<groupbox aria-labelledby="preferences-advanced-language-and-region-title">
<label><html:h2 id="preferences-advanced-language-and-region-title" data-l10n-id="preferences-advanced-language-and-region-title"/></label>
<checkbox
data-l10n-id="preferences-advanced-enable-bidi-ui"
@ -70,10 +70,10 @@
</groupbox>
</vbox>
<vbox class="main-section">
<vbox class="main-section" role="group" aria-label="&zotero.preferences.advanced.filesAndFolders;">
<html:h1>&zotero.preferences.advanced.filesAndFolders;</html:h1>
<groupbox>
<groupbox aria-label="&zotero.preferences.attachmentBaseDir.caption;" aria-description="&zotero.preferences.attachmentBaseDir.message;">
<label><html:h2>&zotero.preferences.attachmentBaseDir.caption;</html:h2></label>
<vbox>
@ -103,7 +103,7 @@
</groupbox>
<groupbox>
<groupbox aria-label="&zotero.preferences.dataDir;">
<label><html:h2>&zotero.preferences.dataDir;</html:h2></label>
<radiogroup id="data-dir"
@ -131,7 +131,7 @@
</hbox>
</groupbox>
<groupbox>
<groupbox aria-label="&zotero.preferences.dbMaintenance;">
<label><html:h2>&zotero.preferences.dbMaintenance;</html:h2></label>
<hbox id="db-maintenance-options">
@ -147,7 +147,7 @@
</groupbox>
</vbox>
<html:div class="main-section" id="zotero-prefpane-advanced-keys-tab">
<html:div class="main-section" id="zotero-prefpane-advanced-keys-tab" role="group" aria-label="&zotero.preferences.advanced.keys;">
<html:h1>&zotero.preferences.advanced.keys;</html:h1>
<html:div id="zotero-keys-grid">
@ -188,7 +188,7 @@
<separator/>
</html:div>
<vbox class="main-section" id="zotero-prefpane-advanced-feeds-tab">
<vbox class="main-section" id="zotero-prefpane-advanced-feeds-tab" role="group" aria-label="&zotero.preferences.feeds;">
<html:h1>&zotero.preferences.feeds;</html:h1>
<groupbox>
@ -205,7 +205,7 @@
</hbox>
</groupbox>
<groupbox id="zotero-prefpane-advanced-feeds-feedDefaults">
<groupbox id="zotero-prefpane-advanced-feeds-feedDefaults" aria-label="&zotero.preferences.feeds.feedDefaults;">
<label><html:h2>&zotero.preferences.feeds.feedDefaults;</html:h2></label>
<hbox>
<hbox align="center">
@ -234,10 +234,10 @@
</groupbox>
</vbox>
<vbox class="main-section">
<vbox class="main-section" role="group" aria-label="&zotero.preferences.prefpane.search;">
<html:h1>&zotero.preferences.prefpane.search;</html:h1>
<groupbox>
<groupbox aria-label="&zotero.preferences.search.fulltextCache;">
<label><html:h2>&zotero.preferences.search.fulltextCache;</html:h2></label>
<hbox>
@ -264,10 +264,10 @@
</hbox>
</groupbox>
<groupbox id="fulltext-stats">
<groupbox id="fulltext-stats" tabindex="0" aria-label="&zotero.preferences.search.indexStats;" aria-describedby="fulltext-stats-grid">
<label><html:h2>&zotero.preferences.search.indexStats;</html:h2></label>
<vbox class="form-grid">
<vbox class="form-grid" id="fulltext-stats-grid">
<label value="&zotero.preferences.search.indexStats.indexed;"/>
<label id="fulltext-stats-indexed"/>

View file

@ -25,7 +25,7 @@
<vbox id="zotero-prefpane-cite" onload="event.waitUntil(Zotero_Preferences.Cite.init())">
<vbox class="main-section" id="styles">
<groupbox flex="1">
<groupbox flex="1" aria-label="&zotero.preferences.cite.styles.styleManager;">
<!-- HTML needs to be wrapped in an hbox to isolate from XUL box layout -->
<hbox><label control="styleManager-table"><html:h2>&zotero.preferences.cite.styles.styleManager;</html:h2></label></hbox>
@ -46,17 +46,17 @@
</hbox>
</groupbox>
<groupbox>
<groupbox aria-label="&zotero.preferences.citationOptions.caption;">
<label><html:h2>&zotero.preferences.citationOptions.caption;</html:h2></label>
<checkbox label="&zotero.preferences.export.citePaperJournalArticleURL;" preference="extensions.zotero.export.citePaperJournalArticleURL" native="true"/>
<checkbox label="&zotero.preferences.export.citePaperJournalArticleURL;" preference="extensions.zotero.export.citePaperJournalArticleURL" native="true" aria-describedby="export-citePaperJournalArticleURL"/>
<!-- This doesn't wrap without an explicit width, for some reason -->
<label id="export-citePaperJournalArticleURL" width="45em">
&zotero.preferences.export.citePaperJournalArticleURL.description;
</label>
</groupbox>
<groupbox>
<groupbox aria-label="&zotero.general.tools;">
<label><html:h2>&zotero.general.tools;</html:h2></label>
<hbox>
@ -69,7 +69,7 @@
</hbox>
</groupbox>
</vbox>
<vbox class="main-section" id="wordProcessors">
<vbox class="main-section" id="wordProcessors" aria-label="&zotero.preferences.cite.wordProcessors;" role="group">
<html:h1>&zotero.preferences.cite.wordProcessors;</html:h1>
<vbox id="wordProcessorInstallers"/>

View file

@ -24,7 +24,7 @@
-->
<vbox id="zotero-prefpane-export" onload="event.waitUntil(Zotero_Preferences.Export.init())">
<groupbox id="zotero-prefpane-export-groupbox">
<groupbox id="zotero-prefpane-export-groupbox" aria-label="&zotero.preferences.quickCopy.caption;" aria-describedby="quickCopy-instructions quickCopy-citationInstructions">
<vbox>
<label><html:h2>&zotero.preferences.quickCopy.caption;</html:h2></label>
</vbox>

View file

@ -24,7 +24,7 @@
-->
<vbox id="zotero-prefpane-general" onload="Zotero_Preferences.General.init()">
<vbox class="main-section">
<groupbox>
<groupbox aria-label="&zotero.preferences.interface;">
<label><html:h2>&zotero.preferences.interface;</html:h2></label>
<hbox align="center">
@ -80,7 +80,7 @@
</vbox>
</groupbox>
<groupbox id="zotero-prefpane-file-handling-groupbox">
<groupbox id="zotero-prefpane-file-handling-groupbox" aria-label="&zotero.preferences.fileHandling;">
<label><html:h2>&zotero.preferences.fileHandling;</html:h2></label>
<vbox>
@ -101,18 +101,18 @@
</groupbox>
<groupbox id="zotero-prefpane-file-renaming-groupbox">
<label><html:h2 data-l10n-id="preferences-file-renaming-title"/></label>
<groupbox id="zotero-prefpane-file-renaming-groupbox" aria-labelledby="preferences-file-renaming-title" aria-describedby="preferences-file-renaming-intro">
<label><html:h2 id="preferences-file-renaming-title" data-l10n-id="preferences-file-renaming-title"/></label>
<vbox align="start">
<label data-l10n-id="preferences-file-renaming-intro"/>
<label id="preferences-file-renaming-intro" data-l10n-id="preferences-file-renaming-intro"/>
<separator class="thin"/>
<checkbox data-l10n-id="preferences-file-renaming-auto-rename-files"
preference="extensions.zotero.autoRenameFiles"
oncommand="setTimeout(() => Zotero_Preferences.General.updateAutoRenameFilesUI())" native="true"
/>
<vbox class="indented-pref">
<label data-l10n-id="preferences-file-renaming-file-types"/>
<vbox class="indented-pref" aria-labelledby="preferences-file-renaming-file-types" role="group">
<label id="preferences-file-renaming-file-types" data-l10n-id="preferences-file-renaming-file-types"/>
<hbox
id="zotero-prefpane-file-renaming-file-types-box"
class="indented-pref"
@ -159,8 +159,8 @@
</vbox>
</groupbox>
<groupbox id="zotero-prefpane-reader-groupbox">
<label><html:h2 data-l10n-id="preferences-reader-title"/></label>
<groupbox id="zotero-prefpane-reader-groupbox" aria-labelledby="preferences-reader-title">
<label><html:h2 id="preferences-reader-title" data-l10n-id="preferences-reader-title"/></label>
<vbox class="fileHandler-menus">
<label control="fileHandler-pdf">&zotero.preferences.fileHandler.openPDFsUsing;</label>
@ -233,10 +233,10 @@
/>
</groupbox>
<groupbox id="zotero-prefpane-locate-groupbox">
<groupbox id="zotero-prefpane-locate-groupbox" aria-label="&zotero.preferences.prefpane.locate;" aria-describedby="preferences-locate-library-lookup-intro">
<label><html:h2>&zotero.preferences.prefpane.locate;</html:h2></label>
<label data-l10n-id="preferences-locate-library-lookup-intro"/>
<label id="preferences-locate-library-lookup-intro" data-l10n-id="preferences-locate-library-lookup-intro"/>
<separator class="thin"/>
<hbox align="center">
@ -263,7 +263,7 @@
</groupbox>
<groupbox id="zotero-prefpane-miscellaneous-groupbox">
<groupbox id="zotero-prefpane-miscellaneous-groupbox" aria-label="&zotero.preferences.miscellaneous;">
<label><html:h2>&zotero.preferences.miscellaneous;</html:h2></label>
<checkbox label="&zotero.preferences.automaticTags;" preference="extensions.zotero.automaticTags" native="true"/>
@ -274,7 +274,7 @@
</hbox>
</groupbox>
<groupbox>
<groupbox aria-label="&zotero.preferences.groups;" aria-description="&zotero.preferences.groups.whenCopyingInclude;">
<label><html:h2>&zotero.preferences.groups;</html:h2></label>
<label value="&zotero.preferences.groups.whenCopyingInclude;"/>

View file

@ -25,7 +25,7 @@
<vbox id="zotero-prefpane-sync" onload="Zotero_Preferences.Sync.init()">
<vbox class="main-section">
<vbox id="sync-unauthorized">
<groupbox>
<groupbox aria-label="&zotero.preferences.sync.syncServer;">
<label><html:h2>&zotero.preferences.sync.syncServer;</html:h2></label>
<hbox>
@ -66,7 +66,7 @@
</vbox>
<vbox id="sync-authorized" hidden="true">
<groupbox>
<groupbox aria-label="&zotero.preferences.sync.syncServer;">
<label><html:h2>&zotero.preferences.sync.syncServer;</html:h2></label>
<html:div class="form-grid">
@ -74,6 +74,7 @@
<hbox>
<label id="sync-username" value="Username"/>
<button label="&zotero.preferences.sync.unlinkAccount;"
aria-describedby="sync-username"
oncommand="Zotero_Preferences.Sync.unlinkAccount()"/>
</hbox>
@ -101,7 +102,7 @@
</groupbox>
<groupbox id="storage-settings">
<groupbox id="storage-settings" aria-label="&zotero.preferences.sync.fileSyncing;">
<label><html:h2>&zotero.preferences.sync.fileSyncing;</html:h2></label>
<!-- My Library -->
@ -215,8 +216,8 @@
<vbox id="storage-terms">
<hbox style="margin-top: .4em; display: block" align="center">
<label>&zotero.preferences.sync.fileSyncing.tos1;</label>
<label is="zotero-text-link" href="https://www.zotero.org/support/terms/terms_of_service" value="&zotero.preferences.sync.fileSyncing.tos2;"/>
<label id="preferences_storage_terms" >&zotero.preferences.sync.fileSyncing.tos1;</label>
<label is="zotero-text-link" href="https://www.zotero.org/support/terms/terms_of_service" value="&zotero.preferences.sync.fileSyncing.tos2;" aria-describedby="preferences_storage_terms"/>
<label>&zotero.preferences.period;</label>
</hbox>
</vbox>
@ -224,7 +225,7 @@
</vbox>
</vbox>
<vbox class="main-section" id="sync-reset" align="start">
<vbox class="main-section" id="sync-reset" align="start" aria-label="&zotero.preferences.sync.reset;" role="group">
<html:h1>&zotero.preferences.sync.reset;</html:h1>
<button label="&zotero.preferences.sync.reset.showResetOptions;" oncommand="Zotero_Preferences.navigateToPane('zotero-subpane-reset-sync')"
data-search-strings="