Small Changes For Accessibility (#310)

Author: vandyliu

src/view/components/Dropdown.tsx

@@ -16,6 +16,7 @@ export const Dropdown: React.FC<IDropdownProps> = props => {
         <select
             className="dropdown"
             onChange={props.onSelect}
+            title={props.name}
             name={props.name}
         >
             {renderOptions(props.options)}

src/view/components/toolbar/ToolBar.tsx

@@ -194,7 +194,7 @@ class ToolBar extends React.Component<IProps, IToolbarState, any> {
                 {this.state.isDescriptionVisible && (
                     <Callout
                         className="description-callout"
-                        role="textbox"
+                        role="text"
                         target=".info-icon"
                         setInitialFocus={true}
                         onDismiss={this.onDescriptionDismiss}

src/view/translations/en.json

@@ -70,7 +70,7 @@
     "toolbar-clue-accelerometer-sensor.description": " The 3-axis accelerometer, can tell you which direction is down towards the Earth (by measuring gravity) or how fast the board is accelerating in 3D space.",
     "toolbar-clue-accelerometer-sensor.tryItDescription": "Set the acceleration with the sliders.",
     "toolbar-clue-led.title": "Neopixel",
-    "toolbar-clue-led.description": "The CLUE has one full RGB LED (NeoPixel) on the back of the device",
+    "toolbar-clue-led.description": "The CLUE has one full RGB LED (NeoPixel) on the back of the device.",
 
     "toolbar-clue-led.tryItDescription": "Run your code and see the cool effects on the simulator!",
     "toolbar-clue-a-b-push.title": "Buttons",
@@ -93,7 +93,7 @@
     "toolbar-clue-gesture-sensor.description": "The gesture sensor can detect directional gestures (left to right, right to left, up to down, down to up), but in theory more complicated gestures like zig-zag, clockwise or counterclockwise circle, near to far, etc. could also be detected with additional code. ",
     "toolbar-clue-gesture-sensor.tryItDescription": "Select a gesture and send it by clicking the button.",
     "toolbar-clue-proximity-sensor.title": "Proximity",
-    "toolbar-clue-proximity-sensor.description": "The proximity sensor uses APDS9960 and is able to return how close an object is to the front of the sensor. This is a number from 0 to 255 where the higher the number the closer an object is to the sensor. You won't be able to translate this into an absolute value in units like inches or millimeters, you can only see how it changes relative to other values",
+    "toolbar-clue-proximity-sensor.description": "The proximity sensor uses APDS9960 and is able to return how close an object is to the front of the sensor. This is a number from 0 to 255 where the higher the number the closer an object is to the sensor. You won't be able to translate this into an absolute value in units like inches or millimeters, you can only see how it changes relative to other values.",
 
     "toolbar-clue-proximity-sensor.tryItDescription": "Set relative proximity to the sensor in values from 0 - 255, where 0 means very close and 255 means very far.",
 
@@ -103,8 +103,8 @@
     "toolbar-clue-speaker.description": "The CLUE has a buzzer/speaker for playing tones and beeps.",
     "toolbar-clue-magnet-sensor.title": "Magnetometer",
     "toolbar-clue-magnet-sensor.description": "Sense the magnetic fields that surround us with this handy triple-axis magnetometer (compass) module. Magnetometers can sense where the strongest magnetic force is coming from, generally used to detect magnetic north, but can also be used for measuring magnetic fields.",
-    "toolbar-clue-magnet-sensor.tryItDescription": "You can set the magnetic field value in microTeslas (uT)",
+    "toolbar-clue-magnet-sensor.tryItDescription": "You can set the magnetic field value in microTeslas (uT).",
     "toolbar-clue-gyroscope-sensor.title": "Gyroscope",
-    "toolbar-clue-gyroscope-sensor.description": "The 3-axis gyroscope that can measure spin and twist users LSM6DS33",
+    "toolbar-clue-gyroscope-sensor.description": "The 3-axis gyroscope that can measure spin and twist users LSM6DS33.",
     "toolbar-clue-gyroscope-sensor.tryItDescription": "Set the angular velocity in degrees/second."
 }