a11y: show fixed menu button if device doesn't have hover capability
Massimo Melina committed
Mar 18, 2024 at 11:48 UTC
44443fce7741cd4c7fe5bd66adbc6798f3afa30b
1 file changed
+4
-4
frontend/src/BrowseFiles.ts
+4
-4
@@ -3,14 +3,14 @@
3
import { Link } from 'react-router-dom'
4
import { createElement as h, Fragment, memo, MouseEvent, useCallback, useEffect, useMemo, useRef, useState,
5
useId} from 'react'
6
-import { useWindowSize } from 'usehooks-ts'
6
+import { useMediaQuery, useWindowSize } from 'usehooks-ts'
7
import { domOn, formatBytes, ErrorMsg, hIcon, onlyTruthy, noAriaTitle, prefix, isMac } from './misc'
8
import { Checkbox, CustomCode, Spinner } from './components'
9
import { Head } from './Head'
10
import { DirEntry, state, useSnapState } from './state'
11
import { alertDialog } from './dialog'
12
import useFetchList from './useFetchList'
13
-import { loginDialog, useAuthorized } from './login'
13
+import { useAuthorized } from './login'
14
import { acceptDropFiles, enqueue } from './upload'
15
import _ from 'lodash'
16
import { t, useI18N } from './i18n'
@@ -204,8 +204,8 @@ const Entry = memo(({ entry, midnight, separator }: EntryProps) => {
204
className += ' ' + PAGE_SEPARATOR_CLASS
205
const ico = getEntryIcon(entry)
206
const onClick = !isLink && !entry.web && file_menu_on_link && fileMenu || undefined
207
- const small = useWindowSize().width < 800
208
- const showingButton = !file_menu_on_link || isFolder && small
207
+ const hasHover = useMediaQuery('(hover: hover)')
208
+ const showingButton = !file_menu_on_link || isFolder && !hasHover
209
const ariaId = useId()
210
const ariaProps = { id: ariaId, 'aria-label': prefix(name + ' (', isFolder ? "Folder" : entry.web ? "Web page" : isLink ? "Link" : '', ')') }
211
return h('li', { className, label: separator },