fix(a11y): improve btns high contrast mode (#259)

* Add a border to editor buttons in HC mode

* Invert md switcher icon color when selected; fix hover

* giamir refactor

* Use disabled attr instead of .is-disabled

* Simplify btn CSS overrides further; add

Note: looks like --editor-button-border-color is never referenced and is cruft left over from when it was used to alter styles within the editor codebase (it was never exposed as an API) 3568f81

* Update test to check for disabled attribute

* Revert "Update test to check for disabled attribute"

This reverts commit 3b3501f.

* Revert "Simplify btn CSS overrides further; add"

This reverts commit eec2b68.

* Revert "Use disabled attr instead of .is-disabled"

This reverts commit 9134205.

---------

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

src/shared/menu/helpers.ts

@@ -121,7 +121,7 @@ export function makeMenuLinkEntry(
     key: string
 ): MenuItem {
     const dom = document.createElement("a");
-    dom.className = `s-editor-btn s-btn flex--item js-editor-btn js-${key}`;
+    dom.className = `s-editor-btn s-btn s-btn__muted flex--item js-editor-btn js-${key}`;
     dom.href = href;
     dom.target = "_blank";
     dom.title = title;
@@ -239,7 +239,7 @@ export function makeMenuButton(
     cssClasses?: string[]
 ): HTMLButtonElement {
     const button = document.createElement("button");
-    button.className = `s-editor-btn s-btn js-editor-btn js-${key}`;
+    button.className = `s-editor-btn s-btn s-btn__muted js-editor-btn js-${key}`;
 
     if (cssClasses) {
         button.classList.add(...cssClasses);

src/styles/custom-components.css

@@ -94,24 +94,19 @@
 
 .s-btn.s-editor-btn {
     border-radius: var(--br-sm);
-    color: var(--black-500) !important;
     padding: var(--su2);
 }
 
-.s-btn.s-editor-btn:not(.s-btn__outlined) {
-    border-color: transparent !important;
+.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;
+    color: var(--black-600) !important;
 }
 
 .s-btn.s-editor-btn:focus {
     box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
 }
 
-.s-btn.s-editor-btn:hover,
-.s-btn.s-editor-btn:focus {
-    background-color: var(--theme-secondary-200) !important;
-    color: var(--black-600) !important;
-}
-
 .s-btn.s-editor-btn.is-selected,
 .s-btn.s-editor-btn:active {
     background-color: var(--theme-secondary-200) !important;