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

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>