feat(modal): a11y, closes #1877

tusen-ai · Dec 25, 2021 · 5ab2182 · 5ab2182
1 parent 2a9ae02
commit 5ab2182
Show file tree

Hide file tree

Showing 24 changed files with 210 additions and 92 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -4,6 +4,7 @@
 
 ### Feats
 
+- `n-modal` add a11y support, closes [#1877](https://github.com/TuSimple/naive-ui/issues/1877).
 - Add `n-avatar-group`.
 - `n-input-number` supports `loading` state.
 - `scrollbar` uses `n` as CSS vars prefix.
@@ -58,6 +59,7 @@
 ### Fixes
 
 - Fix `n-form-item-gi` 's `validate` doesn't work, closes [#1901](https://github.com/TuSimple/naive-ui/issues/1901).
+- Fix `n-card` action's border-radius style.
 
 ## 2.23.1 (2021-12-20)
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -4,6 +4,7 @@
 
 ### Feats
 
+- `n-modal` 增加可访问性支持，关闭 [#1877](https://github.com/TuSimple/naive-ui/issues/1877)
 - 新增 `n-avatar-group`
 - `n-input-number` 支持 `loading` 状态
 - `scrollbar` 的 CSS 变量使用 `n` 作为前缀
@@ -58,6 +59,7 @@
 ### Fixes
 
 - 修复 `n-form-item-gi` 的 `validate` 不生效，关闭 [#1901](https://github.com/TuSimple/naive-ui/issues/1901)
+- 修复 `n-card` action 部分的 border-radius 样式
 
 ## 2.23.1 (2021-12-20)
 

diff --git a/package.json b/package.json
@@ -136,8 +136,8 @@
     "treemate": "^0.3.9",
     "vdirs": "^0.1.4",
     "vfonts": "^0.1.0",
-    "vooks": "^0.2.10",
-    "vueuc": "^0.4.18"
+    "vooks": "^0.2.12",
+    "vueuc": "^0.4.19-1"
   },
   "sideEffects": false,
   "homepage": "https://www.naiveui.com",

diff --git a/src/_internal/icons/Close.tsx b/src/_internal/icons/Close.tsx
@@ -3,10 +3,15 @@ import { replaceable } from './replaceable'
 
 export default replaceable(
   'close',
-  <svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    viewBox="0 0 12 12"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden
+  >
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
       <g fill="currentColor" fill-rule="nonzero">
-        <path d="M2.08859116,2.2156945 L2.14644661,2.14644661 C2.32001296,1.97288026 2.58943736,1.95359511 2.7843055,2.08859116 L2.85355339,2.14644661 L6,5.293 L9.14644661,2.14644661 C9.34170876,1.95118446 9.65829124,1.95118446 9.85355339,2.14644661 C10.0488155,2.34170876 10.0488155,2.65829124 9.85355339,2.85355339 L6.707,6 L9.85355339,9.14644661 C10.0271197,9.32001296 10.0464049,9.58943736 9.91140884,9.7843055 L9.85355339,9.85355339 C9.67998704,10.0271197 9.41056264,10.0464049 9.2156945,9.91140884 L9.14644661,9.85355339 L6,6.707 L2.85355339,9.85355339 C2.65829124,10.0488155 2.34170876,10.0488155 2.14644661,9.85355339 C1.95118446,9.65829124 1.95118446,9.34170876 2.14644661,9.14644661 L5.293,6 L2.14644661,2.85355339 C1.97288026,2.67998704 1.95359511,2.41056264 2.08859116,2.2156945 L2.14644661,2.14644661 L2.08859116,2.2156945 Z"></path>
+        <path d="M2.08859116,2.2156945 L2.14644661,2.14644661 C2.32001296,1.97288026 2.58943736,1.95359511 2.7843055,2.08859116 L2.85355339,2.14644661 L6,5.293 L9.14644661,2.14644661 C9.34170876,1.95118446 9.65829124,1.95118446 9.85355339,2.14644661 C10.0488155,2.34170876 10.0488155,2.65829124 9.85355339,2.85355339 L6.707,6 L9.85355339,9.14644661 C10.0271197,9.32001296 10.0464049,9.58943736 9.91140884,9.7843055 L9.85355339,9.85355339 C9.67998704,10.0271197 9.41056264,10.0464049 9.2156945,9.91140884 L9.14644661,9.85355339 L6,6.707 L2.85355339,9.85355339 C2.65829124,10.0488155 2.34170876,10.0488155 2.14644661,9.85355339 C1.95118446,9.65829124 1.95118446,9.34170876 2.14644661,9.14644661 L5.293,6 L2.14644661,2.85355339 C1.97288026,2.67998704 1.95359511,2.41056264 2.08859116,2.2156945 L2.14644661,2.14644661 L2.08859116,2.2156945 Z" />
       </g>
     </g>
   </svg>

diff --git a/src/_internal/scrollbar/src/ScrollBar.tsx b/src/_internal/scrollbar/src/ScrollBar.tsx
@@ -604,6 +604,7 @@ const Scrollbar = defineComponent({
       h(
         'div',
         mergeProps(this.$attrs, {
+          role: 'none',
           ref: 'wrapperRef',
           class: `${mergedClsPrefix}-scrollbar`,
           style: this.cssVars,
@@ -615,6 +616,7 @@ const Scrollbar = defineComponent({
             renderSlot($slots, 'default')
           ) : (
             <div
+              role="none"
               ref="containerRef"
               class={[
                 `${mergedClsPrefix}-scrollbar-container`,
@@ -629,6 +631,7 @@ const Scrollbar = defineComponent({
                   default: () => (
                     <div
                       ref="contentRef"
+                      role="none"
                       style={
                         [
                           {
@@ -652,7 +655,8 @@ const Scrollbar = defineComponent({
           <div
             ref="yRailRef"
             class={`${mergedClsPrefix}-scrollbar-rail ${mergedClsPrefix}-scrollbar-rail--vertical`}
-            style={[this.horizontalRailStyle] as any}
+            style={this.horizontalRailStyle}
+            aria-hidden
           >
             <Transition name="fade-in-transition">
               {{
@@ -673,7 +677,8 @@ const Scrollbar = defineComponent({
           <div
             ref="xRailRef"
             class={`${mergedClsPrefix}-scrollbar-rail ${mergedClsPrefix}-scrollbar-rail--horizontal`}
-            style={[this.verticalRailStyle] as any}
+            style={this.verticalRailStyle}
+            aria-hidden
           >
             <Transition name="fade-in-transition">
               {{

diff --git a/src/card/src/Card.tsx b/src/card/src/Card.tsx
@@ -46,6 +46,7 @@ export const cardBaseProps = {
     default: false as boolean
   },
   hoverable: Boolean,
+  role: String,
   onClose: [Function, Array] as PropType<MaybeArray<() => void>>
 } as const
 
@@ -179,6 +180,7 @@ export default defineComponent({
           }
         ]}
         style={this.cssVars as CSSProperties}
+        role={this.role}
       >
         {$slots.cover ? (
           <div class={`${mergedClsPrefix}-card-cover`} role="none">

diff --git a/src/card/src/styles/index.cssr.ts b/src/card/src/styles/index.cssr.ts
@@ -125,6 +125,8 @@ export default c([
       cE('action', `
         background-color: var(--n-action-color);
         padding: var(--n-padding-bottom) var(--n-padding-left);
+        border-bottom-left-radius: var(--n-border-radius);
+        border-bottom-right-radius: var(--n-border-radius);
       `)
     ]),
     cB('card-cover', `

diff --git a/src/dialog/src/Dialog.tsx b/src/dialog/src/Dialog.tsx
@@ -197,6 +197,7 @@ export default defineComponent({
           bordered && `${mergedClsPrefix}-dialog--bordered`
         ]}
         style={cssVars as CSSProperties}
+        role="dialog"
       >
         {closable ? (
           <NBaseClose
@@ -255,7 +256,6 @@ export default defineComponent({
                         ghost
                         size="small"
                         onClick={handleNegativeClick}
-                        internalAutoFocus={!this.positiveText}
                       >
                         {{
                           default: () => render(this.negativeText)
@@ -271,7 +271,6 @@ export default defineComponent({
                         size="small"
                         type={type === 'default' ? 'primary' : type}
                         onClick={handlePositiveClick}
-                        internalAutoFocus
                       >
                         {{
                           default: () => render(this.positiveText)

diff --git a/src/modal/demos/enUS/basic.demo.md b/src/modal/demos/enUS/basic.demo.md
@@ -3,9 +3,16 @@
 Basic usage of modal. You can put anything in modal, a card for example.
 
 ```html
-<n-button @click="showModal = true"> Start Me up </n-button>
+<n-button @click="showModal = true">Start Me up</n-button>
 <n-modal v-model:show="showModal">
-  <n-card style="width: 600px;" title="Modal" :bordered="false" size="huge">
+  <n-card
+    style="width: 600px;"
+    title="Modal"
+    :bordered="false"
+    size="huge"
+    role="dialog"
+    aria-modal="true"
+  >
     <template #header-extra> Oops! </template>
     Content
     <template #footer> Footer </template>

diff --git a/src/modal/demos/enUS/controlled.demo.md b/src/modal/demos/enUS/controlled.demo.md
@@ -3,9 +3,16 @@
 Modal can be controlled.
 
 ```html
-<n-button @click="handleClick"> Start Me up </n-button>
+<n-button @click="handleClick">Start Me up</n-button>
 <n-modal :show="showModal">
-  <n-card style="width: 600px;" title="Modal" :bordered="false" size="huge">
+  <n-card
+    style="width: 600px;"
+    title="Modal"
+    :bordered="false"
+    size="huge"
+    role="dialog"
+    aria-modal="true"
+  >
     Countdown {{ timeout / 1000 }}s
   </n-card>
 </n-modal>

diff --git a/src/modal/demos/enUS/custom-position.demo.md b/src/modal/demos/enUS/custom-position.demo.md
@@ -1,14 +1,18 @@
-# Custom Position
+# Customizing position
 
 Use fixed position to set the position of the modal.
 
 ```html
-<n-button @click="showModal = true"> Start Me up </n-button>
-<n-modal
-  v-model:show="showModal"
-  style="width: 600px; position: fixed; right: 100px; bottom: 100px;"
->
-  <n-card title="Modal" :bordered="false" size="huge">
+<n-button @click="showModal = true">Start Me up</n-button>
+<n-modal v-model:show="showModal">
+  <n-card
+    title="Modal"
+    :bordered="false"
+    size="huge"
+    role="dialog"
+    aria-modal="true"
+    style="width: 600px; position: fixed; right: 100px; bottom: 100px;"
+  >
     <template #header-extra> Oops! </template>
     Content
     <template #footer> Footer </template>

diff --git a/src/modal/demos/enUS/mask-closable.demo.md b/src/modal/demos/enUS/mask-closable.demo.md
@@ -1,9 +1,9 @@
-# Mask Closable
+# Mask closable
 
 Use `mask-closable=false` to make modal not emit the event which may close the modal.
 
 ```html
-<n-button @click="showModal = true"> Start Me up </n-button>
+<n-button @click="showModal = true">Start Me up</n-button>
 <n-modal
   v-model:show="showModal"
   :mask-closable="false"

diff --git a/src/modal/demos/enUS/preset-card.demo.md b/src/modal/demos/enUS/preset-card.demo.md
@@ -1,9 +1,9 @@
-# Use Preset Card
+# Use preset card
 
 Modal has some presets, which means you can use props & slots of the preset after set it.
 
 ```html
-<n-button @click="showModal = true"> Start Me up </n-button>
+<n-button @click="showModal = true">Start Me up</n-button>
 <n-modal
   class="custom-card"
   v-model:show="showModal"

diff --git a/src/modal/demos/enUS/preset-confirm-slot.demo.md b/src/modal/demos/enUS/preset-confirm-slot.demo.md
@@ -1,9 +1,9 @@
-# Use Preset Dialog (Slot)
+# Use preset dialog (slot)
 
 Slots are also related to preset.
 
 ```html
-<n-button @click="showModal = true"> Start Me up </n-button>
+<n-button @click="showModal = true">Start Me up</n-button>
 <n-modal v-model:show="showModal" preset="dialog" title="Dialog">
   <template #header>
     <div>title</div>

diff --git a/src/modal/demos/enUS/preset-confirm.demo.md b/src/modal/demos/enUS/preset-confirm.demo.md
@@ -1,9 +1,9 @@
-# Use Preset Dialog
+# Use preset dialog
 
 An example of preset `dialog`.
 
 ```html
-<n-button @click="showModal = true"> Start Me up </n-button>
+<n-button @click="showModal = true">Start Me up</n-button>
 <n-modal
   v-model:show="showModal"
   preset="dialog"

diff --git a/src/modal/demos/enUS/transform-origin.demo.md b/src/modal/demos/enUS/transform-origin.demo.md
@@ -1,11 +1,18 @@
-# Transform Origin
+# Transform origin
 
 Although the emerging animation from your click position is cool, sometimes we need a plain animation which occurs from the center of the screen. You can set `transfrom-origin` to `'center'` to achieve it.
 
 ```html
 <n-button @click="showModal = true">Nothing</n-button>
 <n-modal v-model:show="showModal" transform-origin="center">
-  <n-card style="width: 600px;" title="Okay" :bordered="false" size="huge">
+  <n-card
+    style="width: 600px;"
+    title="Okay"
+    :bordered="false"
+    size="huge"
+    role="dialog"
+    aria-modal="true"
+  >
     <template #header-extra>Great</template>
     Fine
     <template #footer>Nice</template>

diff --git a/src/modal/demos/zhCN/a11y-debug.demo.md b/src/modal/demos/zhCN/a11y-debug.demo.md
@@ -0,0 +1,23 @@
+# A11y debug
+
+```html
+<n-button @click="show = !show">Toggle</n-button>
+<n-modal preset="card" title="A11Y" v-model:show="show" style="width: 600px;">
+  <n-input placeholder="Gigigi" />
+  <template #action>
+    <n-button>Something</n-button>
+  </template>
+</n-modal>
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      show: ref(false)
+    }
+  }
+})
+```
diff --git a/src/modal/demos/zhCN/basic.demo.md b/src/modal/demos/zhCN/basic.demo.md
@@ -5,7 +5,14 @@
 ```html
 <n-button @click="showModal = true"> 来吧 </n-button>
 <n-modal v-model:show="showModal">
-  <n-card style="width: 600px;" title="模态框" :bordered="false" size="huge">
+  <n-card
+    style="width: 600px;"
+    title="模态框"
+    :bordered="false"
+    size="huge"
+    role="dialog"
+    aria-modal="true"
+  >
     <template #header-extra> 噢！ </template>
     内容
     <template #footer> 尾部 </template>

diff --git a/src/modal/demos/zhCN/controlled.demo.md b/src/modal/demos/zhCN/controlled.demo.md
@@ -5,7 +5,14 @@
 ```html
 <n-button @click="handleClick"> 来吧 </n-button>
 <n-modal :show="showModal">
-  <n-card style="width: 600px;" title="模态框" size="huge" :bordered="false">
+  <n-card
+    style="width: 600px;"
+    title="模态框"
+    size="huge"
+    :bordered="false"
+    role="dialog"
+    aria-modal="true"
+  >
     倒计时 {{ timeout / 1000 }} 秒
   </n-card>
 </n-modal>

diff --git a/src/modal/demos/zhCN/custom-position.demo.md b/src/modal/demos/zhCN/custom-position.demo.md
@@ -4,14 +4,18 @@
 
 ```html
 <n-button @click="showModal = true"> 来吧 </n-button>
-<n-modal
-  v-model:show="showModal"
-  style="width: 600px; position: fixed; right: 100px; bottom: 100px;"
->
-  <n-card title="模态框" :bordered="false" size="huge">
-    <template #header-extra> 噢！ </template>
+<n-modal v-model:show="showModal">
+  <n-card
+    title="模态框"
+    :bordered="false"
+    size="huge"
+    role="dialog"
+    aria-modal="true"
+    style="width: 600px; position: fixed; right: 100px; bottom: 100px;"
+  >
+    <template #header-extra>噢！</template>
     内容
-    <template #footer> 尾部 </template>
+    <template #footer>尾部</template>
   </n-card>
 </n-modal>
 ```

diff --git a/src/modal/demos/zhCN/index.demo-entry.md b/src/modal/demos/zhCN/index.demo-entry.md
@@ -13,6 +13,7 @@ preset-card
 preset-confirm
 preset-confirm-slot
 transform-origin
+a11y-debug
 raw-debug
 dark-1-debug
 dark-2-debug

diff --git a/src/modal/demos/zhCN/transform-origin.demo.md b/src/modal/demos/zhCN/transform-origin.demo.md
@@ -5,7 +5,14 @@
 ```html
 <n-button @click="showModal = true">没什么的</n-button>
 <n-modal v-model:show="showModal" transform-origin="center">
-  <n-card style="width: 600px;" title="自愿" :bordered="false" size="huge">
+  <n-card
+    style="width: 600px;"
+    title="自愿"
+    :bordered="false"
+    size="huge"
+    role="dialog"
+    aria-modal="true"
+  >
     <template #header-extra>按需</template>
     原则
     <template #footer>支持一下</template>