Skip to content

Commit

Permalink
feat(slider): support keyboard interaction on Slider and RangeSlider (#…
Browse files Browse the repository at this point in the history 
…1324)

* feat(slider): support keyboard interaction on Slider and RangeSlider

* test(calendar): update tests
  • Loading branch information
@simonguo
simonguo committed Oct 25, 2020
1 parent 24b4379 commit 8b1f6cf
Show file tree
Hide file tree
Showing 9 changed files with 354 additions and 118 deletions.
109 changes: 73 additions & 36 deletions docs/pages/components/slider/en-US/index.md
View file
Expand Up @@ -43,46 +43,83 @@ A Slider component for displaying current value

<!--{include:`size.md`}-->

## Accessibility

WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#slider

### Keyboard Interaction

- <kbd>ArrowRight</kbd>, <kbd>ArrowUp</kbd>: Increase the value of the slider by one step.
- <kbd>ArrowLeft</kbd>, <kbd>ArrowDown</kbd>: Decrease the value of the slider by one step.
- <kbd>Home</kbd>: Set the slider to the first allowed value in its range.
- <kbd>End</kbd>: Set the slider to the last allowed value in its range.

### WAI-ARIA Roles, States, and Properties

- The element serving as the focusable slider control has role `slider`.
- The slider element has the `aria-valuenow` property set to a decimal value representing the current value of the slider.
- If the value of aria-valuenow is not user-friendly, the `aria-valuetext` property is set to a string that makes the slider value understandable. You can change the name with the `getAriaValueText` or `aria-valuetext` prop.

```jsx
<Slider getAriaValueText={value => `${value}MB`} />
```

- The slider element has the `aria-valuemin` property set to a decimal value representing the minimum allowed value of the slider.
- The slider element has the `aria-valuemax` property set to a decimal value representing the maximum allowed value of the slider.

- If the slider is vertically oriented, it has `aria-orientation` set to `vertical`. The default value of `aria-orientation` for a slider is `horizontal`.

- If the slider has a visible label, it is referenced by `aria-labelledby` on the slider element. Otherwise, the slider element has a label provided by `aria-label`.

```jsx
<>
<label id="slider-label">Memory size</label>
<Slider aria-labelledby="slider-label" />
</>
```

## Props

### `<Slider>`

| Property | Type `(Default)` | Description |
| --------------- | --------------------------- | --------------------------------------------- |
| barClassName | string | A css class to apply to the Bar DOM node |
| defaultValue | number | Default value |
| disabled | boolean | The disabled of component |
| graduated | boolean | Show Ticks |
| handleClassName | string | A css class to apply to the Handle node |
| handleStyle | CSSProperties | A css style to apply to the Handle node |
| handleTitle | ReactNode | Customizing what is displayed inside a handle |
| max | number`(100)` | Maximum sliding range |
| min | number`(0)` | Minimum value of sliding range |
| onChange | (value: number) => void | Callback function that changes data |
| progress | boolean | Show sliding progress bar |
| renderMark | (mark: number) => ReactNode | Customize labels on the render ruler |
| step | number`(1)` | Slide the value of one step |
| tooltip | boolean`(true)` | Whether to show `Tooltip` when sliding |
| value | number | Value (Controlled) |
| vertical | boolean | Vertical Slide |
| Property | Type `(Default)` | Description |
| ---------------- | --------------------------- | ---------------------------------------------------------------- |
| barClassName | string | A css class to apply to the Bar DOM node |
| defaultValue | number | Default value |
| disabled | boolean | The disabled of component |
| getAriaValueText | (value: number) => string; | Provide a user-friendly name for the current value of the slider |
| graduated | boolean | Show Ticks |
| handleClassName | string | A css class to apply to the Handle node |
| handleStyle | CSSProperties | A css style to apply to the Handle node |
| handleTitle | ReactNode | Customizing what is displayed inside a handle |
| max | number`(100)` | Maximum sliding range |
| min | number`(0)` | Minimum value of sliding range |
| onChange | (value: number) => void | Callback function that changes data |
| progress | boolean | Show sliding progress bar |
| renderMark | (mark: number) => ReactNode | Customize labels on the render ruler |
| step | number`(1)` | Slide the value of one step |
| tooltip | boolean`(true)` | Whether to show `Tooltip` when sliding |
| value | number | Value (Controlled) |
| vertical | boolean | Vertical Slide |

### `<RangeSlider>`

