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:
parent
70d52277b1
commit
5a45717270
4 changed files with 14 additions and 8 deletions
|
@ -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");
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue