add a11y(2nd component) markdown

AricZhu · Feb 15, 2019 · cc436dd · cc436dd
1 parent 06842a4
commit cc436dd
Show file tree

Hide file tree

Showing 46 changed files with 764 additions and 1 deletion.
diff --git a/docs/badge/demo/accessibility.md b/docs/badge/demo/accessibility.md
@@ -0,0 +1,33 @@
+# 无障碍
+
+- order: 6
+
+组件内置了部分支持无障碍, 但是额外需要开发者手动设置才能完整支持无障碍: 比如添加className="next-visually-hidden"，使得badge能被读屏软件读取含义。
+
+:::lang=en-us
+# Accessibility
+
+- order: 6
+
+To Support accessibility, you can assign className="next-visually-hidden", which can make badge read by software like voiceover.
+:::
+
+---
+
+````jsx
+import { Badge, Icon } from '@alifd/next';
+
+ReactDOM.render(
+    <div>
+        <Badge dot>
+            <a href="#"><span className="next-visually-hidden">new mail</span></a>
+        </Badge>
+    </div>, mountNode);
+````
+
+````css
+.next-badge {
+    margin-right: 16px;
+}
+````
+
diff --git a/docs/badge/index.en-us.md b/docs/badge/index.en-us.md
@@ -29,3 +29,8 @@ You can add class as below, so that messages will not appear on pages, but can b
 | overflowCount | max number to display                                              | Number/String | 99    |
 | dot           | display a red dot, not a number                                        | Boolean       | false |
 
+## ARIA and KeyBoard
+
+| KeyBoard          | Descripiton                              |
+| :---------- | :------------------------------ |
+|     |                          |
diff --git a/docs/badge/index.md b/docs/badge/index.md
@@ -29,3 +29,9 @@
 | content       | 自定义节点内容                                               | ReactNode     | -     |
 | overflowCount | 展示的封顶的数字                                              | Number/String | 99    |
 | dot           | 不展示数字，只展示一个小红点                                        | Boolean       | false |
+
+## ARIA and KeyBoard
+
+| 按键          | 说明                              |
+| :---------- | :------------------------------ |
+|     |                           |
diff --git a/docs/breadcrumb/demo/accessibility.md b/docs/breadcrumb/demo/accessibility.md
@@ -0,0 +1,27 @@
+# 无障碍
+
+- order: 3
+
+组件已支持无障碍。
+
+:::lang=en-us
+# Accessibility
+
+- order: 3
+
+Components already support accessibility.
+:::
+
+---
+
+````jsx
+import { Breadcrumb } from '@alifd/next';
+
+ReactDOM.render(
+    <Breadcrumb>
+        <Breadcrumb.Item link="javascript:void(0);">Home</Breadcrumb.Item>
+        <Breadcrumb.Item link="javascript:void(0);">Accessibility rule</Breadcrumb.Item>
+        <Breadcrumb.Item link="javascript:void(0);">Accessibility practice</Breadcrumb.Item>
+    </Breadcrumb>,
+    mountNode);
+````
diff --git a/docs/breadcrumb/index.en-us.md b/docs/breadcrumb/index.en-us.md
@@ -28,3 +28,12 @@ It is used to inform the user of the current position and the position of the cu
 | Param           | Description                                                                                                                  | Type       | Default Value          |
 | ---- | -------------------------------------------- | ------ | --- |
 | link | The breadcrumb item link, if this property is set, the node is `<a />`, otherwise it is `<span />` | String | -   |
+
+## ARIA and KeyBoard
+
+| KeyBoard          | Descripiton                              |
+| :---------- | :------------------------------ |
+| Up Arrow    | navigate to previous item                          |
+| Down Arrow  | navigate to next item                          |
+| Right Arrow | navigate to the right one |
+| Left Arrow  | navigation to the left one   |
diff --git a/docs/breadcrumb/index.md b/docs/breadcrumb/index.md
@@ -29,3 +29,12 @@
 | 参数   | 说明                                           | 类型     | 默认值 |
 | ---- | -------------------------------------------- | ------ | --- |
 | link | 面包屑节点链接，如果设置这个属性，则该节点为`<a />` ，否则是`<span />` | String | -   |