| Property | Type `(Default)` | Description |
| --------------- | -------------------------------- | --------------------------------------------- |
| barClassName | string | A css class to apply to the Bar DOM node |
| defaultValue | [number,number] | Default value |
| disabled | boolean | The disabled of component |
| graduated | boolean | Show Ticks |
| handleClassName | string | A css class to apply to the Handle node |
| handleStyle | CSSProperties | A css style to apply to the Handle node |
| handleTitle | ReactNode | Customizing what is displayed inside a handle |
| max | number`(100)` | Maximum sliding range |
| min | number`(0)` | Minimum value of sliding range |
| onChange | (value: [number,number]) => void | Callback function that changes data |
| progress | boolean | Show sliding progress bar |
| renderMark | (mark: number) => ReactNode | Customize labels on the render ruler |
| step | number`(1)` | Slide the value of one step |
| tooltip | boolean`(true)` | Whether to show `Tooltip` when sliding |
| value | [number,number] | Value (Controlled) |
| vertical | boolean | Vertical Slide |
| Property | Type `(Default)` | Description |
| ---------------- | ------------------------------------------------------ | ---------------------------------------------------------------- |
| barClassName | string | A css class to apply to the Bar DOM node |
| defaultValue | [number,number] | Default value |
| disabled | boolean | The disabled of component |
| getAriaValueText | (value: number,eventKey:'start'&#124;'end') => string; | Provide a user-friendly name for the current value of the slider |
| graduated | boolean | Show Ticks |
| handleClassName | string | A css class to apply to the Handle node |
| handleStyle | CSSProperties | A css style to apply to the Handle node |
| handleTitle | ReactNode | Customizing what is displayed inside a handle |
| max | number`(100)` | Maximum sliding range |
| min | number`(0)` | Minimum value of sliding range |
| onChange | (value: [number,number]) => void | Callback function that changes data |
| progress | boolean | Show sliding progress bar |
| renderMark | (mark: number) => ReactNode | Customize labels on the render ruler |
| step | number`(1)` | Slide the value of one step |
| tooltip | boolean`(true)` | Whether to show `Tooltip` when sliding |
| value | [number,number] | Value (Controlled) |
| vertical | boolean | Vertical Slide |
107 changes: 71 additions & 36 deletions docs/pages/components/slider/zh-CN/index.md
View file
Expand Up @@ -43,46 +43,81 @@

<!--{include:`size.md`}-->

### 无障碍设计

WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#slider

### 键盘交互

- <kbd>ArrowRight</kbd>，<kbd>ArrowUp</kbd>: 将 Slider 的值增加一级。
- <kbd>ArrowLeft</kbd>，<kbd>ArrowDown</kbd>: 将 Slider 的值减小一级。
- <kbd>Home</kbd>: 将 Slider 设置为其范围内的第一个允许值。
- <kbd>End</kbd>: 将 Slider 设置为其范围内的最后一个允许值。

### WAI-ARIA Roles, States, and Properties

- 用作可聚焦 Slider 元素具有 `slider` role。
- Slider 元素的 `aria-valuenow` 属性设置为代当前值的十进制值。
- 如果 `aria-valuenow` 的值对用户不友好，则将 `aria-valuetext` 属性设置为字符串，以使滑块值易于理解。 您可以使用 `getAriaValueText` 或 `aria-valuetext`属性更改名称。

```jsx
<Slider getAriaValueText={value => `${value}MB`} />
```

- Slider 元素的 `aria-valuemin` 属性设置为十进制值，代表最小允许值。
- Slider 元素的 `aria-valuemax` 属性设置为十进制值，代表最大允许值。
- 如果 Slider 是垂直方向的，则将其 `aria-orientation` 设置为 `vertical`。 滑块的 `aria-orientation` 的默认值为 `horizontal`。
- 如果 Slider 具有可见标签，则在元素上添加 `aria-labelledby` 引用。 否则，Slider 元素具有 `aria-label` 提供的标签。

```jsx
<>
<label id="slider-label">内存大小</label>
<Slider aria-labelledby="slider-label" />
</>
```

## Props

### `<Slider>`

| 属性名称 | 类型`(默认值)` | 描述 |
| --------------- | --------------------------- | --------------------------------- |
| barClassName | string | 应用于滑动条 DOM 节点的 css class |
| defaultValue | number | 默认值 |
| disabled | boolean | 是否禁用 |
| graduated | boolean | 显示刻度 |
| handleClassName | string | 应用于手柄 DOM 节点的 css class |
| handleStyle | CSSProperties | 附加手柄样式 |
| handleTitle | ReactNode | 自定义手柄内显示内容 |
| max | number`(100)` | 滑动范围的最大值 |
| min | number`(0)` | 滑动范围的最小值 |
| onChange | (value: number) => void | 数据发生改变的回调函数 |
| progress | boolean | 显示滑动的进度条 |
| renderMark | (mark: number) => ReactNode | 自定义渲染标尺上的标签 |
| step | number`(1)` | 滑动一步的值 |
| tooltip | boolean`(true)` | 滑动时候，是否显示 tooltip |
| value | number | 值（受控） |
| vertical | boolean | 垂直滑动 |
| 属性名称 | 类型`(默认值)` | 描述 |
| ---------------- | --------------------------- | ---------------------------------- |
| barClassName | string | 应用于滑动条 DOM 节点的 css class |
| defaultValue | number | 默认值 |
| disabled | boolean | 是否禁用 |
| getAriaValueText | (value: number) => string; | 提供 Slider 的当前值的用户友好名称 |
| graduated | boolean | 显示刻度 |
| handleClassName | string | 应用于手柄 DOM 节点的 css class |
| handleStyle | CSSProperties | 附加手柄样式 |
| handleTitle | ReactNode | 自定义手柄内显示内容 |
| max | number`(100)` | 滑动范围的最大值 |
| min | number`(0)` | 滑动范围的最小值 |
| onChange | (value: number) => void | 数据发生改变的回调函数 |
| progress | boolean | 显示滑动的进度条 |
| renderMark | (mark: number) => ReactNode | 自定义渲染标尺上的标签 |
| step | number`(1)` | 滑动一步的值 |
| tooltip | boolean`(true)` | 滑动时候，是否显示 tooltip |
| value | number | 值（受控） |
| vertical | boolean | 垂直滑动 |

### `<RangeSlider>`

| 属性名称 | 类型`(默认值)` | 描述 |
| --------------- | -------------------------------- | --------------------------------- |
| barClassName | string | 应用于滑动条 DOM 节点的 css class |
| defaultValue | [number,number] | 默认值 |
| disabled | boolean | 是否禁用 |
| graduated | boolean | 显示刻度 |
| handleClassName | string | 应用于手柄 DOM 节点的 css class |
| handleStyle | CSSProperties | 附加手柄样式 |
| handleTitle | ReactNode | 自定义手柄内显示内容 |
| max | number`(100)` | 滑动范围的最大值 |
| min | number`(0)` | 滑动范围的最小值 |
| onChange | (value: [number,number]) => void | 数据发生改变的回调函数 |
| progress | boolean | 显示滑动的进度条 |
| renderMark | (mark: number) => ReactNode | 自定义渲染标尺上的标签 |
| step | number`(1)` | 滑动一步的值 |
| tooltip | boolean`(true)` | 滑动时候，是否显示 tooltip |
| value | [number,number] | 值（受控） |
| vertical | boolean | 垂直滑动 |
| 属性名称 | 类型`(默认值)` | 描述 |
| ---------------- | ------------------------------------------------------ | ---------------------------------- |
| barClassName | string | 应用于滑动条 DOM 节点的 css class |
| defaultValue | [number,number] | 默认值 |
| disabled | boolean | 是否禁用 |
| getAriaValueText | (value: number,eventKey:'start'&#124;'end') => string; | 提供 Slider 的当前值的用户友好名称 |
| graduated | boolean | 显示刻度 |
| handleClassName | string | 应用于手柄 DOM 节点的 css class |
| handleStyle | CSSProperties | 附加手柄样式 |
| handleTitle | ReactNode | 自定义手柄内显示内容 |
| max | number`(100)` | 滑动范围的最大值 |
| min | number`(0)` | 滑动范围的最小值 |
| onChange | (value: [number,number]) => void | 数据发生改变的回调函数 |
| progress | boolean | 显示滑动的进度条 |
| renderMark | (mark: number) => ReactNode | 自定义渲染标尺上的标签 |
| step | number`(1)` | 滑动一步的值 |
| tooltip | boolean`(true)` | 滑动时候，是否显示 tooltip |
| value | [number,number] | 值（受控） |
| vertical | boolean | 垂直滑动 |
6 changes: 1 addition & 5 deletions src/Calendar/test/CalendarPanelSpec.js
View file
Expand Up @@ -75,10 +75,7 @@ describe('Calendar - Panel', () => {
});

it('Should call `onSelect` callback in zoned date', done => {
const timeZone =
new Date('2020-10-10 01:00:00').getTimezoneOffset() === -480
? 'Europe/London'
: 'Asia/Shanghai';
const timeZone = 'Africa/Abidjan';
const instance = getDOMNode(
<CalendarPanel
timeZone={timeZone}
Expand All @@ -88,7 +85,6 @@ describe('Calendar - Panel', () => {
}}
/>
);

ReactTestUtils.Simulate.click(
instance.querySelector('.rs-calendar-table-cell-is-today .rs-calendar-table-cell-content')
);
Expand Down

0 comments on commit 8b1f6cf

Please sign in to comment.