diff --git a/src/helper/accessibility.ts b/src/helper/accessibility.ts new file mode 100644 index 0000000..a8509bc --- /dev/null +++ b/src/helper/accessibility.ts @@ -0,0 +1,18 @@ +let isSpaceClickActive = false; + +export const addSupportForTabNavigation = () => + document.addEventListener('keydown', (e) => { + if (e.key === ' ') { + isSpaceClickActive = true; + (document.activeElement as HTMLElement)?.click(); + e.preventDefault(); + } + }); + +export const removeUnnecessaryOutlines = () => + document.addEventListener('click', () => { + if (!isSpaceClickActive) { + (document.activeElement as HTMLElement).blur?.(); + } + isSpaceClickActive = false; + }); diff --git a/src/helper/add-support-for-tab-navigation.ts b/src/helper/add-support-for-tab-navigation.ts deleted file mode 100644 index 3ed924f..0000000 --- a/src/helper/add-support-for-tab-navigation.ts +++ /dev/null @@ -1,7 +0,0 @@ -export const addSupportForTabNavigation = () => - document.addEventListener('keydown', (e) => { - if (e.key === ' ') { - (document.activeElement as HTMLElement)?.click(); - e.preventDefault(); - } - }); diff --git a/src/helper/remove-unnecessary-outlines.ts b/src/helper/remove-unnecessary-outlines.ts deleted file mode 100644 index 1ec6b12..0000000 --- a/src/helper/remove-unnecessary-outlines.ts +++ /dev/null @@ -1,4 +0,0 @@ -export const removeUnnecessaryOutlines = () => - document.addEventListener('click', () => - (document.activeElement as HTMLElement).blur?.() - ); diff --git a/src/index.ts b/src/index.ts index 3eb05d1..0c7fddb 100644 --- a/src/index.ts +++ b/src/index.ts @@ -9,8 +9,10 @@ import '../static/no-change/favicons/site.webmanifest'; import '../static/no-change/og-image.jpg'; import '../static/no-change/robots.txt'; import { createPortfolio } from './data/create-portfolio'; -import { addSupportForTabNavigation } from './helper/add-support-for-tab-navigation'; -import { removeUnnecessaryOutlines } from './helper/remove-unnecessary-outlines'; +import { + addSupportForTabNavigation, + removeUnnecessaryOutlines, +} from './helper/accessibility'; import { scrollToFragment } from './helper/scroll-to-fragment'; import './styles.scss';