+
+## ARIA and KeyBoard
+
+| 按键          | 说明                              |
+| :---------- | :------------------------------ |
+| Up Arrow    | 导航到上一项                          |
+| Down Arrow  | 导航到下一项                          |
+| Right Arrow | 导航到右一项 |
+| Left Arrow  | 导航到左一项   |
diff --git a/docs/collapse/index.en-us.md b/docs/collapse/index.en-us.md
@@ -31,3 +31,14 @@ When some earas may toggle between collapse state and expand state.
 | -------- | -------- | --------- | --- |
 | disabled | disable this panel | Boolean   | -   |
 | title    | panel title       | ReactNode | -   |
+
+## ARIA and KeyBoard
+
+| KeyBoard          | Descripiton                              |
+| :---------- | :------------------------------ |
+| Up Arrow    | navigate to previous item                          |
+| Down Arrow  | navigate to next item                          |
+| Right Arrow | navigate to the right one |
+| Left Arrow  | navigation to the left one   |
+| Tab       | navigate to the next collapse component                |
+| Space       | toggle selected or checked                          |
diff --git a/docs/collapse/index.md b/docs/collapse/index.md
@@ -32,3 +32,14 @@
 | -------- | -------- | --------- | --- |
 | disabled | 是否禁止用户操作 | Boolean   | -   |
 | title    | 标题       | ReactNode | -   |
+
+## ARIA and KeyBoard
+
+| 按键          | 说明                              |
+| :---------- | :------------------------------ |
+| Up Arrow    | 导航到上一项                          |
+| Down Arrow  | 导航到下一项                          |
+| Right Arrow | 导航到右一项 |
+| Left Arrow  | 导航到左一项   |
+| Tab  | 切换到下一个collapse   |
+| Space| 切换collapse的折叠状态 |
diff --git a/docs/dropdown/demo/accessibility.md b/docs/dropdown/demo/accessibility.md
@@ -0,0 +1,31 @@
+# 无障碍
+
+- order: 3
+
+组件内置了部分支持无障碍, 但是额外需要开发者手动设置才能完整支持无障碍: 给Collapse传入一个id, 组件会根据Collapse的id自动给每一个Panel生成Id。如果你想指定Panel的Id也可以, 给某个Panel传入Id属性,就会覆盖根据CollapseId生成的Id。
+
+:::lang=en-us
+# Accessibility
+
+- order: 3
+
+To Support accessibility, you shoud assign an id prop to Collapse and it will generate id for Panels. or you can assign an id prop to Panel to overwrite generated id.
+:::
+
+---
+
+````jsx
+import { Dropdown, Menu } from '@alifd/next';
+
+const menu = (
+    <Menu>
+        <Menu.Item>Option 1</Menu.Item>
+        <Menu.Item>Option 2</Menu.Item>
+    </Menu>
+);
+
+ReactDOM.render(
+    <Dropdown trigger={<a>test accessibility dropdown</a>} afterOpen={() => console.log('after open')}>
+        {menu}
+    </Dropdown>, mountNode);
+````
diff --git a/docs/dropdown/index.en-us.md b/docs/dropdown/index.en-us.md
@@ -34,3 +34,16 @@ You can storage operation command with dropdown component when there are too muc
 | hasMask         | display mask or not                                                                                                                                                                                          | Boolean        | false                                      |
 | cache           | reserve child element or not after hidden overlay                                                                                                                                                                                      | Boolean        | false                                      |
 | animation       | animation play mode, support object value: { in: 'enter-class', out: 'leave-class' }, there is no animation if set `false`                                                                                                                 | Object/Boolean | { in: 'expandInDown', out: 'expandOutUp' } |
+
+## ARIA and KeyBoard
+
+| KeyBoard          | Descripiton                              |
+| :---------- | :------------------------------ |
+| Up Arrow    | navigate to previous item                          |
+| Down Arrow  | navigate to next item                          |
+| Right Arrow | open the submenu, navigate to the first item of the submenu; horizontal menu bar first level, navigate to the right one |
+| Left Arrow  | close the submenu, navigate to the parent menu; horizontal menu bar first level, navigation to the left one   |
+| Enter       | open submenu and navigate to the first item of the submenu                |
+| Esc         | close submenu and navigate to the parent menu item                  |
+
+
diff --git a/docs/dropdown/index.md b/docs/dropdown/index.md
@@ -35,3 +35,14 @@
 | hasMask         | 是否显示遮罩                                                                                                                                                                                          | Boolean        | false                                      |
 | cache           | 隐藏时是否保留子节点                                                                                                                                                                                      | Boolean        | false                                      |
 | animation       | 配置动画的播放方式，支持 { in: 'enter-class', out: 'leave-class' } 的对象参数，如果设置为 false，则不播放动画                                                                                                                 | Object/Boolean | { in: 'expandInDown', out: 'expandOutUp' } |
