diff --git a/docs/en-US/component/dialog.md b/docs/en-US/component/dialog.md
index dd7b54245b..2923c2c6c5 100644
--- a/docs/en-US/component/dialog.md
+++ b/docs/en-US/component/dialog.md
@@ -139,6 +139,7 @@ When using `modal` = false, please make sure that `append-to-body` was set to **
| destroy-on-close | destroy elements in Dialog when closed | ^[boolean] | false |
| close-icon | custom close icon, default is Close | ^[string] / ^[Component] | — |
| z-index | same as z-index in native CSS, z-order of dialog | ^[number] | — |
+| header-aria-level ^(a11y) | header's `aria-level` attribute | ^[string] | 2 |
:::warning
diff --git a/docs/en-US/component/drawer.md b/docs/en-US/component/drawer.md
index 16b7a33aa8..5c3e8e2105 100644
--- a/docs/en-US/component/drawer.md
+++ b/docs/en-US/component/drawer.md
@@ -105,6 +105,7 @@ Drawer provides an API called `destroyOnClose`, which is a flag variable that in
| withHeader | Flag that controls the header section's existance, default to true, when withHeader set to false, both `title attribute` and `title slot` won't work | ^[boolean] | true |
| modal-class | Extra class names for shadowing layer | ^[string] | — |
| z-index | set z-index | ^[number] | — |
+| header-aria-level ^(a11y) | header's `aria-level` attribute | ^[string] | 2 |
:::warning
diff --git a/packages/components/dialog/src/dialog-content.ts b/packages/components/dialog/src/dialog-content.ts
index 894bc884f8..b80c2fae39 100644
--- a/packages/components/dialog/src/dialog-content.ts
+++ b/packages/components/dialog/src/dialog-content.ts
@@ -44,6 +44,13 @@ export const dialogContentProps = buildProps({
type: String,
default: '',
},
+ /**
+ * @description header's aria-level attribute
+ */
+ ariaLevel: {
+ type: String,
+ default: '2',
+ },
} as const)
export const dialogContentEmits = {
diff --git a/packages/components/dialog/src/dialog-content.vue b/packages/components/dialog/src/dialog-content.vue
index 1c1fd52e6a..e9a6b22ae4 100644
--- a/packages/components/dialog/src/dialog-content.vue
+++ b/packages/components/dialog/src/dialog-content.vue
@@ -2,7 +2,7 @@
-
+
{{ title }}
diff --git a/packages/components/dialog/src/dialog.ts b/packages/components/dialog/src/dialog.ts
index ef063351fb..1eff31f3e9 100644
--- a/packages/components/dialog/src/dialog.ts
+++ b/packages/components/dialog/src/dialog.ts
@@ -95,6 +95,13 @@ export const dialogProps = buildProps({
type: Boolean,
default: false,
},
+ /**
+ * @description header's aria-level attribute
+ */
+ headerAriaLevel: {
+ type: String,
+ default: '2',
+ },
} as const)
export type DialogProps = ExtractPropTypes
diff --git a/packages/components/dialog/src/dialog.vue b/packages/components/dialog/src/dialog.vue
index b3715d30fe..bc79a3b723 100644
--- a/packages/components/dialog/src/dialog.vue
+++ b/packages/components/dialog/src/dialog.vue
@@ -46,6 +46,7 @@
:fullscreen="fullscreen"
:show-close="showClose"
:title="title"
+ :aria-level="headerAriaLevel"
@close="handleClose"
>
diff --git a/packages/components/drawer/src/drawer.ts b/packages/components/drawer/src/drawer.ts
index 3661a0a76f..46f413bc9c 100644
--- a/packages/components/drawer/src/drawer.ts
+++ b/packages/components/drawer/src/drawer.ts
@@ -21,6 +21,10 @@ export const drawerProps = buildProps({
type: Boolean,
default: true,
},
+ headerAriaLevel: {
+ type: String,
+ default: '2',
+ },
} as const)
export type DrawerProps = ExtractPropTypes
diff --git a/packages/components/drawer/src/drawer.vue b/packages/components/drawer/src/drawer.vue
index 782c7ce16b..f12cc08af1 100644
--- a/packages/components/drawer/src/drawer.vue
+++ b/packages/components/drawer/src/drawer.vue
@@ -47,6 +47,7 @@
v-if="!$slots.title"
:id="titleId"
role="heading"
+ :aria-level="headerAriaLevel"
:class="ns.e('title')"
>
{{ title }}
diff --git a/packages/components/input-number/__tests__/input-number.test.tsx b/packages/components/input-number/__tests__/input-number.test.tsx
index 9f58d9863a..e5f3235c1d 100755
--- a/packages/components/input-number/__tests__/input-number.test.tsx
+++ b/packages/components/input-number/__tests__/input-number.test.tsx
@@ -44,7 +44,7 @@ describe('InputNumber.vue', () => {
await nextTick()
expect(wrapper.find('input').element.value).toEqual('')
expect(wrapper.find('input').element.getAttribute('aria-valuenow')).toEqual(
- 'null'
+ ''
)
})
diff --git a/packages/components/input-number/src/input-number.vue b/packages/components/input-number/src/input-number.vue
index a71bef82e4..20884a90f2 100755
--- a/packages/components/input-number/src/input-number.vue
+++ b/packages/components/input-number/src/input-number.vue
@@ -305,7 +305,12 @@ onMounted(() => {
} else {
innerInput.removeAttribute('aria-valuemin')
}
- innerInput.setAttribute('aria-valuenow', String(data.currentValue))
+ innerInput.setAttribute(
+ 'aria-valuenow',
+ data.currentValue || data.currentValue === 0
+ ? String(data.currentValue)
+ : ''
+ )
innerInput.setAttribute('aria-disabled', String(inputNumberDisabled.value))
if (!isNumber(modelValue) && modelValue != null) {
let val: number | null = Number(modelValue)
@@ -317,7 +322,7 @@ onMounted(() => {
})
onUpdated(() => {
const innerInput = input.value?.input
- innerInput?.setAttribute('aria-valuenow', `${data.currentValue}`)
+ innerInput?.setAttribute('aria-valuenow', `${data.currentValue ?? ''}`)
})
defineExpose({
/** @description get focus the input component */