@transferwise/components 0.0.0-experimental-674482c → 0.0.0-experimental-200db54
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-200db54",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -86,10 +86,10 @@
|
|
|
86
86
|
"storybook": "^10.3.0-alpha.4",
|
|
87
87
|
"storybook-addon-tag-badges": "^3.0.6",
|
|
88
88
|
"storybook-addon-test-codegen": "^3.0.1",
|
|
89
|
-
"@
|
|
89
|
+
"@transferwise/less-config": "3.1.2",
|
|
90
|
+
"@transferwise/neptune-css": "0.0.0-experimental-200db54",
|
|
90
91
|
"@wise/components-theming": "1.10.1",
|
|
91
|
-
"@
|
|
92
|
-
"@transferwise/less-config": "3.1.2"
|
|
92
|
+
"@wise/wds-configs": "0.0.0"
|
|
93
93
|
},
|
|
94
94
|
"peerDependencies": {
|
|
95
95
|
"@transferwise/icons": "^3 || ^4",
|
|
@@ -14,6 +14,8 @@ export const Basic = () => {
|
|
|
14
14
|
const DE = 'äöüßabcdefghijklmnopqrstuvwxyz';
|
|
15
15
|
const UA = 'Ми будуємо найбільш міжнародний рахунок у світі';
|
|
16
16
|
const JA = 'ぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてで';
|
|
17
|
+
const ZN =
|
|
18
|
+
'的一是在不了有和人这中大为上个国我以要他时来用们生到作地于出就分对成会可主发年样能下过子说产种面而方后多定行学法所民得经十三之进着等部度家电力里如水化高自二理起小物现实加量都两体制机当使点从业本去最性性齉龘龘靐齉爩鱻猋驫麤籲爨癵驫鲙鬯鬻厵纛';
|
|
17
19
|
return (
|
|
18
20
|
<>
|
|
19
21
|
<div lang="en">
|
|
@@ -77,7 +79,7 @@ export const Basic = () => {
|
|
|
77
79
|
</div>
|
|
78
80
|
<hr />
|
|
79
81
|
<div lang="ja">
|
|
80
|
-
<h1>
|
|
82
|
+
<h1>Japanese</h1>
|
|
81
83
|
Large
|
|
82
84
|
<Display type={Typography.DISPLAY_LARGE}>{JA}</Display>
|
|
83
85
|
<hr />
|
|
@@ -87,6 +89,18 @@ export const Basic = () => {
|
|
|
87
89
|
Small
|
|
88
90
|
<Display type={Typography.DISPLAY_SMALL}>{JA}</Display>
|
|
89
91
|
</div>
|
|
92
|
+
<hr />
|
|
93
|
+
<div lang="zh-CN">
|
|
94
|
+
<h1>Simplified Chinese</h1>
|
|
95
|
+
Large
|
|
96
|
+
<Display type={Typography.DISPLAY_LARGE}>{ZN}</Display>
|
|
97
|
+
<hr />
|
|
98
|
+
Medium
|
|
99
|
+
<Display type={Typography.DISPLAY_MEDIUM}>{ZN}</Display>
|
|
100
|
+
<hr />
|
|
101
|
+
Small
|
|
102
|
+
<Display type={Typography.DISPLAY_SMALL}>{ZN}</Display>
|
|
103
|
+
</div>
|
|
90
104
|
</>
|
|
91
105
|
);
|
|
92
106
|
};
|
|
@@ -4,6 +4,60 @@ import { Meta } from '@storybook/addon-docs/blocks';
|
|
|
4
4
|
|
|
5
5
|
# Accessibility
|
|
6
6
|
|
|
7
|
+
## Keyboard navigation
|
|
8
|
+
|
|
9
|
+
The component uses [Headless UI Listbox](https://headlessui.com/react/listbox) under the hood, which provides full keyboard support out of the box.
|
|
10
|
+
|
|
11
|
+
<table>
|
|
12
|
+
<thead>
|
|
13
|
+
<tr>
|
|
14
|
+
<th>Key</th>
|
|
15
|
+
<th>Action</th>
|
|
16
|
+
</tr>
|
|
17
|
+
</thead>
|
|
18
|
+
<tbody>
|
|
19
|
+
<tr>
|
|
20
|
+
<td>
|
|
21
|
+
<code>Tab</code> / click
|
|
22
|
+
</td>
|
|
23
|
+
<td>Focus the trigger button</td>
|
|
24
|
+
</tr>
|
|
25
|
+
<tr>
|
|
26
|
+
<td>
|
|
27
|
+
<code>Enter</code> / <code>Space</code>
|
|
28
|
+
</td>
|
|
29
|
+
<td>Open the listbox</td>
|
|
30
|
+
</tr>
|
|
31
|
+
<tr>
|
|
32
|
+
<td>
|
|
33
|
+
<code>↑</code> / <code>↓</code>
|
|
34
|
+
</td>
|
|
35
|
+
<td>Navigate options</td>
|
|
36
|
+
</tr>
|
|
37
|
+
<tr>
|
|
38
|
+
<td>
|
|
39
|
+
<code>Enter</code>
|
|
40
|
+
</td>
|
|
41
|
+
<td>Select the focused option</td>
|
|
42
|
+
</tr>
|
|
43
|
+
<tr>
|
|
44
|
+
<td>
|
|
45
|
+
<code>Escape</code> / <code>Tab</code>
|
|
46
|
+
</td>
|
|
47
|
+
<td>Close without selecting</td>
|
|
48
|
+
</tr>
|
|
49
|
+
<tr>
|
|
50
|
+
<td>
|
|
51
|
+
Typing (when <code>filterable</code>)
|
|
52
|
+
</td>
|
|
53
|
+
<td>
|
|
54
|
+
Narrows the list in the search input; <code>↑</code> / <code>↓</code> still navigate the
|
|
55
|
+
filtered results
|
|
56
|
+
</td>
|
|
57
|
+
</tr>
|
|
58
|
+
</tbody>
|
|
59
|
+
</table>
|
|
60
|
+
|
|
7
61
|
## Labelling
|
|
8
62
|
|
|
9
63
|
In order for the `<SelectInput />` to be considered accessible, it must be provided with a matching label, preferably via the <a href="/?path=/docs/field--docs">Field</a> component.
|
|
@@ -18,3 +72,11 @@ Additionally, the `listbox` container that holds all the options is also expecte
|
|
|
18
72
|
3. Correctly paired input `<label />` text, ideally via the `Field` component.
|
|
19
73
|
|
|
20
74
|
> Using option group heading is possible but complicated as we can have multiple groups, and those are not necessarily rendered consistently if search or virtualisation are enabled.
|
|
75
|
+
|
|
76
|
+
## Custom triggers
|
|
77
|
+
|
|
78
|
+
When using `renderTrigger`, the interactive element **must** be `SelectInputTriggerButton`. A plain `<button>` will not receive the ARIA attributes (`aria-expanded`, `aria-haspopup`, `aria-controls`) that the component manages, breaking screen reader announcements for the listbox state.
|
|
79
|
+
|
|
80
|
+
## Multiple selection
|
|
81
|
+
|
|
82
|
+
With `multiple`, selected items show a visible checkmark in the list. The trigger content is **consumer-controlled** via the `withinTrigger` boolean passed to `renderValue` — consumers are responsible for communicating the current selection accessibly inside the trigger (e.g. `"USD, EUR"` or `"3 currencies selected"`).
|