|
9 | 9 | word-spacing: inherit !important; |
10 | 10 | line-height: inherit !important; |
11 | 11 | } |
| 12 | + |
| 13 | + /* WCAG 1.4.13: Make tooltip content hoverable with the mouse pointer. |
| 14 | + Primer's .tooltipped uses pointer-events:none on the ::after pseudo- |
| 15 | + element and a 6px margin gap between the trigger and the tooltip. |
| 16 | + This makes it impossible to hover the tooltip content itself. |
| 17 | +
|
| 18 | + Fix: re-enable pointer-events and replace the directional margin with |
| 19 | + a transparent border so the hover hit-area is contiguous while the |
| 20 | + visual appearance is unchanged. */ |
| 21 | + &::after { |
| 22 | + pointer-events: auto !important; |
| 23 | + } |
| 24 | + &.tooltipped-nw::after, |
| 25 | + &.tooltipped-n::after, |
| 26 | + &.tooltipped-ne::after { |
| 27 | + margin-bottom: 0 !important; |
| 28 | + border-bottom: 6px solid transparent; |
| 29 | + } |
| 30 | + &.tooltipped-sw::after, |
| 31 | + &.tooltipped-s::after, |
| 32 | + &.tooltipped-se::after { |
| 33 | + margin-top: 0 !important; |
| 34 | + border-top: 6px solid transparent; |
| 35 | + } |
| 36 | + &.tooltipped-w::after { |
| 37 | + margin-right: 0 !important; |
| 38 | + border-right: 6px solid transparent; |
| 39 | + } |
| 40 | + &.tooltipped-e::after { |
| 41 | + margin-left: 0 !important; |
| 42 | + border-left: 6px solid transparent; |
| 43 | + } |
12 | 44 | } |
13 | 45 |
|
14 | 46 | /* Enhanced focus indicators for high contrast mode */ |
|
0 commit comments