From cc436ddfc820a134d069a638292c1ae4675b8975 Mon Sep 17 00:00:00 2001 From: skysuka <793695775@qqq.com> Date: Fri, 15 Feb 2019 16:53:01 +0800 Subject: [PATCH] add a11y(2nd component) markdown --- docs/badge/demo/accessibility.md | 33 +++++++++++++++ docs/badge/index.en-us.md | 5 +++ docs/badge/index.md | 6 +++ docs/breadcrumb/demo/accessibility.md | 27 ++++++++++++ docs/breadcrumb/index.en-us.md | 9 ++++ docs/breadcrumb/index.md | 9 ++++ docs/collapse/index.en-us.md | 11 +++++ docs/collapse/index.md | 11 +++++ docs/dropdown/demo/accessibility.md | 31 ++++++++++++++ docs/dropdown/index.en-us.md | 13 ++++++ docs/dropdown/index.md | 11 +++++ docs/nav/demo/accessibility.md | 52 ++++++++++++++++++++++++ docs/nav/index.en-us.md | 13 ++++++ docs/nav/index.md | 11 +++++ docs/number-picker/demo/accessibility.md | 30 ++++++++++++++ docs/number-picker/index.en-us.md | 12 ++++++ docs/number-picker/index.md | 9 ++++ docs/pagination/demo/accessibility.md | 28 +++++++++++++ docs/pagination/index.en-us.md | 12 ++++++ docs/pagination/index.md | 10 +++++ docs/paragraph/demo/accessibility.md | 28 +++++++++++++ docs/paragraph/index.en-us.md | 9 ++++ docs/paragraph/index.md | 9 ++++ docs/progress/demo/accessibility.md | 24 +++++++++++ docs/progress/index.en-us.md | 8 ++++ docs/progress/index.md | 6 +++ docs/range/demo/accessibility.md | 35 ++++++++++++++++ docs/range/index.en-us.md | 8 ++++ docs/range/index.md | 7 ++++ docs/rating/index.en-us.md | 11 +++++ docs/rating/index.md | 10 +++++ docs/slider/demo/accessibility.md | 49 ++++++++++++++++++++++ docs/slider/index.en-us.md | 9 ++++ docs/slider/index.md | 11 +++++ docs/step/demo/accessibility.md | 28 +++++++++++++ docs/step/index.en-us.md | 9 ++++ docs/step/index.md | 6 +++ docs/switch/demo/accessibility.md | 36 ++++++++++++++++ docs/switch/index.en-us.md | 11 +++++ docs/switch/index.md | 11 +++++ docs/tab/demo/accessibility.md | 35 ++++++++++++++++ docs/tab/index.en-us.md | 10 ++++- docs/tab/index.md | 8 ++++ docs/time-picker/demo/accessibility.md | 21 ++++++++++ docs/time-picker/index.en-us.md | 12 ++++++ docs/time-picker/index.md | 11 +++++ 46 files changed, 764 insertions(+), 1 deletion(-) create mode 100644 docs/badge/demo/accessibility.md create mode 100644 docs/breadcrumb/demo/accessibility.md create mode 100644 docs/dropdown/demo/accessibility.md create mode 100644 docs/nav/demo/accessibility.md create mode 100644 docs/number-picker/demo/accessibility.md create mode 100644 docs/pagination/demo/accessibility.md create mode 100644 docs/paragraph/demo/accessibility.md create mode 100644 docs/progress/demo/accessibility.md create mode 100644 docs/range/demo/accessibility.md create mode 100644 docs/slider/demo/accessibility.md create mode 100644 docs/step/demo/accessibility.md create mode 100644 docs/switch/demo/accessibility.md create mode 100644 docs/tab/demo/accessibility.md create mode 100644 docs/time-picker/demo/accessibility.md diff --git a/docs/badge/demo/accessibility.md b/docs/badge/demo/accessibility.md new file mode 100644 index 0000000000..badf760c7f --- /dev/null +++ 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( +
+ + new mail + +
, mountNode); +```` + +````css +.next-badge { + margin-right: 16px; +} +```` + diff --git a/docs/badge/index.en-us.md b/docs/badge/index.en-us.md index 28b6e0e30f..a082503783 100644 --- 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 index 8702ececa3..183d521b04 100644 --- 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 new file mode 100644 index 0000000000..5ddfd60d2a --- /dev/null +++ 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( + + Home + Accessibility rule + Accessibility practice + , + mountNode); +```` diff --git a/docs/breadcrumb/index.en-us.md b/docs/breadcrumb/index.en-us.md index e404807dd7..e8c817e0a1 100644 --- 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 ``, otherwise it is `` | 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 index d1bb11b7f5..740fc480cb 100644 --- a/docs/breadcrumb/index.md +++ b/docs/breadcrumb/index.md @@ -29,3 +29,12 @@ | 参数 | 说明 | 类型 | 默认值 | | ---- | -------------------------------------------- | ------ | --- | | link | 面包屑节点链接，如果设置这个属性，则该节点为`` ，否则是`` | String | - | + +## ARIA and KeyBoard + +| 按键 | 说明 | +| :---------- | :------------------------------ | +| Up Arrow | 导航到上一项 | +| Down Arrow | 导航到下一项 | +| Right Arrow | 导航到右一项 | +| Left Arrow | 导航到左一项 | \ No newline at end of file diff --git a/docs/collapse/index.en-us.md b/docs/collapse/index.en-us.md index 0ddde12b47..fdde51fbce 100644 --- 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 | \ No newline at end of file diff --git a/docs/collapse/index.md b/docs/collapse/index.md index a21159a2fe..e095751ebe 100644 --- 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的折叠状态 | \ No newline at end of file diff --git a/docs/dropdown/demo/accessibility.md b/docs/dropdown/demo/accessibility.md new file mode 100644 index 0000000000..448b1e6297 --- /dev/null +++ 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 = ( + + Option 1 + Option 2 + +); + +ReactDOM.render( + test accessibility dropdown} afterOpen={() => console.log('after open')}> + {menu} + , mountNode); +```` diff --git a/docs/dropdown/index.en-us.md b/docs/dropdown/index.en-us.md index 77830470ee..f4b842a32f 100644 --- 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 index ce95989dbd..3e96227c12 100644 --- 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 | 关闭子菜单，导航到父级菜单 | \ No newline at end of file diff --git a/docs/nav/demo/accessibility.md b/docs/nav/demo/accessibility.md new file mode 100644 index 0000000000..b7a6460d60 --- /dev/null +++ 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 = Accessibility; +const footer = Login in; + +ReactDOM.render( + + , 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 index a3b837b686..65990d66e4 100644 --- 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 index 739412cfd3..565c05596b 100644 --- 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 | 关闭子菜单，导航到父级菜单 | \ No newline at end of file diff --git a/docs/number-picker/demo/accessibility.md b/docs/number-picker/demo/accessibility.md new file mode 100644 index 0000000000..03ff537f76 --- /dev/null +++ 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( +
+ +
, + mountNode +); +```` \ No newline at end of file diff --git a/docs/number-picker/index.en-us.md b/docs/number-picker/index.en-us.md index ab31b68437..0cb4c4e7a2 100644 --- 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