+
+## ARIA and KeyBoard
+
+| 按键          | 说明                              |
+| :---------- | :------------------------------ |
+| Up Arrow    | 导航到上一项                          |
+| Down Arrow  | 导航到下一项                          |
+| Right Arrow | 打开子菜单，导航到子菜单第一项；横向菜单条第一层，导航到右一项 |
+| Left Arrow  | 关闭子菜单，导航到父级菜单；横向菜单条第一层，导航到左一项   |
+| Enter       | 打开子菜单，导航到子菜单第一项                 |
+| Esc         | 关闭子菜单，导航到父级菜单                   |
diff --git a/docs/nav/demo/accessibility.md b/docs/nav/demo/accessibility.md
@@ -0,0 +1,52 @@
+# 无障碍
+
+- order: 6
+
+组件已支持无障碍
+
+:::lang=en-us
+# Accessibility
+
+- order: 6
+
+Components already support accessibility
+:::
+
+---
+
+````jsx
+import { Nav } from '@alifd/next';
+
+
+const { Item, SubNav } = Nav;
+
+const header = <span className="a">Accessibility</span>;
+const footer = <a className="login-in" href="javascript:;">Login in</a>;
+
+ReactDOM.render(
+    <Nav className="basic-nav" direction="hoz" type="primary" header={header} footer={footer} defaultSelectedKeys={['home']} triggerType="hover">
+        <Item key="Accessibility home">Home</Item>
+        <SubNav label="Accessibility Component" selectable>
+            <Item key="next">Next</Item>
+            <Item key="mext">Mext</Item>
+        </SubNav>
+        <Item key="Accessibility document">Document</Item>
+    </Nav>
+    , mountNode);
+````
+
+````css
+.basic-nav .fusion {
+    margin: 8px 20px;
+    width: 100px;
+    color: #FFFFFF;
+    font-size: 20px;
+}
+.basic-nav .login-in {
+    margin: 0 20px;
+    color: #FFFFFF;
+}
+.basic-nav .next-nav-item {
+    width: 120px;
+}
+````
diff --git a/docs/nav/index.en-us.md b/docs/nav/index.en-us.md
@@ -87,3 +87,16 @@ It provides top navigation and side navigation, the top navigation provides glob
 | label    | content of label                                                       | ReactNode        | -   |
 | selectable | whether is selectable                                                       | Boolean          | false |
 | children | navigation item and sub navigation                                                    | ReactNode        | -   |
+
+## ARIA and KeyBoard
+
+| KeyBoard          | Descripiton                              |
+| :---------- | :------------------------------ |
+| Up Arrow    | navigate to previous item                          |
+| Down Arrow  | navigate to next item                          |
+| Right Arrow | open the submenu, navigate to the first item of the submenu; horizontal menu bar first level, navigate to the right one |
+| Left Arrow  | close the submenu, navigate to the parent menu; horizontal menu bar first level, navigation to the left one   |
+| Enter       | open submenu and navigate to the first item of the submenu                |
+| Esc         | close submenu and navigate to the parent menu item                  |
+
+
diff --git a/docs/nav/index.md b/docs/nav/index.md
@@ -87,3 +87,14 @@
 | label      | 标签内容                                                       | ReactNode        | -     |
 | selectable | 是否可选                                                       | Boolean          | false |
 | children   | 导航项和子导航                                                    | ReactNode        | -     |
