Indicate that grouping elements have child element errors for UX and a11y

Adding what this is postponed on to the remaining tasks per Remining tasks.

Probably the most useful thing in this AI generated .zip is the replicate_grouping_child_errors recipe. Yes, there's a patch and more than one readme. This is all postponed on other issues, so perhaps scanning over this patch might be useful to help build a more solid one. There are also Guidepup instructions (and a diff) to help with tracking the emulation of screen reader impacts before/after.

Testing color contrast for this one and it does fail AAA contrast with 1.4.6

Dark module this failures universally at all levels (AAA and AA).

Think we need to address those.

I've did another round of testing of the latest state of the MR. Referring to the points raised during the ux meeting @kentr summarized in #25 .

• The vertical icon alignment looks good now! Fab, thanks!
• In regard to the inconsistencies of the focus outline mainly in the context of the vertical tabs, i can second our conclusion from back then as well the assessement by @kentr in #25 , looking at it another time, the styling still has issue but those could be improved in a follow up. The contrasting area isnt going down to a degree in any of these scenarios that the element in focus isnt discernable anymore plus the current state of main without this MR is worse, way way worse. so a follow up is fine in this case from my point of view.
• In regard to forced colors mode i also agree with @kentr, there a bigger picture discussion has to happen. The current state of the MR is sort of tolerable but has more significant issues compared to focus outline ones. the top border in forced colors mode of the top vertical tab is visible and solid in forced color mode while in regular mode there is no top border. while in forced color and regular mode there is no bottom border for the vertical tab at the bottom. and all borders aside those two at top and bottom, no matter if active, erroneous, or in none active state have a solid border. that way it is impossible to distinguish between active and non active state easily, while in regular mode the non active state borders are way lighter. one option to solve that could be to make the borders for non active vertical tabs dotted in forced color mode. but all that could be done in a follow up, and does not necessarily have to happen within this issue.

The only sort of more serious problem that i've noticed and dawned on me where i am not sure it could be deferred to a follow up is the following. the color for errors in scenario 1 and 2 differs from the color from scenario 3. i am well aware to communicate something just based on color is against SC1.4.1 and that is the reason why the prohibition sign was added, but still the color is a visual cue for some people and that is why that cue should also be consistent in forced color imho:

scenario 1 (error in white)

scenario 2 (error in white)

scenario 3 - with no errors and the vertical tab on top active

scenario 3 - with three erroneous vertical tabs and the Welcome (awaiting approval) vertical tab active

scenario 3 - with three erroneous vertical tabs and the Account blocked vertical tab active

Based on coloring in scenario 1 and 2 the active vertical tab in scenario3-no_errors.jpg would be erroneous same as for example the active vertical tab in scenario3-account_blocked-active.jpg. in all cases the left thick border is white.

One detail to denote I forgot to add in the previous comment and I am uncertain if we touched that topic before. But in dark mode the red used for none text elements is the same red used for the labels of those erroneous elements. Problem is, the color contrast against both possible background colors in dark mode is each time < 4.5:1... And then there is also the problem that the default admin theme provides a red accent color which is quite close to the one for the error illustrated in both screenshots (the colors were only taken with the color picker).

The background for any non active erroneous vertical tab has a color contrast of 3.37:1 against its label

The background for any active erroneous vertical tab has a color contrast of 4.48:1 against its label

Update:
In light mode the accent color collides even more with the red of the error color, making the two hardly distinguishable.

I don't know how to solve the problem with the red accent color, though. I think that would already exist in main. This MR uses the pre-defined error color.

one option might be to simply drop the red accent color from the default admin theme. having an accent color that is that close to the color the theme uses for errors i consider inherently problematic (https://www.whocanuse.com/?bg=bb4d42&fg=c43336&fs=16&fw=). :/

I think the underlying problem is that there's not a system color for errors.

yep i know and i agree to. i've just raised that detail because having the same state with different colors on different pages is problematic. so having a "crude hack" to unify them for the time being until a consensus is reached for a proper fix was what i was implying - something like the CanvasText system color for vertical tabs what you suggested. for the "crude fix" it shouldnt have to make semantic sense but rather just accomplish consistency?

and about a system color for errors, ive already searched in online resources a while ago if there is some sort of documentation or best practice in that regard but i had no luck finding anything yet. will see maybe it would be possible to contact someone at the microsoft edge team or somehow related to pick their brains on that question. and again it would be super helpful if there would be some sort of best practice demo where you are able to see which system color is being used in which context best.

Yeah, I thought of that also but didn't think it would be well-received :-). It's worth pursuing, though

haha yep that might be the case but keeping it in as is might also not be the right choice. :( we will see how things turn out.

It might be helpful if you comment in #3625458: Form error text in dark mode has low contrast, because the color I used is a slightly lighter red that's probably even closer to the red accent color (based on just looking at your screenshot).

left a brief comment

i've found one regression. in dark mode on node edit forms in the advanced sidebar erroneous detail elements are missing a red top and bottom border. i've first noticed in edge and can confirm it in safari. in light mode both borders are in place.

aside that everything looks fab. ive also checked the changes in forced color mode in edge. now all three scenarios have the same color. even tough it makes now distinguishing active and erroneous vertical tabs tough - the prohibition sign is the sole visual cue, but the inconsistency inbetween the scenarios was way worse in comparison.

so with the borders in dark mode on node edit forms fixed i would vote for RTBC the issue. and while waiting for review i would also vote as ive already written on slack to create one or two follow ups for forced color mode. one for adding dotted top and bottom border lines for none active vertical tabs and ensure the vertical tab on top show a top border in regular and forced color mode and the vertical tab on the bottom the bottom border is shown in regular and forced color mode as well. and a separate issue to figure out a solution for the system color to use for errors. and probably another issue for dealing with the case a user chose red as their accent color.

I've retested the latest state of the MR in light and dark mode in RTL and LTR, and also rechecked forced color mode and reassured that the color for the error state is consistent across all three scenarios. Looks all good now as well as the issue summary is in proper shape, thanks to @kentr's effort! Setting it to RTBC.

There are three details we've agreed on to discuss and/or solve in follow-ups:

• The borders of vertical tabs should use dotted lines instead of solid lines to make the active vertical tab easier distinguishable from none active vertical tabs (#3631321: Improve the visual representation of none active vertical tabs in forced color mode)
• Try to figure out which system color to use for the error state - (#3631337: Decide how to semantically label HTML elements for errors/warnings in forced color mode)
• Figure out how to handle the visual similarity between the error color and the accent color red (#3631335: The red accent color is too close to the error color)

Would be good to link the follow-up items here when they are created @rkoller

Much appreciate the review.

yes that was the plan anyway. but created all three issues already now and updated #55 accordingly.