High contrast mode needs some more refinement

forgot the mobile viewport. made a few additions to the issue summary

no all those three settings were set within ms edge (@mherchel provided the instructions for this handy feature testing high contrast mode a while ago on slack if i remember correctly). you have to add the Rendering tab either to the quick view or move it to the activity bar on top in the ms edge devtools:

and i then only set and adjust those three settings highlighted:

thanks for getting some momentum back into this issue @kentr!

re #21 yep in regard to point 4 i agree, good catch. just retested without the automatic dark mode and the hover looks totally fine and clearly visible to me. on the other hand the active menu item for the current site is close to invisible, but that has already an issue for the none forced color mode (#3426468: Make the active menu item visually stand out more). so i wonder about two things, should the forced color mode with the active menu item be fixed in the aforementioned issue or within the scope of this issue? and in regard to updating the issue summary, instead of removing point 4 i wonder would it be the better choice to strike it through and leave a note. that way the references of the others points after the current point 4 wouldnt have to be updated throughout the comments?

in regard to point 6 in the issue summary. i have to admit writing up that issue was a while ago and the issue summary also got updated by other people. not sure i did point 8 back then, that was probably added afterwards by someone else? in regard to point 6, that screenshot was taken with the automatic dark mode checkbox ticked and as outlined it was about the barely visible hamburger icon AND the missing top bar border. you were unable to distinguish what is the page and what is the top bar. but looking at the site without the automatic forced color mode active the issue about distinguishing the top bar due to a not visible border is not an issue without the automatic forced color mode. or wait i was too hasty. the missing top bar border is still an issue for desktop viewports! there it is missing while it is visible for the mobile view port. maybe point 6 should be rescoped to the not visible bottom border in desktop view port and point 8 should be solely about the hamburger. that way the two images used are more appropriate? if you agree i can update both points in a follow up comment.

re #22 yep i've noticed that as well now. in your example you are referring to the icon in the top bar on a user profile page but the invisible icon also applies to node edit forms. they are using the same image there as well. and the gap i am also still experiencing for the mobile view port in edge.

made the following changes to the issue summary

• striked point 4 as outdated and added a note
• rescoped point 6, making it about the missing bottom border on the desktop view port
• added point 10, about the invisible icon @kentr raised in #22

and there is one more potential detail that could be added to the issue summary, the background color for the workspace is not displayed in forced color mode. in "regular" mode you have a green background for the workspace that is live while all the other none live workspaces have an orange background (SC1.4.1 might apply here?). in addition to that the yellow font color used on the live workspace implies that it would lead to a page but strictly speaking just an area on top of the current page is displayed.

that looks fab and really close! as already mentioned on slack i really liked the additional testing instructions you've provided as well as the youtube video as a linkable resource to others to quickly illustrate how to test forced color mode. i've then went ahead and manually tested in edge. I've noticed a few minor details that might require some more work (some might be out of scope) but overall this look really close:

point 5 from the issue summary still requires work. (using dark color scheme with forced color active and prefers contrast set to more)

i guess the easiest would be by simply adding an outline to the tooltip in forced color mode - the inverting background color pattern wouldn't be viable nor solvable across the possible different forced color choices imho. for regular mode the tooltip uses a dark dark background inverting the white background for example.

point 10 from the issue summary also requires work. the icon in the top bar is not visible for every default page color theme. for some light color themes it is visible but for the dark variants it is completely invisible:

Dusk (settings -> accessibility - page colors)

Desert (settings -> accessibility - page colors)

Night Sky (settings -> accessibility - page colors)

Aquatic (settings -> accessibility - page colors)

White (settings -> accessibility - page colors)

dark color scheme with forced colors active and prefers contrast more in devtools (page colors are off in the accessibility settings)

Out of scope for this issue, but one detail that is highlighted again in the examples for point 10 in forced color, is the need to increase at least the size of the dots on the more actions button ( see #3540337: Improve visibility of More actions menu button). The dots are shown in the correct color across the different page color choices but they are barely visible nor noticeable.

Also out of the scope for this issue, and I am uncertain if there is already an issue for that (i "thiiiiink" there might be, but was unable to find it yet), with the navigation sidebar collapsed you are able to tab through the top level menu items of the sidebar. so you have several tab presses with no visible focus outline (see focus.mp4)

One additional detail I've noticed, the Skip to main content link is missing a visible focus outline while in regular mode the focus outline is visible:

tooltip looks good now:

thank you!

i can confirm that the last open issue, point 10 from the issue summary, is fixed now as well:

and while testing with the navigation sidebar collapsed by accident in forced color mode i've noticed one other issue i've raised in the dicussion with @mherchel on slack. in the expanded sidebar the labels of top level menu item with a submenu and those without have different colors while the all the icons employ the same color.

So color is conveying additional meaning that is lost in the collapsed state:

with the recent changes by @mherchel icons are using the appropriate colors:

In regard to the focus related issues i've agreed with mike on the following. the "skip to main content" link is not styled in the navigation module but the admin theme and should therefore be fixed in claro in a followup issue. same for the dotted focus outlines, those should also be fixed in a followup issue in the claro queue.

and thanks to @kentr for digging up the correct issue! i knew that there was one. was away from the issue queue for too long the last few months. so for the tabable top-level menu items in the collapsed mobile menu the followup is #3541910: Elements in closed sidebar are focusable. so the navigation sidebar and the top level sidebar look good to go in forced color mode. i will update the issue summary tomorrow.

updated the steps to reproduce section and striked every issue that isn't reproducible in 11.x anymore and add the additional problem that surfaced in #42. will add before and after screenshots for the remaining issue in my next comment.

i was over eager, reverted the striking of point 6, it still applies on the desktop viewport. aside that i'Ve added a user interface changes section to the issue summary with before and after screenshots for easier review.

Finally finished writing up the two followup issues.

#3565271: The skip to main content link is missing a visible focus outline in forced color mode
#3565294: Increase the contrasting area of focus outlines in forced color mode

plus the issue @kentr linked:

#3541910: Elements in closed sidebar are focusable

not sure if it is enough to link them as related followups or if all three should be also added to the issue summary? the only open question as discussed on slack is the question how to label the current page in the navigation sidebar.

i've asked for feedback by @kentr and @mgifford in regard of the latest changes about how to label the current page in forced color mode and if it is a reasonable approach to solve this problem - everyone agreed. So I've updated the issue summary, and added how to label the current page as point 12. Overall this issue looks ready to go. Per the discussion with @mherchel i'll set it to RTBC. and also thanks again to @mherchel for all the work over last days pushing this issue to the finish line!