**signature**:
Function(value: Number) => String/Number
**params**:
_value_: {Number} current value
**return**:
{String/Number} formatted value
| 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 index f04f09033e..778a0f0a8d 100644 --- a/docs/number-picker/index.md +++ b/docs/number-picker/index.md @@ -49,3 +49,12 @@ | format | 格式化当前值

**签名**:
Function(value: Number) => String/Number
**参数**:
_value_: {Number} null
**返回值**:
{String/Number} null
| 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 new file mode 100644 index 0000000000..1bb711e588 --- /dev/null +++ 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( + , + mountNode +); +```` \ No newline at end of file diff --git a/docs/pagination/index.en-us.md b/docs/pagination/index.en-us.md index 976940a132..6f7169ed6c 100644 --- 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： | 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 | + + diff --git a/docs/pagination/index.md b/docs/pagination/index.md index 88204d8e7a..81665f65d7 100644 --- a/docs/pagination/index.md +++ b/docs/pagination/index.md @@ -39,3 +39,13 @@ | hideOnlyOnePage | 当分页数为1时，是否隐藏分页器 | Boolean | false | | showJump | type 设置为 normal 时，在页码数超过5页后，会显示跳转输入框与按钮，当设置 showJump 为 false 时，不再显示该跳转区域 | Boolean | true | | link | 设置页码按钮的跳转链接，它的值为一个包含 {page} 的模版字符串，如： | String | - | + +## ARIA and KeyBoard + +| 按键 | 说明 | +| :---------- | :------------------------------ | +| Up Arrow | 导航到上一项 | +| Down Arrow | 导航到下一项 | +| Right Arrow | 导航到右一项 | +| Left Arrow | 导航到左一项 | +| Enter | 确认跳转到相应的页面 | diff --git a/docs/paragraph/demo/accessibility.md b/docs/paragraph/demo/accessibility.md new file mode 100644 index 0000000000..02efe856a5 --- /dev/null +++ b/docs/paragraph/demo/accessibility.md @@ -0,0 +1,28 @@ +# 无障碍 + +- order: 2 + +组件已支持无障碍。 + +:::lang=en-us +# Accessibility + +- order: 2 + +Components already support accessibility +::: + +--- + +````jsx +import { Paragraph } from '@alifd/next'; + +const content = 'Accessibility check is very important for all of us.'; + +ReactDOM.render(
+ {content} +
+ {content} +
, mountNode); +```` + diff --git a/docs/paragraph/index.en-us.md b/docs/paragraph/index.en-us.md index 90543d493e..e5e1ece816 100644 --- a/docs/paragraph/index.en-us.md +++ b/docs/paragraph/index.en-us.md @@ -24,3 +24,12 @@ Paragraphs are used to control the overall text visual of the page, and are main | ---- | ------------------------------------------ | ------ | -------- | | size | component size. Default: medium medium, small small | String | 'medium' | | type | What way to show paragraphs. Default: long shows all text, short shows three lines (not mandatory) | String | 'long' | + +## 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/paragraph/index.md b/docs/paragraph/index.md index 045205d989..d03e150008 100644 --- a/docs/paragraph/index.md +++ b/docs/paragraph/index.md @@ -24,3 +24,12 @@ | ---- | ------------------------------------------------------------------ | ---- | -------- | | size | 组件大小。

