fix(odyssey-react): accessible focus states for Dismiss Button

okta · Apr 8, 2022 · fc7546d · fc7546d
1 parent 95ea4af
commit fc7546d
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 16 deletions.
diff --git a/packages/odyssey-react/src/components/Button/Button.module.scss b/packages/odyssey-react/src/components/Button/Button.module.scss
@@ -124,14 +124,9 @@
   color: var(--DismissTextColor);
   line-height: var(--DismissLineHeight);
 
-  &:hover {
-    border-color: var(--DismissHoverBorderColor);
-    background-color: var(--DismissHoverBackgroundColor);
-  }
-
+  &:hover,
   &:focus {
-    background-color: var(--DismissFocusBackgroundColor);
-    box-shadow: 0 0 0 2px;
+    background-color: rgba(var(--DismissHoverBackgroundColor), var(--DismissHoverBackgroundOpacity));
   }
 
   &:disabled {
@@ -141,16 +136,9 @@
 
   .icon {
     display: block;
-    margin-block-start: 0.0625em;
-    margin-block-end: -0.0625em;
-    line-height: 0.9;
   }
 }
 
-.dismissInvertedVariant:focus {
-  box-shadow: 0 0 0 2px var(--DismissInvertedBoxShadowColor);
-}
-
 .clearVariant {
   background-color: var(--ClearBackgroundColor);
   color: var(--ClearTextColor);

diff --git a/packages/odyssey-react/src/components/Button/Button.theme.ts b/packages/odyssey-react/src/components/Button/Button.theme.ts
@@ -72,13 +72,13 @@ export const theme: ThemeReducer = (theme) => ({
 
   // Dismiss Variant
   DismissBackgroundColor: "transparent",
-  DismissHoverBorderColor: "transparent",
   DismissTextColor: "inherit",
   DismissDisabledTextColor: theme.ColorNeutralBase,
   DismissLineHeight: 1,
   DismissPaddingBlock: theme.SpaceScale0,
   DismissPaddingInline: theme.SpaceScale0,
-  DismissHoverBackgroundColor: "rgba(255, 255, 255, 0.6)",
+  DismissHoverBackgroundColor: "29, 29, 33",
+  DismissHoverBackgroundOpacity: 0.1,
   DismissFocusBackgroundColor: "rgba(255, 255, 255, 0.6)",
   DismissDisabledBackgroundColor: "rgba(235, 235, 237, 0.6)",