fix(controls): improve focus style to meet WCAG 2.2 AA (#267)

* fix(controls): improve focus style to meet WCAG 2.2 AA

Resolves https://stackoverflow.atlassian.net/browse/STACKS-542

* chore(deps): use new stacks classic rc and add 2.1.0 as peer dep

* chore(deps): lock the stacks classic range at the patch level (since sometimes there a small breaking changes in minor releases)

* chore(deps): update stacks classic version to 2.1.0

---------

Co-authored-by: Giamir Buoncristiani <giamir.buoncristiani@gmail.com>

package.json

@@ -50,6 +50,7 @@
         "@playwright/test": "^1.41.1",
         "@stackoverflow/commitlint-config": "^1.0.0",
         "@stackoverflow/prettier-config": "^1.0.0",
+        "@stackoverflow/stacks": "^2.1.0",
         "@stackoverflow/tsconfig": "^1.0.0",
         "@types/jest": "^29.5.11",
         "@typescript-eslint/eslint-plugin": "^6.19.1",
@@ -86,7 +87,6 @@
     "dependencies": {
         "@lezer/highlight": "^1.2.0",
         "@lezer/markdown": "^1.2.0",
-        "@stackoverflow/stacks": "^2.0.8",
         "@stackoverflow/stacks-icons": "^6.0.0",
         "@types/markdown-it": "13.0.7",
         "markdown-it": "^13.0.2",
@@ -106,6 +106,7 @@
         "prosemirror-view": "^1.32.7"
     },
     "peerDependencies": {
+        "@stackoverflow/stacks": "~2.1.0",
         "highlight.js": "^11.6.0"
     }
 }

src/shared/menu/helpers.ts

@@ -239,7 +239,7 @@ export function makeMenuButton(
     cssClasses?: string[]
 ): HTMLButtonElement {
     const button = document.createElement("button");
-    button.className = `s-editor-btn s-btn s-btn__muted js-editor-btn js-${key}`;
+    button.className = `s-editor-btn s-btn js-editor-btn js-${key}`;
 
     if (cssClasses) {
         button.classList.add(...cssClasses);

src/stacks-editor/editor.ts

@@ -351,13 +351,13 @@ export class StacksEditor implements View {
         const container = document.createElement("div");
         container.className = "flex--item d-flex ai-center ml24 fc-medium";
 
-        container.innerHTML = escapeHTML`<div class="s-btn-group s-btn-group--radio fw-nowrap">
+        container.innerHTML = escapeHTML`<div class="s-btn-group s-btn-group--radio fw-nowrap myn2">
     <input type="radio" name="mode-toggle-${this.internalId}"
         id="mode-toggle-rich-${this.internalId}"
         class="s-btn--radio js-editor-toggle-btn"
         data-mode="${EditorType.RichText}"
         ${richCheckedProp} />
-    <label class="s-btn s-btn__muted s-btn__outlined s-editor-btn px6"
+    <label class="s-btn s-btn__muted s-btn__outlined s-editor-btn"
         for="mode-toggle-rich-${this.internalId}"
         title="${_t("menubar.mode_toggle_richtext_title")}">
         <span class="svg-icon-bg iconRichText"></span>
@@ -371,7 +371,7 @@ export class StacksEditor implements View {
         data-mode="${EditorType.Commonmark}"
         data-preview="false"
         ${markCheckedProp} />
-    <label class="s-btn s-btn__muted s-btn__outlined s-editor-btn px6"
+    <label class="s-btn s-btn__muted s-btn__outlined s-editor-btn"
         for="mode-toggle-markdown-${this.internalId}"
         title="${_t("menubar.mode_toggle_markdown_title")}">
         <span class="svg-icon-bg iconMarkdown"></span>

src/styles/custom-components.css

@@ -6,53 +6,6 @@
     }
 }
 
-/* TODO UPSTREAM */
-.s-btn-group__radio {
-    display: flex;
-}
-
-/* TODO altered from upstream .s-btn-group>.s-btn */
-.s-btn-group__radio .s-btn:not(:last-of-type) {
-    margin-right: -1px;
-}
-
-.s-btn-group__radio .s-btn:not(:first-of-type):not(:last-of-type) {
-    border-radius: 0;
-}
-
-.s-btn-group__radio .s-btn:first-of-type:not(:only-of-type) {
-    border-bottom-right-radius: 0;
-    border-top-right-radius: 0;
-}
-
-.s-btn-group__radio .s-btn:last-of-type:not(:only-of-type) {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
-}
-
-.s-btn-group__radio input[type="checkbox"],
-.s-btn-group__radio input[type="radio"] {
-    display: none;
-}
-
-/* TODO extends .s-btn.is-selected and .s-btn-group>.s-btn.is-selected */
-:is(.s-btn-group__radio input[type="checkbox"]):checked + label.s-btn,
-:is(.s-btn-group__radio input[type="radio"]):checked + label.s-btn {
-    background: var(--theme-button-selected-background-color);
-    box-shadow: none;
-    color: var(--theme-button-selected-color);
-    z-index: var(--zi-selected);
-}
-
-:is(.s-btn-group__radio input[type="checkbox"]):focus + label.s-btn,
-:is(.s-btn-group__radio input[type="radio"]):focus + label.s-btn {
-    box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
-}
-
-.s-btn-group__radio .s-editor-btn {
-    --editor-button-border-color: currentColor;
-}
-
 .s-editor-shadow {
     transform-style: preserve-3d;
 }
@@ -98,17 +51,31 @@
 
 .s-btn.s-editor-btn {
     border-radius: var(--br-sm);
+    color: var(--black-500);
     padding: var(--su2);
 }
 
-.s-btn.s-editor-btn:hover:not(.s-btn-group .s-btn.s-editor-btn),
-.s-btn.s-editor-btn:focus:not(.s-btn-group .s-btn.s-editor-btn) {
-    background-color: var(--theme-secondary-200) !important;
+.s-btn.s-editor-btn:hover {
     color: var(--black-600) !important;
 }
 
-.s-btn.s-editor-btn:focus {
-    box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
+/*
+    NOTE: These focus-visible styles exist to override the Stacks styles for editor buttons.
+    Since the editor buttons require the focus rings to be applied outside of the button,
+    we need to override the Stacks styles, which place the rings within the button.
+*/
+.s-btn.s-editor-btn:not(.s-btn__link):not(.s-btn__unset):focus-visible {
+    border-color: transparent !important;
+    box-shadow: 0 0 0 var(--su-static2) var(--theme-secondary-400) !important;
+    color: var(--black-500) !important;
+    outline: var(--su-static2) solid transparent !important;
+}
+
+/* NOTE: Transparent focus background only applied when not hovered or in the selected state */
+.s-btn.s-editor-btn:not(.s-btn__link):not(.s-btn__unset):not(.is-selected):not(
+        :hover
+    ):focus-visible {
+    background-color: transparent !important;
 }
 
 .s-btn.s-editor-btn.is-selected,
@@ -117,8 +84,7 @@
     color: var(--theme-secondary-600) !important;
 }
 
-.s-btn.s-editor-btn.is-selected:hover,
-.s-btn.s-editor-btn.is-selected:focus {
+.s-btn.s-editor-btn.is-selected:hover {
     color: var(--theme-secondary-500) !important;
 }
 
@@ -130,6 +96,11 @@
     right: var(--su2);
 }
 
+.s-btn-group--radio .s-btn.s-editor-btn {
+    margin: calc(var(--su2) * -1) 0;
+    padding: var(--su4) var(--su6);
+}
+
 .s-editor--dropdown-item {
     padding: var(--su4) var(--su12);
 }