**可选值**:
'medium'(中号)
'small'(小号) | Enum | 'medium' | | type | 什么方式展示段落

**可选值**:
'long'(展示所有文本)
'short'(展示三行以内（非强制）) | Enum | 'long' | + +## ARIA and KeyBoard + +| 按键 | 说明 | +| :---------- | :------------------------------ | +| Up Arrow | 导航到上一项 | +| Down Arrow | 导航到下一项 | +| Right Arrow | 导航到右一项 | +| Left Arrow | 导航到左一项 | diff --git a/docs/progress/demo/accessibility.md b/docs/progress/demo/accessibility.md new file mode 100644 index 0000000000..c1d2f08692 --- /dev/null +++ b/docs/progress/demo/accessibility.md @@ -0,0 +1,24 @@ +# 无障碍 + +- order: 8 + +组件已支持无障碍 + +:::lang=en-us +# Accessibility + +- order: 8 + +Components already support accessibility. +::: + +--- + +````jsx +import { Progress } from '@alifd/next'; + +ReactDOM.render(
+ + +
, mountNode); +```` diff --git a/docs/progress/index.en-us.md b/docs/progress/index.en-us.md index 86c8e7c5ff..14ad2fd632 100644 --- a/docs/progress/index.en-us.md +++ b/docs/progress/index.en-us.md @@ -32,3 +32,11 @@ If a task will take long time to complete, it could be use a `Progress` to show | hasBorder | Has border for progress line | Boolean | false | | textRender | Text render

