vpat 3: make "-"" btn focusable even if hidden (#4053)

In libraries, notes and tags boxes, do not hide the actual
"-" toolbarbutton, hide the <image> inside of it. Visually,
it looks the same but the button can be focused via tab
without having to expicitly make it visible. It means that
shift-tab from the section header will not skip the "-" button.

Also, make "remove" toolbarbutton from tagsbox focusable like all
others for consistency.
This commit is contained in:
abaevbog 2024-06-05 23:13:26 -05:00 committed by GitHub
parent 70d52277b1
commit 5a45717270
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 14 additions and 8 deletions

View file

@ -189,9 +189,9 @@
if (this.editable) { if (this.editable) {
var remove = document.createXULElement("toolbarbutton"); var remove = document.createXULElement("toolbarbutton");
remove.setAttribute('value', '-');
remove.setAttribute('class', 'zotero-clicky zotero-clicky-minus'); remove.setAttribute('class', 'zotero-clicky zotero-clicky-minus');
remove.setAttribute('tabindex', -1); remove.setAttribute('tabindex', 0);
remove.setAttribute("data-l10n-id", 'section-button-remove');
} }
var row = document.createElement("div"); var row = document.createElement("div");

View file

@ -44,11 +44,13 @@ libraries-collections-box {
toolbarbutton { toolbarbutton {
margin-inline-start: auto; margin-inline-start: auto;
visibility: hidden;
border-radius: 2px; border-radius: 2px;
& > image {
visibility: hidden;
}
} }
&:is(:hover, :focus-within) toolbarbutton { &:is(:hover, :focus-within) toolbarbutton > image {
visibility: visible; visibility: visible;
} }
} }

View file

@ -34,10 +34,12 @@ notes-box, related-box {
toolbarbutton { toolbarbutton {
margin-inline-start: auto; margin-inline-start: auto;
visibility: hidden; & > image {
visibility: hidden;
}
} }
&:is(:hover, :focus-within) toolbarbutton { &:is(:hover, :focus-within) toolbarbutton > image{
visibility: visible; visibility: visible;
} }
} }

View file

@ -67,10 +67,12 @@ tags-box {
toolbarbutton { toolbarbutton {
margin-inline-start: auto; margin-inline-start: auto;
visibility: hidden; & > image {
visibility: hidden;
}
} }
&:is(:hover, :focus-within) toolbarbutton { &:is(:hover, :focus-within) toolbarbutton > image {
visibility: visible; visibility: visible;
} }
} }