gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Disable ugly focus

Browse Source
This commit is contained in:
Kamran Ahmed
2021-09-22 20:42:51 +02:00
parent 170b14df4c
commit eafbcd5867
4 changed files with 36 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
package-lock.json generated
View File

@ -19,6 +19,7 @@
"@next/mdx": "^11.1.0",
"@svgr/webpack": "^5.5.0",
"date-fns": "^2.23.0",
"focus-visible": "^5.2.0",
"framer-motion": "^4.1.17",
"next": "^11.1.0",
"prism-themes": "^1.8.0",
@ -6408,6 +6409,11 @@
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
},
"node_modules/focus-visible": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/focus-visible/-/focus-visible-5.2.0.tgz",
"integrity": "sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ=="
},
"node_modules/foreach": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
@ -16274,6 +16280,11 @@
}
}
},
"focus-visible": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/focus-visible/-/focus-visible-5.2.0.tgz",
"integrity": "sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ=="
},
"foreach": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",

3
package.json
View File

@ -25,6 +25,7 @@
"@next/mdx": "^11.1.0",
"@svgr/webpack": "^5.5.0",
"date-fns": "^2.23.0",
"focus-visible": "^5.2.0",
"framer-motion": "^4.1.17",
"next": "^11.1.0",
"prism-themes": "^1.8.0",
@ -34,6 +35,8 @@
},
"devDependencies": {
"@types/eslint": "7.28.0",
"@types/gh-pages": "^3.2.0",
"@types/glob": "^7.1.4",
"@types/react": "17.0.16",
"@types/react-dom": "17.0.2",
"@types/styled-components": "^5.1.12",

17
pages/_app.tsx
View File

@ -1,12 +1,28 @@
import { useEffect } from 'react';
import type { AppProps } from 'next/app';
import { ChakraProvider } from '@chakra-ui/react';
import { Global, css } from '@emotion/react';
import 'prism-themes/themes/prism-shades-of-purple.css';
import 'focus-visible/dist/focus-visible';
import { roadmapTheme } from '../styles/theme';
import { firePageView } from '../lib/gtag';
import '../styles/carbon.css';
import { StickyBanner } from '../components/sticky-banner';
const GlobalStyles = css`
/*
This will hide the focus indicator if the
element receives focus via the mouse,
but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not([data-focus-visible-added]) {
outline: none;
box-shadow: none;
}
`;
function MyApp({ Component, pageProps }: AppProps) {
useEffect(() => {
firePageView(window.location.pathname);
@ -14,6 +30,7 @@ function MyApp({ Component, pageProps }: AppProps) {
return (
<ChakraProvider theme={roadmapTheme}>
<Global styles={GlobalStyles} />
<StickyBanner />
<Component {...pageProps} />
</ChakraProvider>

5
yarn.lock
View File

@ -3879,6 +3879,11 @@
dependencies:
"tslib" "^1.9.3"
"focus-visible@^5.2.0":
"integrity" "sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ=="
"resolved" "https://registry.npmjs.org/focus-visible/-/focus-visible-5.2.0.tgz"
"version" "5.2.0"
"foreach@^2.0.5":
"integrity" "sha1-C+4AUBiusmDQo6865ljdATbsG5k="
"resolved" "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz"