a11y: better aria-label for buttons with a tooltip
Massimo Melina committed
Mar 6, 2024 at 14:11 UTC
84dac2cb573f432f3dda9fc70843e09d573f824f
2 files changed
+5
-5
admin/src/dialog.ts
+3
-3
@@ -1,6 +1,6 @@
1
// This file is part of HFS - Copyright 2021-2023, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
2
3
-import { Box, Button, CircularProgress, Dialog as MuiDialog, DialogContent, DialogTitle, IconButton, Modal
3
+import { Box, Button, CircularProgress, Dialog as MuiDialog, DialogContent, DialogTitle, Modal
4
} from '@mui/material'
5
import { createElement as h, Dispatch, Fragment, isValidElement, ReactElement, ReactNode, SetStateAction,
6
useEffect, useRef, useState
@@ -16,7 +16,7 @@ import md from './md'
16
import _ from 'lodash'
17
export * from '@hfs/shared/dialogs'
18
19
-dialogsDefaults.Container = function Container(d:DialogOptions) {
19
+dialogsDefaults.Container = function Container(d: DialogOptions) {
20
const ref = useRef<HTMLElement>()
21
const { width, height } = useWindowSize()
22
const mobile = width > 0 && Math.min(width, height) < 500
@@ -54,7 +54,7 @@ dialogsDefaults.Container = function Container(d:DialogOptions) {
54
},
55
d.icon && componentOrNode(d.icon),
56
h(Box, { flex:1, minWidth: 40 }, componentOrNode(d.title)),
57
- h(IconBtn, { icon: Close, title: "Close", onClick: () => closeDialog() }),
57
+ d.closable && h(IconBtn, { icon: Close, title: "Close", onClick: () => closeDialog() }),
58
),
59
h(DialogContent, {
60
ref,
admin/src/mui.ts
+2
-2
@@ -7,7 +7,7 @@ import { createElement as h, forwardRef, Fragment, ReactElement, ReactNode, useC
7
ForwardedRef, useState, useMemo } from 'react'
8
import { Box, BoxProps, Breakpoint, ButtonProps, CircularProgress, IconButton, IconButtonProps, Link, LinkProps,
9
Tooltip, TooltipProps, useMediaQuery } from '@mui/material'
10
-import { formatPerc, isIpLan, isIpLocalHost, prefix, WIKI_URL } from '../../src/cross'
10
+import { formatPerc, isIpLan, isIpLocalHost, prefix, WIKI_URL, with_ } from './misc'
11
import { dontBotherWithKeys, restartAnimation, useBatch, useStateMounted } from '@hfs/shared'
12
import { Promisable, StringField } from '@hfs/mui-grid-form'
13
import { alertDialog, confirmDialog, toast } from './dialog'
@@ -177,7 +177,7 @@ export const Btn = forwardRef(({ icon, title, onClick, disabled, progress, link,
177
h(icon)
178
)
179
180
- const aria = rest['aria-label'] ?? (_.isString(title) ? title : undefined)
180
+ const aria = rest['aria-label'] ?? with_(_.isString(title) && title, x => x ? `${children || ''} (${x})` : undefined)
181
if (title) {
182
if (disabled) // having this span-wrapper conditioned by if(disabled) is causing a (harmless?) warning by mui-popper if the element becomes disabled after you click (file cut button does), but otherwise we have a bigger problem with a11y, with this being seen as a button
183
ret = h('span', { role: 'button', 'aria-label': aria, 'aria-disabled': disabled }, ret)