Skip to content

Commit bdcd127

Browse files
microbit-robertmicrobit-robert
committed
Make keyboard help translatable (#44)
Add aria labels for keys with symbols
1 parent dcaee5b commit bdcd127

File tree

1 file changed

+73
-45
lines changed

1 file changed

+73
-45
lines changed

‎webapp/src/components/KeyboardNavHelp.tsx

+73-45
Original file line numberDiff line numberDiff line change
@@ -6,74 +6,75 @@ const KeyboardNavHelp = () => {
66
React.useEffect(() => {
77
ref.current?.focus()
88
}, []);
9-
const cmd = pxt.BrowserUtils.isMac() ? "⌘" : "Ctrl";
10-
const optionOrCtrl = pxt.BrowserUtils.isMac() ? "⌥" : "Ctrl"
11-
const contextMenuRow = <Row name="Open context menu" shortcuts={[SHORTCUT_NAMES.MENU]} />
12-
// TODO: this needs to be reconciled with "Format Code"
13-
const cleanUpRow = <Row name="Workspace: Clean up" shortcuts={[SHORTCUT_NAMES.CLEAN_UP]} />
14-
const enterOrSpace = { shortcuts: [["Enter"], ["Space"]], joiner: "or"}
15-
const editOrConfirmRow = <Row name="Edit or confirm" {...enterOrSpace} />
9+
const ctrl = lf("Ctrl");
10+
const cmd = pxt.BrowserUtils.isMac() ? "⌘" : ctrl;
11+
const optionOrCtrl = pxt.BrowserUtils.isMac() ? "⌥" : ctrl;
12+
const contextMenuRow = <Row name={lf("Open context menu")} shortcuts={[SHORTCUT_NAMES.MENU]} />
13+
const cleanUpRow = <Row name={lf("Workspace: Format code")} shortcuts={[SHORTCUT_NAMES.CLEAN_UP]} />
14+
const orAsJoiner = lf("or")
15+
const enterOrSpace = { shortcuts: [[lf("Enter")], [lf("Space")]], joiner: orAsJoiner}
16+
const editOrConfirmRow = <Row name={lf("Edit or confirm")} {...enterOrSpace} />
1617
return (
1718
<aside id="keyboardnavhelp" aria-label={lf("Keyboard Controls")} ref={ref} tabIndex={0}>
18-
<h2>Keyboard Controls</h2>
19+
<h2>{lf("Keyboard Controls")}</h2>
1920
<table>
2021
<tbody>
21-
<Row name="Show/hide shortcut help" shortcuts={[SHORTCUT_NAMES.LIST_SHORTCUTS]} />
22-
<Row name="Block and toolbox navigation" shortcuts={[SHORTCUT_NAMES.UP, SHORTCUT_NAMES.DOWN, SHORTCUT_NAMES.LEFT, SHORTCUT_NAMES.RIGHT]} />
23-
<Row name="Toolbox or insert" shortcuts={[SHORTCUT_NAMES.TOOLBOX, SHORTCUT_NAMES.INSERT]} joiner="or" />
22+
<Row name={lf("Show/hide shortcut help")} shortcuts={[SHORTCUT_NAMES.LIST_SHORTCUTS]} />
23+
<Row name={lf("Block and toolbox navigation")} shortcuts={[SHORTCUT_NAMES.UP, SHORTCUT_NAMES.DOWN, SHORTCUT_NAMES.LEFT, SHORTCUT_NAMES.RIGHT]} />
24+
<Row name={lf("Toolbox or insert")} shortcuts={[SHORTCUT_NAMES.TOOLBOX, SHORTCUT_NAMES.INSERT]} joiner={orAsJoiner} />
2425
{editOrConfirmRow}
25-
<Row name="Move mode" shortcuts={[["M"]]} >
26-
<br /><span className="hint">Move with arrow keys</span>
27-
<br /><span className="hint">Hold {optionOrCtrl} for free movement</span>
26+
<Row name={lf("Move mode")} shortcuts={[["M"]]} >
27+
<br /><span className="hint">{lf("Move with arrow keys")}</span>
28+
<br /><span className="hint">{lf("Hold {0} for free movement", optionOrCtrl)}</span>
2829
</Row>
29-
<Row name="Copy / paste" shortcuts={[SHORTCUT_NAMES.COPY, SHORTCUT_NAMES.PASTE]} joiner="/" />
30+
<Row name={lf("Copy / paste")} shortcuts={[SHORTCUT_NAMES.COPY, SHORTCUT_NAMES.PASTE]} joiner="/" />
3031
{cleanUpRow}
3132
{contextMenuRow}
3233
</tbody>
3334
</table>
34-
<h3>Editor Overview</h3>
35+
<h3>{lf("Editor Overview")}</h3>
3536
<table>
3637
<tbody>
37-
<Row name="Move between menus, simulator and the workspace" shortcuts={[["Tab"], ["Shift", "Tab"]]} joiner="row"/>
38-
<Row name="Exit" shortcuts={[SHORTCUT_NAMES.EXIT]} />
39-
<Row name="Toolbox" shortcuts={[SHORTCUT_NAMES.TOOLBOX]} />
40-
<Row name="Toolbox: Move in and out of categories" shortcuts={[SHORTCUT_NAMES.LEFT, SHORTCUT_NAMES.RIGHT]} />
41-
<Row name="Toolbox: Navigate categories or blocks" shortcuts={[SHORTCUT_NAMES.UP, SHORTCUT_NAMES.DOWN]} />
42-
<Row name="Toolbox: Insert block" {...enterOrSpace} />
43-
<Row name="Workspace" shortcuts={[[cmd, "E"]]} />
44-
<Row name="Workspace: Select workspace" shortcuts={[["W"]]} />
38+
<Row name={lf("Move between menus, simulator and the workspace")} shortcuts={[[lf("Tab")], [lf("Shift"), lf("Tab")]]} joiner="row"/>
39+
<Row name={lf("Exit")} shortcuts={[SHORTCUT_NAMES.EXIT]} />
40+
<Row name={lf("Toolbox")} shortcuts={[SHORTCUT_NAMES.TOOLBOX]} />
41+
<Row name={lf("Toolbox: Move in and out of categories")} shortcuts={[SHORTCUT_NAMES.LEFT, SHORTCUT_NAMES.RIGHT]} />
42+
<Row name={lf("Toolbox: Navigate categories or blocks")} shortcuts={[SHORTCUT_NAMES.UP, SHORTCUT_NAMES.DOWN]} />
43+
<Row name={lf("Toolbox: Insert block")} {...enterOrSpace} />
44+
<Row name={lf("Workspace")} shortcuts={[[cmd, "E"]]} />
45+
<Row name={lf("Workspace: Select workspace")} shortcuts={[["W"]]} />
4546
{cleanUpRow}
46-
<Row name="Simulator" shortcuts={[[cmd, "B"]]} />
47-
<Row name="Download" shortcuts={[[cmd, "D"]]} />
47+
<Row name={lf("Simulator")} shortcuts={[[cmd, "B"]]} />
48+
<Row name={lf("Download")} shortcuts={[[cmd, "D"]]} />
4849
</tbody>
4950
</table>
50-
<h3>Edit Blocks</h3>
51+
<h3>{lf("Edit Blocks")}</h3>
5152
<table>
5253
<tbody>
53-
<Row name="Move in and out of a block" shortcuts={[SHORTCUT_NAMES.LEFT, SHORTCUT_NAMES.RIGHT]} />
54+
<Row name={lf("Move in and out of a block")} shortcuts={[SHORTCUT_NAMES.LEFT, SHORTCUT_NAMES.RIGHT]} />
5455
{editOrConfirmRow}
55-
<Row name="Cancel or exit" shortcuts={[SHORTCUT_NAMES.EXIT]} />
56-
<Row name="Insert block at current position" shortcuts={[SHORTCUT_NAMES.INSERT]} />
57-
<Row name="Copy" shortcuts={[SHORTCUT_NAMES.COPY]} />
58-
<Row name="Paste" shortcuts={[SHORTCUT_NAMES.PASTE]} />
59-
<Row name="Cut" shortcuts={[SHORTCUT_NAMES.CUT]} />
60-
<Row name="Delete" shortcuts={[SHORTCUT_NAMES.DELETE, ["Backspace"]]} joiner="or" />
61-
<Row name="Undo" shortcuts={[SHORTCUT_NAMES.UNDO]} />
62-
<Row name="Redo" shortcuts={[SHORTCUT_NAMES.REDO]} />
56+
<Row name={lf("Cancel or exit")} shortcuts={[SHORTCUT_NAMES.EXIT]} />
57+
<Row name={lf("Insert block at current position")} shortcuts={[SHORTCUT_NAMES.INSERT]} />
58+
<Row name={lf("Copy")} shortcuts={[SHORTCUT_NAMES.COPY]} />
59+
<Row name={lf("Paste")} shortcuts={[SHORTCUT_NAMES.PASTE]} />
60+
<Row name={lf("Cut")} shortcuts={[SHORTCUT_NAMES.CUT]} />
61+
<Row name={lf("Delete")} shortcuts={[SHORTCUT_NAMES.DELETE, [lf("Backspace")]]} joiner={orAsJoiner} />
62+
<Row name={lf("Undo")} shortcuts={[SHORTCUT_NAMES.UNDO]} />
63+
<Row name={lf("Redo")} shortcuts={[SHORTCUT_NAMES.REDO]} />
6364
{contextMenuRow}
6465
</tbody>
6566
</table>
66-
<h3>Moving Blocks</h3>
67+
<h3>{lf("Moving Blocks")}</h3>
6768
<table>
6869
<tbody>
69-
<Row name="Move mode" shortcuts={[["M"]]} />
70-
<Row name="Move mode: Move to new position" shortcuts={[SHORTCUT_NAMES.UP, SHORTCUT_NAMES.DOWN, SHORTCUT_NAMES.LEFT, SHORTCUT_NAMES.RIGHT]} />
71-
<Row name="Move mode: Free movement">
72-
Hold <Key value={optionOrCtrl} /> and press arrow keys
70+
<Row name={lf("Move mode")} shortcuts={[["M"]]} />
71+
<Row name={lf("Move mode: Move to new position")} shortcuts={[SHORTCUT_NAMES.UP, SHORTCUT_NAMES.DOWN, SHORTCUT_NAMES.LEFT, SHORTCUT_NAMES.RIGHT]} />
72+
<Row name={lf("Move mode: Free movement")}>
73+
{lf("Hold {0} and press arrow keys", optionOrCtrl)}
7374
</Row>
74-
<Row name="Move mode: Confirm" {...enterOrSpace} />
75-
<Row name="Move mode: Cancel" shortcuts={[SHORTCUT_NAMES.EXIT]} />
76-
<Row name="Disconnect blocks" shortcuts={[SHORTCUT_NAMES.DISCONNECT]} />
75+
<Row name={lf("Move mode: Confirm")} {...enterOrSpace} />
76+
<Row name={lf("Move mode: Cancel")} shortcuts={[SHORTCUT_NAMES.EXIT]} />
77+
<Row name={lf("Disconnect blocks")} shortcuts={[SHORTCUT_NAMES.DISCONNECT]} />
7778
</tbody>
7879
</table>
7980
</aside>
@@ -143,7 +144,34 @@ const Row = ({ name, shortcuts = [], joiner, children}: RowProps) => {
143144
}
144145

145146
const Key = ({ value }: { value: string }) => {
146-
return <span className="key">{value}</span>
147+
let aria;
148+
switch (value) {
149+
case "↑": {
150+
aria = lf("Up Arrow");
151+
break;
152+
}
153+
case "↓": {
154+
aria = lf("Down Arrow");
155+
break;
156+
}
157+
case "←": {
158+
aria = lf("Left Arrow");
159+
break;
160+
}
161+
case "→": {
162+
aria = lf("Right Arrow");
163+
break;
164+
}
165+
case "⌘": {
166+
aria = lf("Command");
167+
break;
168+
}
169+
case "⌥": {
170+
aria = lf("Option");
171+
break;
172+
}
173+
}
174+
return <span className="key" aria-label={aria}>{lf("{0}", value)}</span>
147175
}
148176

149177
export default KeyboardNavHelp;

0 commit comments

Comments
 (0)