a11y: bad ux with buttons on admin-panel with some screen-reader (jaws2024)
Massimo Melina committed
Mar 1, 2024 at 00:09 UTC
5b03ef23bb20f78ace8b2440627dca4eb89dbaad
1 file changed
+12
-7
admin/src/mui.ts
+12
-7
@@ -147,6 +147,7 @@ export const IconBtn = forwardRef(({ title, icon, onClick, disabled, progress, l
147
const ref = useRefPass<HTMLButtonElement>(forwarded)
148
let ret: ReturnType<FC> = h(IconButton, {
149
ref,
150
+ 'aria-hidden': disabled,
151
..._.merge(modifiedProps(modified),
152
{ disabled, sx: { height: 'fit-content', ...sx } },
153
rest),
@@ -168,10 +169,11 @@ export const IconBtn = forwardRef(({ title, icon, onClick, disabled, progress, l
169
h(icon)
170
)
171
const aria = rest['aria-label'] ?? (_.isString(title) ? title : undefined)
171
- // having this span-wrapper conditioned by if(disabled) is causing a strange (harmless?) warning by mui-popper, so we don't
172
- ret = h('span', { role: 'button', 'aria-label': prefix('', aria, disabled && ', disabled') }, ret)
173
- if (title)
172
+ if (title) {
173
+ if (disabled)
174
+ ret = h('span', { role: 'button', 'aria-label': aria, 'aria-disabled': disabled }, ret)
175
ret = hTooltip(title, aria, ret, tooltipProps)
176
+ }
177
return ret
178
})
179
@@ -206,6 +208,7 @@ export const Btn = forwardRef(({ icon, title, onClick, disabled, progress, link,
208
loadingIndicator: typeof progress !== 'number' ? undefined
209
: h(CircularProgress, { size: '1rem', value: progress*100, variant: 'determinate' }),
210
disabled,
211
+ 'aria-hidden': disabled,
212
...rest,
213
children: showLabel && children,
214
sx: {
@@ -227,10 +230,12 @@ export const Btn = forwardRef(({ icon, title, onClick, disabled, progress, link,
230
}
231
}
232
})
230
- if (disabled)
231
- ret = h('span', { role: 'button', 'aria-label': title + ', disabled' }, ret)
232
- if (title)
233
- ret = hTooltip(title, undefined, ret, tooltipProps)
233
+ const aria = rest['aria-label'] ?? (_.isString(title) ? title : undefined)
234
+ if (title) {
235
+ // having this span-wrapper conditioned by if(disabled) is causing a strange (harmless?) warning by mui-popper as soon as you click, so we don't
236
+ ret = h('span', { role: 'button', 'aria-label': aria, 'aria-disabled': disabled }, ret)
237
+ ret = hTooltip(title, aria, ret, tooltipProps)
238
+ }
239
return ret
240
})
241