Merge pull request #104 from PaulGehin/focus-button

Focus indicator and accessibility-compliant contrast for buttons
InseeFrLab · Jul 3, 2023 · 0398988 · 0398988
2 parents 2128b1c + d36c9a7
commit 0398988
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "onyxia-ui",
-    "version": "0.56.0",
+    "version": "0.56.1",
     "description": "A uli toolkit, like material-ui but with stronger typing and more opinionated",
     "repository": {
         "type": "git",

diff --git a/src/Breadcrump.tsx b/src/Breadcrump.tsx
@@ -202,7 +202,7 @@ const { Section } = (() => {
                 ? {}
                 : {
                       "cursor": "pointer",
-                      "&:hover": {
+                      "&:hover, &:focus": {
                           "fontWeight": hoverFontWeight,
                           "color": theme.colors.useCases.typography.textPrimary,
                       },

diff --git a/src/Button.tsx b/src/Button.tsx
@@ -9,7 +9,7 @@ import MuiButton from "@mui/material/Button";
 import { capitalize } from "tsafe/capitalize";
 import { assert } from "tsafe";
 import type { Equals } from "tsafe/Equals";
-import { breakpointsValues } from "./lib/breakpoints";
+import { breakpointsValues } from "./lib";
 import { variantNameUsedForMuiButton } from "./lib/typography";
 import { pxToNumber } from "./tools/pxToNumber";
 
@@ -98,6 +98,7 @@ export function createButton<IconId extends string = never>(params?: {
 
             return (
                 <MuiButton
+                    disableFocusRipple
                     ref={ref}
                     className={cx(classes.root, className)}
                     //There is an error in @mui/material types, this should be correct.
@@ -175,19 +176,21 @@ export function createButton<IconId extends string = never>(params?: {
         const hoverTextColor = (() => {
             switch (theme.isDarkModeEnabled) {
                 case true:
-                    return theme.colors.palette[
-                        (() => {
-                            switch (variant) {
-                                case "primary":
-                                    return "light";
-                                case "secondary":
-                                case "ternary":
-                                    return "dark";
-                            }
-                        })()
-                    ].main;
+                    switch (variant) {
+                        case "ternary":
+                            return theme.colors.useCases.surfaces.background;
+                        default:
+                            return theme.colors.palette.dark.main;
+                    }
                 case false:
-                    return theme.colors.palette.light.main;
+                    switch (variant) {
+                        case "primary":
+                            return theme.colors.palette.dark.main;
+                        case "secondary":
+                            return theme.colors.palette.light.main;
+                        case "ternary":
+                            return theme.colors.useCases.surfaces.background;
+                    }
             }
         })();
 
@@ -266,7 +269,7 @@ export function createButton<IconId extends string = never>(params?: {
                         "color": textColor,
                     },
 
-                    "&:hover": {
+                    "&:hover, &:focus": {
                         "backgroundColor": hoverBackgroundColor,
                         "& .MuiSvgIcon-root": {
                             "color": hoverTextColor,

diff --git a/src/ButtonBarButton.tsx b/src/ButtonBarButton.tsx
@@ -63,7 +63,7 @@ export function createButtonBarButton<IconId extends string = never>(params: {
             "& > *": {
                 "transition": "none",
             },
-            "&:hover.MuiButton-text": {
+            "&:hover.MuiButton-text, &:focus.MuiButton-text": {
                 "color": theme.colors.useCases.typography.textPrimary,
                 "borderBottomColor": theme.colors.useCases.buttons.actionActive,
                 "boxSizing": "border-box",

diff --git a/src/IconButton.tsx b/src/IconButton.tsx
@@ -141,7 +141,7 @@ export function createIconButton<IconId extends string = never>(params?: {
     })((theme, { disabled }) => ({
         "root": {
             "padding": theme.spacing(2),
-            "&:hover": {
+            "&:hover, &:focus": {
                 "backgroundColor": "unset",
                 "& svg": {
                     "color": theme.colors.useCases.buttons.actionHoverPrimary,

diff --git a/src/LanguageSelect.tsx b/src/LanguageSelect.tsx
@@ -78,6 +78,7 @@ export function createLanguageSelect<Language extends string>(params: {
                     <MuiButton
                         className={cx(classes.button, className)}
                         ref={buttonRef}
+                        disableRipple
                         aria-owns={languageMenu ? menuId : undefined}
                         aria-haspopup="true"
                         aria-label={changeLanguageText ?? "change language"}
@@ -166,6 +167,9 @@ export function createLanguageSelect<Language extends string>(params: {
                         return 0;
                 }
             })(),
+            "&.Mui-focusVisible": {
+                "outline": "-webkit-focus-ring-color auto 1px",
+            },
         },
         "menu": {
             "& .Mui-selected": {

diff --git a/src/LeftBar.tsx b/src/LeftBar.tsx
@@ -313,11 +313,15 @@ export function createLeftBar<IconId extends string>(params?: {
                     "textDecoration": "none",
                     "display": "flex",
                     "cursor": "pointer",
-                    [`&:hover .${classes.iconHoverBox}`]: {
+                    [["hover", "focus"]
+                        .map(name => `&:${name} .${classes.iconHoverBox}`)
+                        .join(", ")]: {
                         "backgroundColor":
                             theme.colors.useCases.surfaces.background,
                     },
-                    [`&:hover .${classes.typoWrapper}`]: {
+                    [["hover", "focus"]
+                        .map(name => `&:${name} .${classes.typoWrapper}`)
+                        .join(", ")]: {
                         "backgroundColor": !isCollapsed
                             ? theme.colors.useCases.surfaces.background
                             : undefined,

diff --git a/src/lib/color.ts b/src/lib/color.ts
@@ -162,7 +162,7 @@ export function createDefaultColorUseCases(
         },
         "buttons": {
             "actionHoverPrimary":
-                palette.focus[isDarkModeEnabled ? "light" : "main"],
+                palette.focus[isDarkModeEnabled ? "light2" : "main"],
             "actionHoverSecondary": isDarkModeEnabled
                 ? palette.light.light
                 : palette.dark.main,