Button setter role=button ved bruk av annen html-tag (#2154)

navikt · Aug 25, 2023 · 627f9f7 · 627f9f7
1 parent 3b1c8c7
commit 627f9f7
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 19 deletions.
diff --git a/.changeset/eight-ads-develop.md b/.changeset/eight-ads-develop.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Button: Ved bruk av `as`-prop vil `role="button"` nå bli lagt til. Native `onKeyUp` for `Space` er også implementert slik at standard `button`-interaksjon vil være likere uansett html-tag.
diff --git a/@navikt/core/react/src/button/Button.tsx b/@navikt/core/react/src/button/Button.tsx
@@ -94,13 +94,25 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
         }
       }, [loading, children]);
 
-      const filterProps =
+      const filterProps: React.ButtonHTMLAttributes<HTMLButtonElement> =
         disabled ?? widthOverride ? omit(rest, ["href"]) : rest;
 
       return (
         <Component
+          {...(Component !== "button" ? { role: "button" } : {})}
           {...filterProps}
           ref={mergedRef}
+          onKeyUp={(e: React.KeyboardEvent<HTMLButtonElement>) => {
+            filterProps.onKeyUp?.(e);
+            if (
+              e.key === " " &&
+              !disabled &&
+              !widthOverride &&
+              !e.isDefaultPrevented()
+            ) {
+              e.currentTarget.click();
+            }
+          }}
           className={cl(
             className,
             "navds-button",

diff --git a/yarn.lock b/yarn.lock
@@ -3438,7 +3438,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@^5.0.3, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@^5.1.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
   dependencies:
@@ -3465,8 +3465,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
   dependencies:
-    "@navikt/ds-css": ^5.0.3
-    "@navikt/ds-tokens": ^5.0.3
+    "@navikt/ds-css": ^5.1.0
+    "@navikt/ds-tokens": ^5.1.0
     "@types/jest": ^29.0.0
     concurrently: 7.2.1
     copyfiles: 2.4.1
@@ -3483,7 +3483,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel@workspace:@navikt/aksel"
   dependencies:
-    "@navikt/ds-css": 5.0.3
+    "@navikt/ds-css": 5.1.0
     "@types/inquirer": ^9.0.3
     "@types/jest": ^29.0.0
     axios: 1.3.6
@@ -3507,11 +3507,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css@*, @navikt/ds-css@5.0.3, @navikt/ds-css@^5.0.3, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@*, @navikt/ds-css@5.1.0, @navikt/ds-css@^5.1.0, @navikt/ds-css@workspace:@navikt/core/css":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-css@workspace:@navikt/core/css"
   dependencies:
-    "@navikt/ds-tokens": ^5.0.3
+    "@navikt/ds-tokens": ^5.1.0
     cssnano: 6.0.0
     fast-glob: 3.2.11
     lodash: 4.17.21
@@ -3524,12 +3524,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@*, @navikt/ds-react@5.0.3, @navikt/ds-react@^5.0.3, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@*, @navikt/ds-react@5.1.0, @navikt/ds-react@^5.1.0, @navikt/ds-react@workspace:@navikt/core/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react@workspace:@navikt/core/react"
   dependencies:
     "@floating-ui/react": 0.24.1
-    "@navikt/aksel-icons": ^5.0.3
+    "@navikt/aksel-icons": ^5.1.0
     "@radix-ui/react-tabs": 1.0.0
     "@radix-ui/react-toggle-group": 1.0.0
     "@testing-library/dom": 8.13.0
@@ -3563,11 +3563,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tailwind@^5.0.3, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^5.1.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
   dependencies:
-    "@navikt/ds-tokens": ^5.0.3
+    "@navikt/ds-tokens": ^5.1.0
     "@types/jest": ^29.0.0
     color: 4.2.3
     jest: ^29.0.0
@@ -3578,7 +3578,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tokens@^5.0.3, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^5.1.0, @navikt/ds-tokens@workspace:@navikt/core/tokens":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
   dependencies:
@@ -8593,11 +8593,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "aksel.nav.no@workspace:aksel.nav.no"
   dependencies:
-    "@navikt/aksel-icons": ^5.0.3
-    "@navikt/ds-css": ^5.0.3
-    "@navikt/ds-react": ^5.0.3
-    "@navikt/ds-tailwind": ^5.0.3
-    "@navikt/ds-tokens": ^5.0.3
+    "@navikt/aksel-icons": ^5.1.0
+    "@navikt/ds-css": ^5.1.0
+    "@navikt/ds-react": ^5.1.0
+    "@navikt/ds-tailwind": ^5.1.0
+    "@navikt/ds-tokens": ^5.1.0
     prettier-plugin-tailwindcss: ^0.2.3
   languageName: unknown
   linkType: soft
@@ -23686,8 +23686,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "shadow-dom@workspace:examples/shadow-dom"
   dependencies:
-    "@navikt/ds-css": 5.0.3
-    "@navikt/ds-react": 5.0.3
+    "@navikt/ds-css": 5.1.0
+    "@navikt/ds-react": 5.1.0
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
     "@vitejs/plugin-react": ^3.1.0