From 268457135e6f41a225361c436fcdca2f047752e0 Mon Sep 17 00:00:00 2001
From: Karolis_Stoncius_Sneakybox <karolis.stoncius@sneakybox.biz>
Date: Thu, 24 Aug 2023 15:14:59 +0300
Subject: [PATCH] feat(components): added aria-level attributes for dialog and
 drawer headers; Fixed input-number's aria-valuenow being null (#13822)

* feat(components): [dialog] added dialog header aria-level attribute

To pass accessibility tests elements with role="heading" require aria-level

* feat(components): [drawer] added drawer header aria-level attribute

To pass accessibility tests elements with role="heading" require aria-level

* fix(components): [input-number] prevent aria-valuenow from being null

To pass accessibility tests aria-valuenow cannot be null

* fix(components): [input-number] fix number input when 0 and update test

Fixes a bug where number input's aria-valuenow will be set to '' when input's value is 0. Also
updates a failing test

* refactor(components): [dialog] change default aria-level to 2

* docs(components): dialog and drawer header aria-level docs update

* docs(components): change headerAriaLevel type to string

* docs(components): kebab-case for docs
---
 docs/en-US/component/dialog.md                           | 1 +
 docs/en-US/component/drawer.md                           | 1 +
 packages/components/dialog/src/dialog-content.ts         | 7 +++++++
 packages/components/dialog/src/dialog-content.vue        | 2 +-
 packages/components/dialog/src/dialog.ts                 | 7 +++++++
 packages/components/dialog/src/dialog.vue                | 1 +
 packages/components/drawer/src/drawer.ts                 | 4 ++++
 packages/components/drawer/src/drawer.vue                | 1 +
 .../input-number/__tests__/input-number.test.tsx         | 2 +-
 packages/components/input-number/src/input-number.vue    | 9 +++++++--
 10 files changed, 31 insertions(+), 4 deletions(-)

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 @@
   <div :ref="composedDialogRef" :class="dialogKls" :style="style" tabindex="-1">
     <header ref="headerRef" :class="ns.e('header')">
       <slot name="header">
-        <span role="heading" :class="ns.e('title')">
+        <span role="heading" :aria-level="ariaLevel" :class="ns.e('title')">
           {{ title }}
         </span>
       </slot>
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<typeof dialogProps>
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"
             >
               <template #header>
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<typeof drawerProps>
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 */