Changes to address Accessibility Insights (#276)

Author: vandyliu

src/view/components/Dropdown.tsx

@@ -7,12 +7,17 @@ import "../styles/Dropdown.css";
 export interface IDropdownProps {
     options: string[];
     // styleLabel: string;
+    name: string;
     onSelect?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
 }
 
 export const Dropdown: React.FC<IDropdownProps> = props => {
     return (
-        <select className="dropdown" onChange={props.onSelect}>
+        <select
+            className="dropdown"
+            onChange={props.onSelect}
+            name={props.name}
+        >
             {renderOptions(props.options)}
         </select>
     );

src/view/components/cpx/CpxImage.tsx

@@ -309,7 +309,7 @@ const setupPins = (props: IProps): void => {
             svgPin.onkeydown = e => props.onKeyEvent(e, true);
             accessibility.setAria(
                 svgPin,
-                "Pin",
+                "button",
                 `Touch pin ${pinName.substr(pinName.length - 2)}`
             );
         }

src/view/components/cpx/__snapshots__/Cpx.spec.tsx.snap

@@ -4015,9 +4015,9 @@ Array [
           onMouseLeave={[Function]}
         >
           <button
-            aria-label="toolbar push-button"
+            aria-label="toolbar a-b-push"
             className="toolbar-button button"
-            id="toolbar-push-button-button"
+            id="toolbar-a-b-push-button"
             onClick={[Function]}
             role="button"
             style={

src/view/components/microbit/__snapshots__/Microbit.spec.tsx.snap

@@ -2649,9 +2649,9 @@ Array [
           onMouseLeave={[Function]}
         >
           <button
-            aria-label="toolbar microbit-button"
+            aria-label="toolbar microbit-a-b-push"
             className="toolbar-button button"
-            id="toolbar-microbit-button-button"
+            id="toolbar-microbit-a-b-push-button"
             onClick={[Function]}
             role="button"
             style={

src/view/components/toolbar/InputSlider.tsx

@@ -51,7 +51,7 @@ class InputSlider extends React.Component<ISliderProps, any, any> {
                         onMouseUp={this.sendTelemetry}
                         aria-valuenow={this.state.value}
                         value={this.props.value}
-                        aria-label={`${this.props.type} sensor slider`}
+                        aria-label={`${this.props.type} sensor`}
                         defaultValue={this.props.minValue.toLocaleString()}
                         disabled={isInputDisabled}
                     />

src/view/components/toolbar/SensorButton.tsx

@@ -21,13 +21,13 @@ class SensorButton extends React.Component<ISensorButtonProps> {
     render() {
         return (
             <button
-                id={`${this.props.label}-button`}
+                id={this.props.label}
                 ref={this.buttonRef}
                 onMouseUp={this.props.onMouseUp}
                 onMouseDown={this.props.onMouseDown}
                 onKeyUp={this.props.onKeyUp}
                 onKeyDown={this.props.onKeyDown}
-                aria-label={`${this.props.type} sensor button`}
+                aria-label={`${this.props.type} sensor`}
                 className="sensor-button"
             >
                 {this.props.label}

src/view/components/toolbar/SensorModalUtils.tsx

@@ -54,7 +54,7 @@ export const CPX_TOOLBAR_ICON_ID = {
     LIGHT: "toolbar-light-sensor",
     MOTION: "toolbar-motion-sensor",
     NEO_PIXEL: "toolbar-neo-pixels",
-    PUSH_BUTTON: "toolbar-push-button",
+    PUSH_BUTTON: "toolbar-a-b-push",
     RED_LED: "toolbar-red-led",
     RIGHT_EDGE: "right-edge",
     SOUND: "toolbar-sound-sensor",
@@ -68,7 +68,7 @@ export const MICROBIT_TOOLBAR_ID = {
     LIGHT: "toolbar-light-sensor",
     ACCELEROMETER: "toolbar-accelerometer-sensor",
     LEDS: "toolbar-microbit-led",
-    PUSH_BUTTON: "toolbar-microbit-button",
+    PUSH_BUTTON: "toolbar-microbit-a-b-push",
     GPIO: "toolbar-gpio",
     SOUND: "toolbar-microbit-sound",
     WIRELESS: "toolbar-microbit-wireless",
@@ -187,11 +187,11 @@ export const PUSHB_MODAL_CONTENT = (
     sensorValues: { [key: string]: number }
 ): IModalContent => {
     return {
-        descriptionTitle: "toolbar-push-button.title",
+        descriptionTitle: "toolbar-a-b-push.title",
         tagInput: TAG_INPUT_SVG,
         tagOutput: undefined,
-        descriptionText: "toolbar-push-button.description",
-        tryItDescription: "toolbar-push-button.tryItDescription",
+        descriptionText: "toolbar-a-b-push.description",
+        tryItDescription: "toolbar-a-b-push.tryItDescription",
         components: undefined,
         id: "push_btn",
     };
@@ -320,11 +320,11 @@ export const MICROBIT_BUTTON_CONTENT = (
     sensorValues: { [key: string]: number }
 ): IModalContent => {
     return {
-        descriptionTitle: "toolbar-microbit-button.title",
+        descriptionTitle: "toolbar-microbit-a-b-push.title",
         tagInput: undefined,
         tagOutput: TAG_INPUT_SVG,
-        descriptionText: "toolbar-microbit-button.description",
-        tryItDescription: "toolbar-microbit-button.tryItDescription",
+        descriptionText: "toolbar-microbit-a-b-push.description",
+        tryItDescription: "toolbar-microbit-a-b-push.tryItDescription",
         components: undefined,
         id: "microbit_button",
     };

src/view/components/toolbar/ToolBar.tsx

@@ -185,7 +185,7 @@ class ToolBar extends React.Component<IProps, IToolbarState, any> {
                             onClick={this.onShowDescriptionClicked}
                             iconProps={{ iconName: "Info" }}
                             title="Info"
-                            ariaLabel="More Information Button"
+                            ariaLabel="More Information"
                             className="info-icon"
                         />
                     </span>

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

@@ -72,6 +72,7 @@ export class Accelerometer extends React.Component<IProps> {
                     }}
                 >
                     <Dropdown
+                        name="gesture selection"
                         options={GESTURES}
                         onSelect={this.props.onSelectGestures}
                     />

src/view/components/toolbar/motion/__snapshots__/Accelerometer.spec.tsx.snap

@@ -18,6 +18,7 @@ exports[`Accelerometer component  should render correctly 1`] = `
   >
     <select
       className="dropdown"
+      name="gesture selection"
     >
       <option
         value="shake"
@@ -76,9 +77,9 @@ exports[`Accelerometer component  should render correctly 1`] = `
       </option>
     </select>
     <button
-      aria-label="gesture sensor button"
+      aria-label="gesture sensor"
       className="sensor-button"
-      id="Send Gesture-button"
+      id="Send Gesture"
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       onMouseDown={[Function]}
@@ -130,7 +131,7 @@ exports[`Accelerometer component  should render correctly 1`] = `
           </span>
         </span>
         <input
-          aria-label="motion_x sensor slider"
+          aria-label="motion_x sensor"
           aria-valuemax={1023}
           aria-valuemin={-1023}
           aria-valuenow={1}
@@ -196,7 +197,7 @@ exports[`Accelerometer component  should render correctly 1`] = `
           </span>
         </span>
         <input
-          aria-label="motion_y sensor slider"
+          aria-label="motion_y sensor"
           aria-valuemax={1023}
           aria-valuemin={-1023}
           aria-valuenow={0}
@@ -262,7 +263,7 @@ exports[`Accelerometer component  should render correctly 1`] = `
           </span>
         </span>
         <input
-          aria-label="motion_z sensor slider"
+          aria-label="motion_z sensor"
           aria-valuemax={1023}
           aria-valuemin={-1023}
           aria-valuenow={1}

src/view/container/device/__snapshots__/Device.spec.tsx.snap

@@ -2651,9 +2651,9 @@ exports[`Device component  should render correctly 1`] = `
           onMouseLeave={[Function]}
         >
           <button
-            aria-label="toolbar microbit-button"
+            aria-label="toolbar microbit-a-b-push"
             className="toolbar-button button"
-            id="toolbar-microbit-button-button"
+            id="toolbar-microbit-a-b-push-button"
             onClick={[Function]}
             role="button"
             style={

src/view/translations/en.json

@@ -14,9 +14,9 @@
     "toolbar-neo-pixels.description": "The 10 full color RGB LEDs surrounding the outer edge of the boards can be set to any color. Great for beautiful lighting effects!",
     "toolbar-neo-pixels.title": "NeoPixels",
     "toolbar-neo-pixels.tryItDescription": "Run your code and see the cool effects on the simulator!",
-    "toolbar-push-button.description": "Two push buttons A and B are connected to digital pin #4 (Left) and #5 (Right) each.",
-    "toolbar-push-button.title": "Push Buttons",
-    "toolbar-push-button.tryItDescription": "Click them with your mouse or by pressing “A” and/or “B” on your keyboard!",
+    "toolbar-a-b-push.description": "Two push buttons A and B are connected to digital pin #4 (Left) and #5 (Right) each.",
+    "toolbar-a-b-push.title": "Push Buttons",
+    "toolbar-a-b-push.tryItDescription": "Click them with your mouse or by pressing “A” and/or “B” on your keyboard!",
     "toolbar-red-led.description": "This Red LED is connected to the digital #13 GPIO pin. It can be very handy when you want an indicator LED.",
     "toolbar-red-led.title": "Red LED",
     "toolbar-red-led.tryItDescription": "Run your code and see the cool effects on the simulator!",
@@ -38,9 +38,9 @@
     "toolbar-microbit-led.title": "LEDs",
     "toolbar-microbit-led.description": "The microbit has 25 LEDs for you to play with. The LEDs have 9 levels of brightness.",
     "toolbar-microbit-led.tryItDescription": "Run your code and see the LEDs light up!",
-    "toolbar-microbit-button.title": "Buttons",
-    "toolbar-microbit-button.description": "There are two buttons on the front of the micro:bit (labelled A and B). The third button is to trigger both A and B buttons. You can detect when these buttons are pressed, allowing you to trigger code on the device.",
-    "toolbar-microbit-button.tryItDescription": "Click them with your mouse or by pressing “A” and/or “B” on your keyboard!",
+    "toolbar-microbit-a-b-push.title": "Buttons",
+    "toolbar-microbit-a-b-push.description": "There are two buttons on the front of the micro:bit (labelled A and B). The third button is to trigger both A and B buttons. You can detect when these buttons are pressed, allowing you to trigger code on the device.",
+    "toolbar-microbit-a-b-push.tryItDescription": "Click them with your mouse or by pressing “A” and/or “B” on your keyboard!",
     "toolbar-microbit-sound.title": "Sound",
     "toolbar-microbit-sound.description": "Your BBC micro:bit can be programmed to make a wide variety of sounds - from single notes, tones and beats to your own musical compositions.",
     "toolbar-microbit-sound.tryItDescription": "If you would like to see this sensor supported, please +1 the feature addition issue on GitHub! For now, you can try it on MakeCode!",