:focus indicator not visually distinct in ui dialog in Bartik, Seven, Classy

Review of patch #8:

+/* Add outline for accessibility */
+.ui-dialog input:focus,
+.ui-dialog select:focus,
+.ui-dialog textarea:focus {
+  outline: 1px dotted #2f2f2f;
+  outline-offset: 2px;
+}
+

Why so many selectors here? Won't a :focus pseudoclass be enough, without specifying it 3 times for different element types?

What about buttons and links?

We can directly use like below if we want to consider accessibility focus on all elements.

*:focus {
  outline: 1px dotted #2f2f2f;
  outline-offset: 2px;
}

and if we considering ui-dialog & it's element only then we can use below,

.ui-dialog *:focus {
  outline: 1px dotted #2f2f2f;
  outline-offset: 2px;
}

Feel free to add your opinion.

Thanks!

Re-roll the patch for 9.x.1 as per above comments. Outline is added only for ui-dialog as of know. Please review the same.

please review the patch.

This patch works good to me . On using tab, Outline is added for ui-dialog in Bartik and Seven .

Re-roll patch 9.2.x.

Hi, I've tested the patch on #23. Rather than the custom commands failure(I think it's a random failure, anyway need more clarification!), It works correctly as per the requirements on the drupal 9.2.x-dev environment. I'm attaching the screenshots below.

Before,

After,

Need more clarification for the custom commands failure. Here, it is shown like this,

Otherwise RTBC+1

I have provided the patch, please verify if it working or not.

Verified and tested patch#25 for drupal 9.3.x-dev version. Patch applied successfully and looks good to me.Adding screenshot for the reference.thanks @Gauravmahlawat.

#28 Fixed Custom Commands Failed.

Verified and tested patch #28.
Patch applied successfully and looks good to me.

Testing Steps:
# Apply Bartik theme -> admin/appearance
# Goto: admin/config/content/formats
# Click on Configure
# Add Image button into Active Toolbar
# Save configuration
# Goto: node/add/article
# Goto: Body field and click on Image button to insert the image
# Check the focus indicators on respective buttons

Expected Results:
# User should see square focus applied on respective buttons

Actual Results:
# User is not able to see focus indicators on buttons

Please refer attached screenshots.
Looks good to me.
Can be a move to RTBC.

CI is failing for the latest patch so moving back to needs work

Providing updated patch for Bartik theme.

Kindly review the patch.

Thanks!

I think this is a WCAG 2.4.11 issue.

Discussed with @larowlan, @seth-hilder and @tinarey. We suspected that the issue is with core as it occurs on all three themes mentioned. We found that 10.0.x have sufficient outlining for form fields in Claro and Olivero themes (see screenshots attached).

As a result we think this is only present in Bartik. Moving this issue to the Bartik queue as it is now a contrib module.

Tagging for WCAG 2.2
https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum