a11y: dialog missed aria-label on close button
Massimo Melina committed
Jan 11, 2024 at 11:16 UTC
490699671026e5c9b1e89294800dce30109ea719
2 files changed
+6
-5
admin/src/dialog.ts
+1
-1
@@ -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
+ h(IconBtn, { icon: Close, title: "Close", onClick: () => closeDialog() }),
58
),
59
h(DialogContent, {
60
ref,
shared/dialogs.ts
+5
-4
@@ -10,7 +10,7 @@ export interface DialogOptions {
10
onClose?: (v?:any)=> any,
11
className?: string,
12
icon?: string | ReactNode | FunctionComponent,
13
- closableContent?: string | ReactNode,
13
+ closableProps?: any,
14
reserveClosing?: true
15
noFrame?: boolean
16
title?: ReactNode | FunctionComponent
@@ -25,7 +25,7 @@ export interface DialogOptions {
25
const dialogs = proxy<DialogOptions[]>([])
26
27
export const dialogsDefaults: Partial<DialogOptions> = {
28
- closableContent: 'x',
28
+ closableProps: { children: 'x', 'aria-label': "Close", },
29
padding: true,
30
}
31
@@ -99,8 +99,9 @@ function Dialog(d:DialogOptions) {
99
d.closable || d.closable===undefined
100
&& h('button', {
101
className: 'dialog-icon dialog-closer',
102
- onClick() { closeDialog() }
103
- }, d.closableContent),
102
+ onClick() { closeDialog() },
103
+ ...d.closableProps,
104
+ }),
105
d.icon && h('div', {
106
className: 'dialog-icon dialog-type' + (typeof d.icon === 'string' ? ' dialog-icon-text' : ''),
107
'aria-hidden': true,