Improve the accessibility of focus outlines

More on focus outlines:

• https://www.sarasoueidan.com/blog/focus-indicators/
• https://hidde.blog/indicating-focus-to-improve-accessibility/

I'm working on this.

So I think this would help a lot:

.page-wrapper *:focus,.ui-dialog *:focus,.dropbutton .dropbutton__item > *:focus,.dropbutton .dropbutton__item > *:focus:hover,.dropbutton__items > .dropbutton__item:first-of-type > *:focus,.dropbutton__items > .dropbutton__item:first-of-type ~ .dropbutton__item > *:focus,.dropbutton__items > .dropbutton__item:first-of-type ~ .dropbutton__item > *:focus:hover,.form-boolean:focus:active,.form-boolean:focus:hover,.cke.cke_chrome.cke_focus,.horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button a:focus,.form-element:focus,.form-element:hover:focus,.form-element.error:hover:focus,.form-actions .action-link:focus,.paragraphs-tabs-wrapper .field-multiple-table .draggable.drag,.layout-paragraphs-field .layout-paragraphs-actions input.layout-paragraphs-edit:focus,.layout-paragraphs-field .layout-paragraphs-actions input.layout-paragraphs-remove:focus,.ck .ck.ck-button:active,.ck .ck.ck-button:focus,.ck .ck.ck-button:active:focus,.toolbar-box .toolbar-handle:focus,.field-option:has(.field-option-radio:checked),.field-option:focus-within,.subfield-option:has(.field-option-radio:checked),.subfield-option:focus-within,#edit-submit.form-submit:focus,.toolbar-dropdown__menu .toolbar-dropdown__link:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-background, #fff), 0 0 0 5px var(--gin-color-focus);
}

I don't know why it isn't there on hover as well. I do think this would assist mouse users.

We need to do more to enhance the forced colors mode here, especially as the radio button doesn't look like a radio button, but rather three different buttons:

@media (forced-colors: active) {
  *:focus {
    outline: 6px solid Highlight !important;
    outline-offset: 2px;
    box-shadow: none !important;
  }
}

I am also a fan of how the UK government does their focus styling. As an example of how that could be done.

:root {
  --gin-color-focus-text: #0b0c0c;         /* GOV.UK black */
  --gin-color-focus-background: #ffdd00;   /* GOV.UK yellow */
}

/* -----------------------------------
   GDS-inspired global focus styling
----------------------------------- */

*:focus-visible {
  outline: 3px solid rgba(0, 0, 0, 0); /* suppress default outline */
  color: var(--gin-color-focus-text);
  background-color: var(--gin-color-focus-background);
  box-shadow:
    0 -2px var(--gin-color-focus-background),
    0 4px var(--gin-color-focus-text);
  text-decoration: none;
  z-index: 10;
}

/* -----------------------------------
   Gin-specific Form Focus Styles
----------------------------------- */

/* Light/Dark/Auto radio selection */
[data-drupal-selector="edit-enable-darkmode"] .form-radios input:checked + .form-item__label {
  color: var(--gin-color-button-text);
  background-color: var(--gin-color-primary);
  box-shadow:
    0 -2px var(--gin-color-focus-background),
    0 4px var(--gin-color-focus-text);
}

/* Classic toolbar and layout density radios */
[data-drupal-selector="edit-classic-toolbar"] .form-radios .form-item input:checked:focus,
[data-drupal-selector="edit-layout-density"] .form-radios .form-item input:checked:focus {
  box-shadow:
    0 -2px var(--gin-color-focus-background),
    0 4px var(--gin-color-focus-text);
  background-color: var(--gin-color-focus-background);
  color: var(--gin-color-focus-text);
}

/* Checkboxes not inside known exception wrappers */
:not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) 
> .form-type--checkbox input:focus {
  box-shadow:
    0 -2px var(--gin-color-focus-background),
    0 4px var(--gin-color-focus-text);
  background-color: var(--gin-color-focus-background);
  color: var(--gin-color-focus-text);
}

/* Optional: input[type="radio"] and input[type="checkbox"] globally */
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
  box-shadow:
    0 -2px var(--gin-color-focus-background),
    0 4px var(--gin-color-focus-text);
  background-color: var(--gin-color-focus-background);
  color: var(--gin-color-focus-text);
}

/* -----------------------------------
   Forced Colors Mode (High Contrast)
----------------------------------- */
@media (forced-colors: active) {
  *:focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
    box-shadow: none !important;
    background-color: Highlight !important;
    color: HighlightText !important;
  }

  input[type="radio"]:checked + label,
  input[type="checkbox"]:checked + label {
    background-color: Highlight !important;
    color: HighlightText !important;
    font-weight: bold !important;
    border: 2px solid HighlightText !important;
    padding: 0.2em 0.5em !important;
  }
}

Some more observations on the colors in Gin.

There are 11 Accent colors, 4 different Focus colors, plus Dark/Light modes. That's a lot of combinations. Probably too many combinations to be able to provide good guidance.

Drupal Core should be providing a good example. We have as a community committed to striving to meet WCAG 2.2 AA standards. This is especially true of Core and Drupal CMS.

Light Mode:

• #0750E6 / #FFF
• #2E6DD0 / #FFF
• #4300BF / #FFF
• #5B00FF / #FFF
• #0F857F / #FFF - Fail (could we not just use #088488)
• #00875F / #FFF
• #D12E70 / #FFF
• #D8002E / #FFF
• #DA6303 / #FFF - Fail (Could we not just use #B56026)
• #111111 / #FFF

Dark Mode (Looks good):

• #90AEEF / #2A2A2D
• #82BFE8 / #2A2A2D
• #AD8FE8 / #2A2A2D
• #DBA5EF / #2A2A2D
• #00EAD0 / #2A2A2D
• #6BD4A1 / #2A2A2D
• #E79DA3 / #2A2A2D
• #EC8989 / #2A2A2D
• #F79576 / #2A2A2D
• #F1C970 / #2A2A2D
• #FFFFFF / #2A2A2D

I believe adding a space in the focus outline should make addressing this easier. We can state a white or dark inner circle before the focus outline color.

The WCAG Success Criterion 1.4.1 (Use of Color) in question.

The least 3:1 I think would just need to be the background.

LIght Mode

• Gin Focus color (Default) - #71B3FC / #FFFFFF - Failed (Could we not just use #5996EC)
• Green - #78C9BE / #FFFFFF - Failed (Could we not just use #58A19D)
• Claro Green - #85CBA8 / #FFFFFF - Failed (Could we not just use #739E8C)<
• Orange - #F4B39E / #FFFFFF - Failed (Could we not just use #709F87)
• Neutral - #A3A3A3 / #FFFFFF - Failed (Could we not just use #989494)
• Same as Accent color - See above
• Custom - N/A - we are restricting this to good defaults

Dark Mode

• Gin Focus color (Default) - #51A8FF / #2A2A2D
• Green - #16756B / #2A2A2D - Failed (Could we not just use #088174)
• Claro Green - #277852 / #2A2A2D - Failed (Could we not just use #1D834C)
• Orange - #A55C47 / #2A2A2D - Failed (Could we not just use #A85F4B)
• Neutral - #D8D8D9 / #2A2A2D
• Same as Accent color - See above
• Custom - N/A - we are restricting this to good defaults

WebAim also has this interesting Link Contrast Checker.