feat(Button, Chip, Accordion): ♻️ Change components to use the same c…

…lass for focus behaviour (#868)
digdir · Sep 28, 2023 · aac90c2 · aac90c2
1 parent f84377d
commit aac90c2
Show file tree

Hide file tree

Showing 7 changed files with 7 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;