Skip to content
This repository was archived by the owner on Dec 23, 2021. It is now read-only.

Commit b020afc

Browse files
committed
Add accessiblity for gestures
1 parent d408272 commit b020afc

File tree

4 files changed

+30
-2
lines changed

4 files changed

+30
-2
lines changed

src/view/components/microbit/MicrobitSimulator.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ interface IState {
2929
play_button: boolean;
3030
selected_file: string;
3131
microbit: IMicrobitState;
32+
sendGesture?: (isActive: boolean) => void;
3233
}
3334

3435
interface IMicrobitState {
@@ -198,6 +199,8 @@ export class MicrobitSimulator extends React.Component<any, IState> {
198199
protected onKeyEvent(event: KeyboardEvent, active: boolean, key: string) {
199200
event.stopPropagation();
200201
if ([event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.ENTER)) {
202+
console.log(`buttonKey ${key}`);
203+
201204
this.handleButtonClick(key, active);
202205
if (this.imageRef.current) {
203206
if (key === BUTTONS_KEYS.BTN_A) {

src/view/components/toolbar/motion/Accelerometer.tsx

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from "react";
2-
import { SENSOR_LIST, GESTURES } from "../../../constants";
2+
import CONSTANTS, { SENSOR_LIST, GESTURES } from "../../../constants";
33
import { ISensorProps, ISliderProps } from "../../../viewUtils";
44
import { ThreeDimensionSlider } from "./threeDimensionSlider/ThreeDimensionSlider";
55
import { Dropdown } from "../../Dropdown";
@@ -70,6 +70,12 @@ export const Accelerometer: React.FC<IProps> = (props: IProps) => {
7070
props.onSendGesture(false);
7171
}
7272
}}
73+
onKeyDown={(e: React.KeyboardEvent) => {
74+
handleOnKeyDown(e, props.onSendGesture);
75+
}}
76+
onKeyUp={(e: React.KeyboardEvent) => {
77+
handleOnKeyUp(e, props.onSendGesture);
78+
}}
7379
type="gesture"
7480
/>
7581
<ThreeDimensionSlider
@@ -80,3 +86,21 @@ export const Accelerometer: React.FC<IProps> = (props: IProps) => {
8086
</div>
8187
);
8288
};
89+
const handleOnKeyDown = (
90+
e: React.KeyboardEvent,
91+
onSendGesture?: (isActive: boolean) => void
92+
) => {
93+
if (e.key === CONSTANTS.KEYBOARD_KEYS.ENTER) {
94+
console.log("gestures");
95+
if (onSendGesture) onSendGesture(true);
96+
}
97+
};
98+
const handleOnKeyUp = (
99+
e: React.KeyboardEvent,
100+
onSendGesture?: (isActive: boolean) => void
101+
) => {
102+
if (e.key === CONSTANTS.KEYBOARD_KEYS.ENTER) {
103+
console.log("gesturesUp");
104+
if (onSendGesture) onSendGesture(false);
105+
}
106+
};

src/view/styles/Dropdown.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@ select.dropdown:hover,
1414
select.dropdown:focus,
1515
select.dropdown:active {
1616
outline: 1px solid var(--vscode-button-background);
17-
outline-offset: 1px;
1817
}
1918

2019
option {
2120
height: 32px;
2221
background: var(--vscode-debugToolBar-background);
22+
outline: 0;
2323
align-items: center;
2424
font-size: 14px;
2525
color: var(--vscode-foreground);

src/view/styles/SensorButton.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
text-align: center;
44
background-color: var(--vscode-button-background);
55
width: 90%;
6+
max-width: 320px;
67
height: 32px;
78
font-weight: bolder;
89
float: left;

0 commit comments

Comments
 (0)