**signature**:
Function(percent: Number) => ReactNode
**parameter**:
_percent_: {Number} current percent
**return**:
{ReactNode} text node
| Function | percent => `${Math.floor(percent)}%` | | color | progressbar color, priority: color > progressive > state | String | '' | +## ARIA and KeyBoard + +| KeyBoard | Descripiton | +| :---------- | :------------------------------ | +| Right Arrow | navigate to the next one | +| Left Arrow | navigation to the previous one | + + diff --git a/docs/progress/index.md b/docs/progress/index.md index b3b96048c0..64854996b4 100644 --- a/docs/progress/index.md +++ b/docs/progress/index.md @@ -33,3 +33,9 @@ | textRender | 文本渲染函数

**签名**:
Function(percent: Number, option: Object) => ReactNode
**参数**:
_percent_: {Number} 当前的进度信息
_option_: {Object} 额外的参数
**返回值**:
{ReactNode} 返回文本节点
| Function | percent => `${Math.floor(percent)}%` | | color | 进度条颜色, 显示优先级: color > progressive > state | String | - | | backgroundColor | 背景色 | String | - | +## ARIA and KeyBoard + +| 按键 | 说明 | +| :---------- | :------------------------------ | +| Right Arrow | 导航到下一条进度条 | +| Left Arrow | 导航到上一条进度条 | diff --git a/docs/range/demo/accessibility.md b/docs/range/demo/accessibility.md new file mode 100644 index 0000000000..f04ebb298d --- /dev/null +++ b/docs/range/demo/accessibility.md @@ -0,0 +1,35 @@ +# 无障碍 + +- order: 8 + +组件已支持无障碍。 + +:::lang=en-us +# Accessibility + +- order: 8 + +Components already support accessibility. +::: + +--- + +````jsx +import { Range } from '@alifd/next'; + + +const style = { + marginBottom: '15px' +}; + +ReactDOM.render(( +
+ +

single slider - from left to right

+ +

single slider - from right to left

+ + +
+), mountNode); +```` \ No newline at end of file diff --git a/docs/range/index.en-us.md b/docs/range/index.en-us.md index 77d47ea8d4..89272a26e5 100644 --- a/docs/range/index.en-us.md +++ b/docs/range/index.en-us.md @@ -42,3 +42,11 @@ Range Component is used to select a value in a range by dragging slider. Normall | pure | pure render or not | Boolean | false | | fixedWidth | drag a line with fixed width. It considers `slider` as `double`, and `defaultValue` must be a interval. | Boolean | false | | tooltipVisible| tooltip always be visible or not | Boolean | false | + +## ARIA and KeyBoard + +| KeyBoard | Descripiton | +| :---------- | :------------------------------ | +| Control+Shift+Right Arrow | control the slider to move to the right | +| Control+Shift+Left Arrow | control the slider to move to the left | +| Tab | switch to other slider | \ No newline at end of file diff --git a/docs/range/index.md b/docs/range/index.md index e6fa7c6ad7..e432232afe 100644 --- a/docs/range/index.md +++ b/docs/range/index.md @@ -43,3 +43,10 @@ | pure | 是否pure render | Boolean | false | | fixedWidth | 是否为拖动线段类型,默认slider为double, defaultValue必传且指定区间 | Boolean | false | | tooltipVisible | tooltip是否默认展示 | Boolean | false | +## ARIA and KeyBoard + +| 按键 | 说明 | +| :---------- | :------------------------------ | +| Control+Shift+Right Arrow | 控制滑块往右移动 | +| Control+Shift+Left Arrow | 控制滑块向左移动 | +| Tab | 切换滑动条 | diff --git a/docs/rating/index.en-us.md b/docs/rating/index.en-us.md index 277ff6223b..d6715a7833 100644 --- a/docs/rating/index.en-us.md +++ b/docs/rating/index.en-us.md @@ -27,3 +27,14 @@ Rating component is usually used for customer feedback. | onHoverChange | callback function on hover star

