From aac90c2742281a00b85b4abacab595e24e30b715 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Thu, 28 Sep 2023 11:18:49 +0200
Subject: [PATCH] feat(Button, Chip, Accordion): :recycle: Change components to
 use the same class for focus behaviour (#868)

---
 .../src/components/Accordion/Accordion.module.css  | 14 --------------
 .../Accordion/AccordionHeader/AccordionHeader.tsx  |  2 ++
 .../react/src/components/Button/Button.module.css  |  1 -
 packages/react/src/components/Button/Button.tsx    |  2 ++
 .../components/Chip/_ChipBase/ChipBase.module.css  |  9 ---------
 .../src/components/Chip/_ChipBase/ChipBase.tsx     |  2 ++
 packages/react/src/utils/utility.module.css        |  3 +--
 7 files changed, 7 insertions(+), 26 deletions(-)

diff --git a/packages/react/src/components/Accordion/Accordion.module.css b/packages/react/src/components/Accordion/Accordion.module.css
index fcd18e92b1..0600799003 100644
--- a/packages/react/src/components/Accordion/Accordion.module.css
+++ b/packages/react/src/components/Accordion/Accordion.module.css
@@ -67,20 +67,6 @@
   padding-left: var(--fdsc-accordion-header-padding-left);
 }
 
-.header > button:focus-visible,
-.header > button:focus {
-  --fdsc-focus-border-width: 3px;
-
-  outline: var(--fdsc-focus-border-width) solid var(--fds-semantic-border-focus-outline);
-  outline-offset: var(--fdsc-focus-border-width);
-  box-shadow: 0 0 0 var(--fdsc-focus-border-width) var(--fds-semantic-border-neutral-strong);
-  border-radius: var(--fds-border_radius-interactive);
-}
-
-.header > .button:focus:not(:focus-visible) {
-  outline: none;
-}
-
 @media (hover: hover) and (pointer: fine) {
   .header > button:hover {
     color: var(--fdsc-accordion-header-color-hover);
diff --git a/packages/react/src/components/Accordion/AccordionHeader/AccordionHeader.tsx b/packages/react/src/components/Accordion/AccordionHeader/AccordionHeader.tsx
index 6f5e917ad4..d100d78e9b 100644
--- a/packages/react/src/components/Accordion/AccordionHeader/AccordionHeader.tsx
+++ b/packages/react/src/components/Accordion/AccordionHeader/AccordionHeader.tsx
@@ -5,6 +5,7 @@ import React, { forwardRef, useContext } from 'react';
 
 import { Paragraph, Heading } from '../..';
 import classes from '../Accordion.module.css';
+import utilityClasses from '../../../utils/utility.module.css';
 import { AccordionItemContext } from '../AccordionItem';
 
 export type AccordionHeaderProps = {
@@ -44,6 +45,7 @@ export const AccordionHeader = forwardRef<
     >
       <button
         type='button'
+        className={utilityClasses.focusable}
         onClick={handleClick}
         aria-expanded={context.open}
         aria-controls={context.contentId}
diff --git a/packages/react/src/components/Button/Button.module.css b/packages/react/src/components/Button/Button.module.css
index d9ebfe0232..b3a76d8896 100644
--- a/packages/react/src/components/Button/Button.module.css
+++ b/packages/react/src/components/Button/Button.module.css
@@ -5,7 +5,6 @@
   --fdsc-font-and-icon-color: var(--fds-semantic-text-action-primary-on_action);
   --fdsc-icon-size: var(--fds-sizing-4);
 
-  composes: focusable from '../../utils/utility.module.css';
   display: flex;
   align-items: center;
   border-radius: var(--fdsc-border-radius);
diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
index a0c6f71412..7be0ae2712 100644
--- a/packages/react/src/components/Button/Button.tsx
+++ b/packages/react/src/components/Button/Button.tsx
@@ -3,6 +3,7 @@ import React, { forwardRef, type ButtonHTMLAttributes } from 'react';
 import cn from 'classnames';
 
 import { SvgIcon } from '../SvgIcon';
+import utilityClasses from '../../utils/utility.module.css';
 
 import classes from './Button.module.css';
 
@@ -48,6 +49,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       ref={ref}
       className={cn(
         classes.button,
+        utilityClasses.focusable,
         classes[size],
         classes[variant],
         classes[color],
diff --git a/packages/react/src/components/Chip/_ChipBase/ChipBase.module.css b/packages/react/src/components/Chip/_ChipBase/ChipBase.module.css
index 166f8689f6..b87bb33dc3 100644
--- a/packages/react/src/components/Chip/_ChipBase/ChipBase.module.css
+++ b/packages/react/src/components/Chip/_ChipBase/ChipBase.module.css
@@ -32,15 +32,6 @@
   }
 }
 
-.chipButton:focus {
-  --fdsc-chip-background: var(--fds-semantic-surface-action-primary-subtle);
-  --fdsc-chip-text-color: var(--fds-semantic-text-neutral-default);
-  --fdsc-chip-border: var(--fds-semantic-border-neutral-strong);
-
-  box-shadow: inset 0 0 0 2px var(--fdsc-chip-border);
-  outline: 2px solid var(--fds-semantic-border-focus-outline);
-}
-
 .chipButton:is([aria-pressed='true']),
 .chipButton:active {
   --fdsc-chip-background: var(--fds-semantic-surface-action-primary-active);
diff --git a/packages/react/src/components/Chip/_ChipBase/ChipBase.tsx b/packages/react/src/components/Chip/_ChipBase/ChipBase.tsx
index 033a6fb3b4..1794aad447 100644
--- a/packages/react/src/components/Chip/_ChipBase/ChipBase.tsx
+++ b/packages/react/src/components/Chip/_ChipBase/ChipBase.tsx
@@ -5,6 +5,7 @@ import cn from 'classnames';
 import { Paragraph } from '../../Typography';
 import type { OverridableComponent } from '../../../types/OverridableComponent';
 import { ChipGroupContext } from '../Group';
+import utilityClasses from '../../../utils/utility.module.css';
 
 import classes from './ChipBase.module.css';
 
@@ -40,6 +41,7 @@ export const ChipBase: OverridableComponent<ChipBaseProps, HTMLLabelElement> =
           aria-pressed={selected}
           className={cn(
             classes.chipButton,
+            utilityClasses.focusable,
             classes[group?.size || size],
             className,
           )}
diff --git a/packages/react/src/utils/utility.module.css b/packages/react/src/utils/utility.module.css
index f7e705acbd..bb6b6ab989 100644
--- a/packages/react/src/utils/utility.module.css
+++ b/packages/react/src/utils/utility.module.css
@@ -13,9 +13,8 @@
 }
 
 /**
- * Apply a focus outline on an element when it is focused or one of its children is focused
+ * Apply a focus outline on an element when it is focused with keyboard
  */
-.focusable:focus-within,
 .focusable:focus-visible {
   --fds-inner-focus-border-color: #1e2b3c;
   --fds-outer-focus-border-color: #fadf4b;