The skip to main content link is missing a visible focus outline in forced color mode

at first apologies @avanibhut2706 for the late reply, the notification for this issue slipped through. :( and thank you for working on the MR! I've taken a look at MR14245, a few observations:

Looking at the screenshot in #7 the newly darkish "dirty" outline color makes me wonder what settings are you using in the render tab in chrome or edge? is it possible that you have checked the "enable automatic dark mode" checkbox? that causes some odd color display. it is necessary to either:

• leave the "enable automatic dark mode" checkbox unticked, choose prefers-color-scheme: dark on the emulate CSS media feature prefers-color-scheme, forced -color:active on emulate CSS media feature forced-colors and prefers-contrast:more on Emulate CSS medai feature prefers-contras
• or within the edge settings (in chrome i am not sure if those exist) go to Appearance and within the Page colors section choose one of the themes in the page colors select.

I went with the first approach for testing and get:

that way it doesnt really look like an outline but rather sort of a background color plus it uses a different system color than for the focus (check out mr-skip.mp4). from my perspective it would be enough to simply show the focus outline in the system color of blue with the same width like for the rest of the focusable items.

re @dcam good point. i thought i would have already created a dedicated issue for olivero but after rechecking i have not. so yeah that needs the visible focus outline as well thank you! and yeah that could happen within this issue as well, no objection. except olivero probably needs some additional thought and adjustments. for one in olivero the skip link spans across the entire horizontal viewport as a black bar in regular mode. that is probably not necessary in forced color mode and the visual presentation of the skip link could be handled like in claro, after the bar isnt visible anyway. the only problem that needs also some adjustment in general is the position of the skip to link on user profile pages:

oh and one more thing. while reviewing i've already noticed a few regressions in forced color mode in general since i last worked on #3438477: High contrast mode needs some more refinement that recently got in. none of those were related to the skip link. so i was worried recent commits had introduced already regressions (but i havent looked at the diff itself only did an initial manual test). so after finishing my comment ive checked out the main branch and i wanted to dig in when those regressions got introduced but they were gone again. so i looked a bit closer at the diff of this MR and it looks like the scope is a bit broad and it is breaking many other elements on the page in forced color mode:

@media (forced-colors: active) {
    border: solid 1px transparent;
    background: linktext;
}