mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

special handling for tabbox focus-ring (#4761)

Browse source 
Set focusring on the child hbox, instead of the actual tab.
The hbox is the element with visibly rounded corners,
so this way the focus-ring will have the right shape.

Fixes: #4744
This commit is contained in:
abaevbog 2024-10-16 22:19:17 -07:00 • committed by GitHub
parent ae101f5393
commit 4c68f834c1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 20 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
scss/mac/_tabbox.scss
View file

@ -88,6 +88,16 @@ tabbox {
}
}
}
// focus-ring if tabbox is not marked as clicked (to avoid blinking)
&:not([clicked]) tab:focus-visible {
outline: none;
// box-shadow should appear around hbox with rounded corners
hbox {
box-shadow: 0 0 0 var(--width-focus-border) -moz-mac-focusring !important;
z-index: 1;
}
}
}
tabpanels {
appearance: none;

6
scss/scaffold.scss
View file

@ -213,9 +213,3 @@ browser,
}
}
}
// show focusring only during keyboard navigation
#tabs:not([clicked]) tab:focus-visible {
outline: none;
box-shadow: 0 0 0 var(--width-focus-border) var(--color-focus-border);
}

12
scss/win/components/_tabbox.scss
View file

@ -35,8 +35,6 @@ tabbox {
border-inline-end: 1px solid var(--fill-quinary);
}
@include focus-ring;
.tab-middle {
outline: none !important;
padding: 4px 11px 5px 11px;
@ -55,6 +53,16 @@ tabbox {
}
}
}
// focus-ring if tabbox is not marked as clicked (to avoid blinking)
&:not([clicked]) tab:focus-visible {
outline: none;
// outline should appear around hbox with rounded corners
hbox {
outline: var(--color-focus-outer-border) solid var(--width-focus-outer-border) !important;
z-index: 1;
}
}
}
tabpanels {
appearance: none;