+
+## ARIA and KeyBoard
+
+| 按键          | 说明                              |
+| :---------- | :------------------------------ |
+| Up Arrow    | 导航到上一项                          |
+| Down Arrow  | 导航到下一项                          |
+| Right Arrow | 打开子菜单，导航到子菜单第一项；横向菜单条第一层，导航到右一项 |
+| Left Arrow  | 关闭子菜单，导航到父级菜单；横向菜单条第一层，导航到左一项   |
+| Enter       | 打开子菜单，导航到子菜单第一项                 |
+| Esc         | 关闭子菜单，导航到父级菜单                   |
diff --git a/docs/number-picker/demo/accessibility.md b/docs/number-picker/demo/accessibility.md
@@ -0,0 +1,30 @@
+# 无障碍
+
+- order: 8
+
+组件内置了部分支持无障碍, 但是额外需要开发者手动设置才能完整支持无障碍: 设置upBtnprops以及downBtnprops，使得读屏软件可以正确表达按键的具体功能。
+
+:::lang=en-us
+# Accessibility
+
+- order: 8
+
+The component is partially built to support accessibility, but requires additional developer manual Settings to fully support accessibility: upBtnprops and downBtnprops are set up to enable the screen reader to correctly express the specific functions of the buttons.
+:::
+
+---
+
+````jsx
+import { NumberPicker } from '@alifd/next';
+
+function onChange(value, e) {
+    console.log(value, e.type, e.triggerType);
+}
+
+ReactDOM.render(
+    <div>
+        <NumberPicker upBtnProps={{"aria-label":"increasing button"}} downBtnProps={{"aria-label":"decreasing button"}} defaultValue={0} type="inline" onChange={onChange}/>
+    </div>,
+    mountNode
+);
+````
diff --git a/docs/number-picker/index.en-us.md b/docs/number-picker/index.en-us.md
@@ -43,3 +43,15 @@ Number input and auto correct data.
 | max          | maximum value                                                                                                       | Number        | Infinity  |
 | min          | minimum value                                                                                                        | Number        | -Infinity |
 | format       | format value for display<br><br>**signature**:<br>Function(value: Number) => String/Number<br>**params**:<br>_value_: {Number} current value<br>**return**:<br>{String/Number} formatted value<br> | Function      | -         |
+
+## ARIA and KeyBoard
+
+| KeyBoard          | Descripiton                              |
+| :---------- | :------------------------------ |
+| Up Arrow    | navigate to previous item                          |
+| Down Arrow  | navigate to next item                          |
+| Right Arrow | navigate to the right one |
+| Left Arrow  | navigation to the left one   |
+| Enter       | click the button of numberPicker component                |
+
+
diff --git a/docs/number-picker/index.md b/docs/number-picker/index.md
@@ -49,3 +49,12 @@
 | format       | 格式化当前值<br><br>**签名**:<br>Function(value: Number) => String/Number<br>**参数**:<br>_value_: {Number} null<br>**返回值**:<br>{String/Number} null<br> | Function      | -         |
 | upBtnProps   | 增加按钮的props                                                                                                                                     | Object        | -         |
 | downBtnProps | 减少按钮的props                                                                                                                                     | Object        | -         |
+## ARIA and KeyBoard
+
+| 按键          | 说明                              |
+| :---------- | :------------------------------ |
+| Up Arrow    | 导航到上一项                          |
+| Down Arrow  | 导航到下一项                          |
+| Right Arrow | 导航到右一项 |
+| Left Arrow  | 导航到左一项   |
+| Enter       | 点击numberPicker的按钮                 |
diff --git a/docs/pagination/demo/accessibility.md b/docs/pagination/demo/accessibility.md
@@ -0,0 +1,28 @@
+# 无障碍
+
+- order: 9
+
+组件已支持无障碍
+
+:::lang=en-us
+# Accessibility
+
+- order: 9
+
+Components already support accessibility
+:::
+
+---
+
+````jsx
+import { Pagination } from '@alifd/next';
+
+const change = function(value) {
+    console.log(value);
+};
+
+ReactDOM.render(
+    <Pagination defaultCurrent={2} onChange={change} />,
+    mountNode
+);
+````
diff --git a/docs/pagination/index.en-us.md b/docs/pagination/index.en-us.md
@@ -38,3 +38,15 @@ When there is a lot of content to show when paged load processing is needed.
 | hideOnlyOnePage  | Whether to hide the pager when the number of pages is 1                     | Boolean                           | false       |
 | showJump         | When the number of pagination is 1, if the hidden pager type is set to normal, after the page number exceeds 5 pages, the jump input box and button will be displayed. When showJump is set to false, the jump zone is no longer displayed.                                                                      | Boolean                           | true        |
 | link             | Set the jump link url of the page number button. Its value is a template string containing {page}, such as：<http://xxx.com/{page}>                                                                                  | String                            | -           |
+
+## ARIA and KeyBoard
+
+| KeyBoard          | Descripiton                              |
+| :---------- | :------------------------------ |
+| Up Arrow    | navigate to previous item                          |
+| Down Arrow  | navigate to next item                          |
+| Right Arrow | navigate to the right one |
+| Left Arrow  | navigation to the left one   |
+| Enter       | make sure to jump to the appropriate page                |
+
+