Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[UI] Avoid to have buttons in hover state after having been clicked (bug 836732)

Browse Source 
- it aims to fix https://bugzilla.mozilla.org/show_bug.cgi?id=836732;
 - replace :focus by :focus-visible for the buttons in the UI, according to the docs:
   - https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
   - the button has the focus-visible state when it has been focused with the keyboard
This commit is contained in:
Calixte Denizet 2022-01-30 16:10:32 +01:00
parent 7a034706ba
commit 7dda85654e
1 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/viewer.css
View File

@ -559,7 +559,7 @@ html[dir="rtl"] .findbar .splitToolbarButton > .findNext {
}
.findbar label:hover,
.findbar input:focus + label {
.findbar input:focus-visible + label {
color: var(--toggled-btn-color);
background-color: var(--button-hover-color);
}
@ -753,12 +753,12 @@ html[dir="rtl"] .splitToolbarButton > .toolbarButton {
}
.overlayButton:hover,
.overlayButton:focus {
.overlayButton:focus-visible {
background-color: var(--overlay-button-hover-bg-color);
}
.overlayButton:hover > span,
.overlayButton:focus > span {
.overlayButton:focus-visible > span {
color: var(--overlay-button-hover-color);
}
@ -780,10 +780,10 @@ html[dir="rtl"] .splitToolbarButton > .toolbarButton {
}
.splitToolbarButton > .toolbarButton:hover,
.splitToolbarButton > .toolbarButton:focus,
.splitToolbarButton > .toolbarButton:focus-visible,
.dropdownToolbarButton:hover,
.toolbarButton.textButton:hover,
.toolbarButton.textButton:focus {
.toolbarButton.textButton:focus-visible {
background-color: var(--button-hover-color);
z-index: 199;
}
@ -847,11 +847,11 @@ html[dir="rtl"] #toolbarViewerLeft > .toolbarButton:first-child {
margin-right: 2px;
}
.toolbarButton:hover,
.toolbarButton:focus {
.toolbarButton:focus-visible {
background-color: var(--button-hover-color);
}
.secondaryToolbarButton:hover,
.secondaryToolbarButton:focus {
.secondaryToolbarButton:focus-visible {
background-color: var(--doorhanger-hover-bg-color);
color: var(--doorhanger-hover-color);
}
@ -917,7 +917,7 @@ html[dir="rtl"] .dropdownToolbarButton > select {
padding-right: 4px;
}
.dropdownToolbarButton > select:hover,
.dropdownToolbarButton > select:focus {
.dropdownToolbarButton > select:focus-visible {
background-color: var(--button-hover-color);
color: var(--toggled-btn-color);
}
@ -959,7 +959,7 @@ html[dir="rtl"] .dropdownToolbarButton > select {
}
.dropdownToolbarButton:hover::after,
.dropdownToolbarButton:focus::after,
.dropdownToolbarButton:focus-visible::after,
.dropdownToolbarButton:active::after {
background-color: var(--toolbar-icon-hover-bg-color);
}
@ -971,9 +971,9 @@ html[dir="rtl"] .dropdownToolbarButton > select {
}
.toolbarButton:hover::before,
.toolbarButton:focus::before,
.toolbarButton:focus-visible::before,
.secondaryToolbarButton:hover::before,
.secondaryToolbarButton:focus::before {
.secondaryToolbarButton:focus-visible::before {
background-color: var(--toolbar-icon-hover-bg-color);
}