**signatures**:
Function(value: String) => void
**params**:
_value_: {String} score | Function | func.noop | | disabled | disabled rate or not | Boolean | false | | readAs | make sense when you set id and enable accessibility

**signatures**:
Function() => void | Function | val => val | + +## 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 | +| Space | select star rating | + diff --git a/docs/rating/index.md b/docs/rating/index.md index 856a394d9a..2b0f9b7f68 100644 --- a/docs/rating/index.md +++ b/docs/rating/index.md @@ -27,3 +27,13 @@ | onHoverChange | 用户hover评分时触发的回调

**签名**:
Function(value: String) => void
**参数**:
_value_: {String} 评分值 | Function | func.noop | | disabled | 是否禁用 | Boolean | false | | readAs | 传入id支持无障碍时，参数才有意义

**签名**:
Function() => void | Function | val => val | + +## ARIA and KeyBoard + +| 按键 | 说明 | +| :---------- | :------------------------------ | +| Up Arrow | 导航到上一项 | +| Down Arrow | 导航到下一项 | +| Right Arrow | 导航到右一项 | +| Left Arrow | 导航到左一项 | +| Space | 选中星级等级 | \ No newline at end of file diff --git a/docs/slider/demo/accessibility.md b/docs/slider/demo/accessibility.md new file mode 100644 index 0000000000..4cf4c46958 --- /dev/null +++ b/docs/slider/demo/accessibility.md @@ -0,0 +1,49 @@ +# 无障碍 + +- order: 20 + +组件已支持无障碍 + +:::lang=en-us +# Accessibility + +- order: 20 + +Components already support accessibility +::: + +--- + +````jsx +import { Slider } from '@alifd/next'; + +const slides = [1, 2, 3, 4, 5, 6, 7, 8, 9].map(item =>

