Make "Get additional styles…" link in Style Manager keyboard accessible (#4709)

Fixes: #4707
This commit is contained in:
abaevbog 2024-09-26 11:21:51 -07:00 committed by GitHub
parent c59c8cbffe
commit 3ffe736d99
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 15 additions and 1 deletions

View file

@ -175,7 +175,7 @@
<div class="style-selector-wrapper">
<xul:style-selector id="style-selector" value="${this.getAttribute('style') || Zotero.Prefs.get('export.lastStyle') || ''}" />
</div>
<label id="manage-styles" class="text-link" data-l10n-id="bibliography-manageStyles-label"></label>
<label id="manage-styles" tabindex="0" role="link" class="text-link" data-l10n-id="bibliography-manageStyles-label"></label>
</div>
<div class="locale-selector-wrapper">
<label for="locale-selector" class="locale-selector-label" data-l10n-id="bibliography-locale-label" />
@ -267,6 +267,14 @@
const event = new CustomEvent("manage-styles");
this.dispatchEvent(event);
});
// Click manage-styles link on space or enter. Otherwise, Enter would submit the dialog
// and space would do nothing.
this.querySelector('#manage-styles').addEventListener('keypress', (event) => {
if (event.key == 'Enter' || event.key == ' ') {
event.preventDefault();
event.target.click();
}
});
}
handleStyleChanged(style) {

View file

@ -22,6 +22,12 @@
width: 105px;
}
/* Get additional styles link should occupy only as much space as needed */
#styleManager-buttons .zotero-text-link {
max-width: fit-content;
margin-right: auto;
}
#openCSLEdit, #styleManager-delete {
margin-inline-end: 6px;
}