fix: (regression beta): admin: bad a11y on icon-buttons
Massimo Melina committed
Feb 15, 2024 at 00:12 UTC
432e0348406157962fdbed64826ed5aa8f6bba80
2 files changed
+6
-14
admin/src/api.ts
+1
-1
@@ -31,7 +31,7 @@ export function useApiEx<T=any>(...args: Parameters<typeof useApi>) {
31
element: useMemo(() =>
32
!args[0] ? null
33
: res.error ? h(Alert, { severity: 'error' }, xlate(String(res.error), ERRORS),
34
- h(IconBtn, { icon: Refresh, onClick: res.reload, sx: { m:'-10px 0 -8px 16px' } }) )
34
+ h(IconBtn, { icon: Refresh, title: "Reload", onClick: res.reload, sx: { m:'-10px 0 -8px 16px' } }) )
35
: res.loading || res.data === undefined ? spinner()
36
: null,
37
Object.values(res))
admin/src/mui.ts
+5
-13
@@ -3,17 +3,8 @@
3
4
import { PauseCircle, PlayCircle, Refresh, SvgIconComponent } from '@mui/icons-material'
5
import { SxProps } from '@mui/system'
6
-import {
7
- createElement as h,
8
- FC,
9
- forwardRef,
10
- Fragment,
11
- ReactElement,
12
- ReactNode,
13
- useCallback,
14
- useEffect,
15
- useState
16
-} from 'react'
6
+import { createElement as h, FC, forwardRef, Fragment, ReactElement, ReactNode, useCallback, useEffect,
7
+ useState } 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'
@@ -156,10 +147,11 @@ export const IconBtn = forwardRef(({ title, icon, onClick, disabled, progress, l
147
}),
148
h(icon)
149
)
150
+ const aria = rest['aria-label'] ?? (_.isString(title) ? title : undefined)
151
if (disabled)
160
- ret = h('span', { role: 'button', 'aria-label': title + ', disabled' }, ret)
152
+ ret = h('span', { role: 'button', 'aria-label': aria && (aria + ', disabled') }, ret)
153
if (title)
162
- ret = hTooltip(title, undefined, ret, tooltipProps)
154
+ ret = hTooltip(title, aria, ret, tooltipProps)
155
return ret
156
})
157