Fix focus-visible & button focus (#805)

* Fixed missing tabindex * 🐛 fixed focus-visible not being loaded * ➖ removed rollup polyfill & updated focus-visible
equinor · Nov 13, 2020 · 2b99731 · 2b99731
1 parent 11d1c3a
commit 2b99731
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 17 deletions.
diff --git a/libraries/core-react/package.json b/libraries/core-react/package.json
@@ -65,7 +65,6 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "rollup": "^2.15.0",
-    "rollup-plugin-polyfill": "^3.0.0",
     "rollup-plugin-typescript2": "^0.27.2",
     "styled-components": "4.4.1",
     "ts-jest": "^26.3.0",
@@ -84,7 +83,7 @@
     "@testing-library/react-hooks": "^3.3.0",
     "@types/lodash": "^4.14.162",
     "csstype": "^3.0.3",
-    "focus-visible": "^5.1.0",
+    "focus-visible": "^5.2.0",
     "lodash": "^4.17.19"
   },
   "engines": {

diff --git a/libraries/core-react/pnpm-lock.yaml b/libraries/core-react/pnpm-lock.yaml
diff --git a/libraries/core-react/rollup.config.js b/libraries/core-react/rollup.config.js
@@ -2,7 +2,6 @@
 import resolve from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
 import babel from '@rollup/plugin-babel'
-import polyfill from 'rollup-plugin-polyfill'
 import typescript from 'rollup-plugin-typescript2'
 
 import pkg from './package.json'
@@ -22,6 +21,7 @@ export default [
   {
     input: './src/index.ts',
     external: peerDeps,
+    // : [...peerDeps, 'focus-visible'],
     watch: {
       clearScreen: true,
       include: ['./src/**', './../tokens/**'],
@@ -37,7 +37,6 @@ export default [
         plugins: ['babel-plugin-styled-components'],
       }),
       commonjs(),
-      polyfill(['focus-visible']),
     ],
     output: [
       {

diff --git a/libraries/core-react/src/Button/Button.tsx b/libraries/core-react/src/Button/Button.tsx
@@ -137,6 +137,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       children,
       disabled = false,
       href,
+      tabIndex = 0,
       ...other
     },
     ref,
@@ -147,7 +148,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     const as: ElementType = href ? 'a' : other.as ? other.as : 'button'
     const type = href || other.as ? undefined : 'button'
-    const tabIndex = disabled ? -1 : other.tabIndex
+    tabIndex = disabled ? -1 : tabIndex
 
     const buttonProps = {
       ref,

diff --git a/libraries/core-react/src/index.ts b/libraries/core-react/src/index.ts
@@ -1,3 +1,4 @@
+import 'focus-visible'
 /* eslint-disable import/prefer-default-export */
 export * from './Button'
 export * from './Typography'