{item}

); + +ReactDOM.render( +
+
slide one picture one at a time
+ + {slides} + +
+ , mountNode); +```` + +````css +.next-slick .h3, .h4 { + margin: 0 5px; + background: #4F74B3; + color: #fff; + line-height: 150px; + text-align: center; + margin-top: 0; + margin-bottom: 0; +} + +.demo-item-title { + font-size: 16px; + color: #333; + padding: 8px; + margin: 20px 0 10px 0; +} +```` diff --git a/docs/slider/index.en-us.md b/docs/slider/index.en-us.md index 2e99ad15c7..53c90c6d8d 100644 --- a/docs/slider/index.en-us.md +++ b/docs/slider/index.en-us.md @@ -60,3 +60,12 @@ The Slider are independent of each other and there is no logical relationship be ## Other next-slider is forked from [react-slick](https://github.com/akiran/react-slick) + +| 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 | control component button | + diff --git a/docs/slider/index.md b/docs/slider/index.md index 3f96649b4a..a9cd550fed 100644 --- a/docs/slider/index.md +++ b/docs/slider/index.md @@ -61,3 +61,14 @@ ## 说明 next-slider is forked from [react-slick](https://github.com/akiran/react-slick) + +## ARIA and KeyBoard + +| 按键 | 说明 | +| :---------- | :------------------------------ | +| Up Arrow | 导航到上一项 | +| Down Arrow | 导航到下一项 | +| Right Arrow | 导航到右一项 | +| Left Arrow | 导航到左一项 | +| Enter | 控制轮播组件按钮 | + diff --git a/docs/step/demo/accessibility.md b/docs/step/demo/accessibility.md new file mode 100644 index 0000000000..ff41dd1244 --- /dev/null +++ b/docs/step/demo/accessibility.md @@ -0,0 +1,28 @@ +# 无障碍 + +- order: 7 + +组件已支持无障碍。 + +:::lang=en-us +# Accessibility + +- order: 7 + +Components already support accessibility. +::: + +--- + +````jsx +import { Step } from '@alifd/next'; + +const steps = [['Step 1', 'Open the refrigerator door'], ['Step 2', 'Put the elephant in the refrigerator'], ['Step 3', 'Close the refrigerator door']].map((item, index) => ); + +ReactDOM.render(
+

Arrow Accessibility Test

+ + {steps} + +
, mountNode); +```` diff --git a/docs/step/index.en-us.md b/docs/step/index.en-us.md index e3467b609d..84fc689c47 100644 --- a/docs/step/index.en-us.md +++ b/docs/step/index.en-us.md @@ -34,3 +34,12 @@ | disabled | disable step node | Boolean | - | | itemRender | custom node render function (it will overwirde Step's itemRender)
**Function signature**:
Function(index: Number, status: String) => Node | Function | - | | onClick | the callback when click to step node

**Function signature**:
Function(index: Number) => void
**Parameters**:
_index_: {Number} node index | Function | () => { } | + +## ARIA and KeyBoard + +| KeyBoard | Descripiton | +| :---------- | :------------------------------ | +| Right Arrow | navigate to the next step | +| Left Arrow | navigation to the previous step | + + diff --git a/docs/step/index.md b/docs/step/index.md index e844e7c496..d593f347d2 100644 --- a/docs/step/index.md +++ b/docs/step/index.md @@ -33,3 +33,9 @@ | percent | 百分比 | Number | - | | disabled | 是否禁用 | Boolean | - | | onClick | 点击步骤时的回调

**签名**:
Function(index: Number) => void
**参数**:
_index_: {Number} 节点索引 | Function | () => { } | +## ARIA and KeyBoard + +| 按键 | 说明 | +| :---------- | :------------------------------ | +| Right Arrow | 导航到下一个step | +| Left Arrow | 导航到上一个step | diff --git a/docs/switch/demo/accessibility.md b/docs/switch/demo/accessibility.md new file mode 100644 index 0000000000..f526255750 --- /dev/null +++ b/docs/switch/demo/accessibility.md @@ -0,0 +1,36 @@ +# 无障碍 + +- order: 3 + +组件已支持无障碍 + +:::lang=en-us +# Accessibility + +- order: 3 + +Components already support accessibility. +::: + +--- + +````jsx +import { Switch } from '@alifd/next'; + + +function onChange(checked) { + console.log(`switch to ${checked}`); +} + +ReactDOM.render(
+ + +
, +mountNode); +```` + +````css +.large-width { + width: 100px; +} +```` \ No newline at end of file diff --git a/docs/switch/index.en-us.md b/docs/switch/index.en-us.md index 87262ae950..06a5690fc5 100644 --- a/docs/switch/index.en-us.md +++ b/docs/switch/index.en-us.md @@ -38,3 +38,14 @@ The Switch Component toggles the state. The options in the switch, as well as it ## Keyboard Support - press enter to switch when focused + +## 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 | toggle selected or checked | +| Space | toggle selected or checked | \ No newline at end of file diff --git a/docs/switch/index.md b/docs/switch/index.md index 3571cb7972..b2e7c34abf 100644 --- a/docs/switch/index.md +++ b/docs/switch/index.md @@ -38,3 +38,14 @@ ## 键盘支持 - 支持键盘控制，tab选中后按回车进行状态切换。 + +## ARIA and KeyBoard + +| 按键 | 说明 | +| :---------- | :------------------------------ | +| Up Arrow | 导航到上一项 | +| Down Arrow | 导航到下一项 | +| Right Arrow | 导航到右一项 | +| Left Arrow | 导航到左一项 | +| Enter | 切换选中状态 | +| SPACE | 切换选中状态 | \ No newline at end of file diff --git a/docs/tab/demo/accessibility.md b/docs/tab/demo/accessibility.md new file mode 100644 index 0000000000..345fbbbf06 --- /dev/null +++ b/docs/tab/demo/accessibility.md @@ -0,0 +1,35 @@ +# 无障碍 + +- order: 15 + +组件已支持无障碍 + +:::lang=en-us +# Accessibility + +- order: 15 + +Components already support accessibility +::: + +--- + +````jsx +import { Tab } from '@alifd/next'; + +ReactDOM.render( + + Home content + Doc content + Help Content + + , mountNode); +```` + +````css +.next-tabs-content { + color: #333; + font-size: 12px; + padding: 12px; +} +```` \ No newline at end of file diff --git a/docs/tab/index.en-us.md b/docs/tab/index.en-us.md index eb44029394..2423ba05cb 100644 --- a/docs/tab/index.en-us.md +++ b/docs/tab/index.en-us.md @@ -47,4 +47,12 @@ Disable animation with `animation={false}` | --------- | ---------- | --------- | ----- | | title | Title of tab | ReactNode | - | | closeable | If tab is closeable | Boolean | false | -| disabled | If tab is disabled | Boolean | false | \ No newline at end of file +| disabled | If tab is disabled | Boolean | false | + +## ARIA and KeyBoard + +| KeyBoard | Descripiton | +| :---------- | :------------------------------ | +| 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 | +| Space | select the current tab | \ No newline at end of file diff --git a/docs/tab/index.md b/docs/tab/index.md index 1fb1f7d32a..7d62426ac7 100644 --- a/docs/tab/index.md +++ b/docs/tab/index.md @@ -60,3 +60,11 @@ Fusion 提供了三级选项卡，分别用于不同的场景。 | title | 选项卡标题 | ReactNode | - | | closeable | 单个选项卡是否可关闭 | Boolean | false | | disabled | 选项卡是否被禁用 | Boolean | - | + +## ARIA and KeyBoard + +| 按键 | 说明 | +| :---------- | :------------------------------ | +| Right Arrow | 打开子菜单，导航到子菜单第一项；横向菜单条第一层，导航到右一项 | +| Left Arrow | 关闭子菜单，导航到父级菜单；横向菜单条第一层，导航到左一项 | +| Space | 选中当前选项卡 | diff --git a/docs/time-picker/demo/accessibility.md b/docs/time-picker/demo/accessibility.md new file mode 100644 index 0000000000..71f70ca206 --- /dev/null +++ b/docs/time-picker/demo/accessibility.md @@ -0,0 +1,21 @@ +# 无障碍 + +- order: 8 + +组件已支持无障碍。 + +:::lang=en-us +# Accessibility + +- order: 8 + +Components already support accessibility. +::: + +--- + +````jsx +import { TimePicker } from '@alifd/next'; + +ReactDOM.render( console.log(val)} />, mountNode); +```` diff --git a/docs/time-picker/index.en-us.md b/docs/time-picker/index.en-us.md index 0558fef576..8e517ad000 100644 --- a/docs/time-picker/index.en-us.md +++ b/docs/time-picker/index.en-us.md @@ -52,3 +52,15 @@ By default, TimePicker using moment instance as input value, which is the sugges | popupProps | Props of popup | Object | - | | disabled | Disable the picker | Boolean | false | | onChange | Callback when date changes

**signature**:
Function(value: Object/String) => void
**paramter**:
_value_: {Object/String} date value | Function | func.noop | + +## 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 | confirm the input time and click the cancel button to cancel the input time | + + diff --git a/docs/time-picker/index.md b/docs/time-picker/index.md index bcd8633d76..370b436728 100644 --- a/docs/time-picker/index.md +++ b/docs/time-picker/index.md @@ -52,3 +52,14 @@ | popupProps | 弹层属性 | Object | - | | disabled | 是否禁用 | Boolean | false | | onChange | 时间值改变时的回调

**签名**:
Function(value: Object/String) => void
**参数**:
_value_: {Object/String} 时间对象或时间字符串 | Function | func.noop | + + +## ARIA and KeyBoard + +| 按键 | 说明 | +| :---------- | :------------------------------ | +| Up Arrow | 导航到上一项 | +| Down Arrow | 导航到下一项 | +| Right Arrow | 导航到右一项 | +| Left Arrow | 导航到左一项 | +| Enter | 确认输入时间，点击取消按钮取消输入时间 |