11<script setup lang="ts">
22import type { Directions } from ' @nuxtjs/i18n'
33import { useEventListener } from ' @vueuse/core'
4+ import { isEditableElement } from ' ~/utils/input'
45
56const route = useRoute ()
67const router = useRouter ()
@@ -39,14 +40,9 @@ if (import.meta.server) {
3940// "/" focuses search or navigates to search page
4041// "?" highlights all keyboard shortcut elements
4142function handleGlobalKeydown(e : KeyboardEvent ) {
42- const target = e .target as HTMLElement
43-
44- const isEditableTarget =
45- target .tagName === ' INPUT' || target .tagName === ' TEXTAREA' || target .isContentEditable
43+ if (isEditableElement (e .target )) return
4644
47- if (isEditableTarget ) return
48-
49- if (e .key === ' /' ) {
45+ if (isKeyWithoutModifiers (e , ' /' )) {
5046 e .preventDefault ()
5147
5248 // Try to find and focus search input on current page
@@ -62,7 +58,7 @@ function handleGlobalKeydown(e: KeyboardEvent) {
6258 router .push (' /search' )
6359 }
6460
65- if (e . key === ' ?' ) {
61+ if (isKeyWithoutModifiers ( e , ' ?' ) ) {
6662 e .preventDefault ()
6763 showKbdHints .value = true
6864 }
@@ -72,9 +68,20 @@ function handleGlobalKeyup() {
7268 showKbdHints .value = false
7369}
7470
71+ /* A hack to get light dismiss to work in safari because it does not support closedby="any" yet */
72+ // https://codepen.io/paramagicdev/pen/gbYompq
73+ // see: https://github.com/npmx-dev/npmx.dev/pull/522#discussion_r2749978022
74+ function handleModalLightDismiss(e : MouseEvent ) {
75+ const target = e .target as HTMLElement
76+ if (target .tagName === ' DIALOG' && target .hasAttribute (' open' )) {
77+ ;(target as HTMLDialogElement ).close ()
78+ }
79+ }
80+
7581if (import .meta .client ) {
7682 useEventListener (document , ' keydown' , handleGlobalKeydown )
7783 useEventListener (document , ' keyup' , handleGlobalKeyup )
84+ useEventListener (document , ' click' , handleModalLightDismiss )
7885}
7986 </script >
8087
@@ -95,6 +102,29 @@ if (import.meta.client) {
95102 </div >
96103</template >
97104
105+ <style scoped>
106+ /* Skip link */
107+ .skip-link {
108+ position : fixed ;
109+ top : -100% ;
110+ inset-inline-start : 0 ;
111+ padding : 0.5rem 1rem ;
112+ background : var (--fg );
113+ color : var (--bg );
114+ font-size : 0.875rem ;
115+ z-index : 100 ;
116+ transition : top 0.2s ease ;
117+ }
118+
119+ .skip-link :hover {
120+ color : var (--bg );
121+ text-decoration : underline ;
122+ }
123+ .skip-link :focus {
124+ top : 0 ;
125+ }
126+ </style >
127+
98128<style >
99129/* Keyboard shortcut highlight on "?" key press */
100130kbd {
0 commit comments