Simulator accessibility improvements. (#948)

* Add aria-valuetext to range sensor slider
* Prevent tooltip from being read by screen reader where it duplicates the aria-valuetext
* Screen reader values for threshold marks
* Visually hidden text to identify radio messages

Co-authored-by: Matt Hillsdon <[email protected]>

Author: microbit-robert

lang/ui.en.json

@@ -903,6 +903,10 @@
     "defaultMessage": "Radio",
     "description": "Radio simulator panel title"
   },
+  "simulator-radio-code": {
+    "defaultMessage": "micro:bit sent:",
+    "description": "Visually hidden text for a radio message sent from the simulated micro:bit. Text of the message follows."
+  },
   "simulator-radio-group-notice": {
     "defaultMessage": "Radio group set to {groupNumber}",
     "description": "Message in radio simulator area when the radio group changes"
@@ -927,6 +931,10 @@
     "defaultMessage": "Send message",
     "description": "Aria label for the simulator radio send button"
   },
+  "simulator-radio-user": {
+    "defaultMessage": "You sent:",
+    "description": "Visually hidden text for a radio message sent from the user to the simulated micro:bit. Text of the message follows."
+  },
   "simulator-reference-link": {
     "defaultMessage": "Link to Reference section",
     "description": "Aria label for simulator Reference link button"

lang/ui.es-es.json

@@ -902,6 +902,10 @@
     "defaultMessage": "Radio",
     "description": "Radio simulator panel title"
   },
+  "simulator-radio-code": {
+    "defaultMessage": "Radio message from the micro:bit simulator",
+    "description": "Aria label for a message sent from the micro:bit simulator"
+  },
   "simulator-radio-group-notice": {
     "defaultMessage": "Grupo de radio configurado a {groupNumber}",
     "description": "Message in radio simulator area when the radio group changes"
@@ -926,6 +930,10 @@
     "defaultMessage": "Enviar mensaje",
     "description": "Aria label for the simulator radio send button"
   },
+  "simulator-radio-user": {
+    "defaultMessage": "Radio message to the micro:bit simulator",
+    "description": "Aria label for a message sent to the micro:bit simulator"
+  },
   "simulator-reference-link": {
     "defaultMessage": "Enlace a la sección de referencia",
     "description": "Aria label for simulator Reference link button"

lang/ui.fr.json

@@ -902,6 +902,10 @@
     "defaultMessage": "Radio",
     "description": "Radio simulator panel title"
   },
+  "simulator-radio-code": {
+    "defaultMessage": "Radio message from the micro:bit simulator",
+    "description": "Aria label for a message sent from the micro:bit simulator"
+  },
   "simulator-radio-group-notice": {
     "defaultMessage": "Le groupe radio est réglé sur {groupNumber}",
     "description": "Message in radio simulator area when the radio group changes"
@@ -926,6 +930,10 @@
     "defaultMessage": "Envoyer un message",
     "description": "Aria label for the simulator radio send button"
   },
+  "simulator-radio-user": {
+    "defaultMessage": "Radio message to the micro:bit simulator",
+    "description": "Aria label for a message sent to the micro:bit simulator"
+  },
   "simulator-reference-link": {
     "defaultMessage": "Lien vers la section de référence",
     "description": "Aria label for simulator Reference link button"

lang/ui.ja.json

@@ -902,6 +902,10 @@
     "defaultMessage": "無線",
     "description": "Radio simulator panel title"
   },
+  "simulator-radio-code": {
+    "defaultMessage": "Radio message from the micro:bit simulator",
+    "description": "Aria label for a message sent from the micro:bit simulator"
+  },
   "simulator-radio-group-notice": {
     "defaultMessage": "無線のグループを{groupNumber}に設定",
     "description": "Message in radio simulator area when the radio group changes"
@@ -926,6 +930,10 @@
     "defaultMessage": "メッセージを送信",
     "description": "Aria label for the simulator radio send button"
   },
+  "simulator-radio-user": {
+    "defaultMessage": "Radio message to the micro:bit simulator",
+    "description": "Aria label for a message sent to the micro:bit simulator"
+  },
   "simulator-reference-link": {
     "defaultMessage": "参照セクションへのリンク",
     "description": "Aria label for simulator Reference link button"

lang/ui.ko.json

@@ -902,6 +902,10 @@
     "defaultMessage": "라디오",
     "description": "Radio simulator panel title"
   },
+  "simulator-radio-code": {
+    "defaultMessage": "Radio message from the micro:bit simulator",
+    "description": "Aria label for a message sent from the micro:bit simulator"
+  },
   "simulator-radio-group-notice": {
     "defaultMessage": "라디오 그룹이 {groupNumber}(으)로 설정됨",
     "description": "Message in radio simulator area when the radio group changes"
@@ -926,6 +930,10 @@
     "defaultMessage": "메시지 전송",
     "description": "Aria label for the simulator radio send button"
   },
+  "simulator-radio-user": {
+    "defaultMessage": "Radio message to the micro:bit simulator",
+    "description": "Aria label for a message sent to the micro:bit simulator"
+  },
   "simulator-reference-link": {
     "defaultMessage": "레퍼런스 섹션에 링크하기",
     "description": "Aria label for simulator Reference link button"

lang/ui.zh-cn.json

@@ -902,6 +902,10 @@
     "defaultMessage": "无线电",
     "description": "Radio simulator panel title"
   },
+  "simulator-radio-code": {
+    "defaultMessage": "Radio message from the micro:bit simulator",
+    "description": "Aria label for a message sent from the micro:bit simulator"
+  },
   "simulator-radio-group-notice": {
     "defaultMessage": "无线电组设置为 {groupNumber}",
     "description": "Message in radio simulator area when the radio group changes"
@@ -926,6 +930,10 @@
     "defaultMessage": "发送消息",
     "description": "Aria label for the simulator radio send button"
   },
+  "simulator-radio-user": {
+    "defaultMessage": "Radio message to the micro:bit simulator",
+    "description": "Aria label for a message sent to the micro:bit simulator"
+  },
   "simulator-reference-link": {
     "defaultMessage": "链接到 Reference （参考）部分",
     "description": "Aria label for simulator Reference link button"

lang/ui.zh-tw.json

@@ -902,6 +902,10 @@
     "defaultMessage": "無線電",
     "description": "Radio simulator panel title"
   },
+  "simulator-radio-code": {
+    "defaultMessage": "Radio message from the micro:bit simulator",
+    "description": "Aria label for a message sent from the micro:bit simulator"
+  },
   "simulator-radio-group-notice": {
     "defaultMessage": "無線電組設定為 {groupNumber}",
     "description": "Message in radio simulator area when the radio group changes"
@@ -926,6 +930,10 @@
     "defaultMessage": "傳送訊息",
     "description": "Aria label for the simulator radio send button"
   },
+  "simulator-radio-user": {
+    "defaultMessage": "Radio message to the micro:bit simulator",
+    "description": "Aria label for a message sent to the micro:bit simulator"
+  },
   "simulator-reference-link": {
     "defaultMessage": "參考區的連結",
     "description": "Aria label for simulator Reference link button"

src/messages/ui.en.json

@@ -2017,6 +2017,12 @@
       "value": "Radio"
     }
   ],
+  "simulator-radio-code": [
+    {
+      "type": 0,
+      "value": "micro:bit sent:"
+    }
+  ],
   "simulator-radio-group-notice": [
     {
       "type": 0,
@@ -2057,6 +2063,12 @@
       "value": "Send message"
     }
   ],
+  "simulator-radio-user": [
+    {
+      "type": 0,
+      "value": "You sent:"
+    }
+  ],
   "simulator-reference-link": [
     {
       "type": 0,

src/messages/ui.es-es.json

@@ -2009,6 +2009,12 @@
       "value": "Radio"
     }
   ],
+  "simulator-radio-code": [
+    {
+      "type": 0,
+      "value": "Radio message from the micro:bit simulator"
+    }
+  ],
   "simulator-radio-group-notice": [
     {
       "type": 0,
@@ -2049,6 +2055,12 @@
       "value": "Enviar mensaje"
     }
   ],
+  "simulator-radio-user": [
+    {
+      "type": 0,
+      "value": "Radio message to the micro:bit simulator"
+    }
+  ],
   "simulator-reference-link": [
     {
       "type": 0,

src/messages/ui.fr.json

@@ -2009,6 +2009,12 @@
       "value": "Radio"
     }
   ],
+  "simulator-radio-code": [
+    {
+      "type": 0,
+      "value": "Radio message from the micro:bit simulator"
+    }
+  ],
   "simulator-radio-group-notice": [
     {
       "type": 0,
@@ -2049,6 +2055,12 @@
       "value": "Envoyer un message"
     }
   ],
+  "simulator-radio-user": [
+    {
+      "type": 0,
+      "value": "Radio message to the micro:bit simulator"
+    }
+  ],
   "simulator-reference-link": [
     {
       "type": 0,

src/messages/ui.ja.json

@@ -1999,6 +1999,12 @@
       "value": "無線"
     }
   ],
+  "simulator-radio-code": [
+    {
+      "type": 0,
+      "value": "Radio message from the micro:bit simulator"
+    }
+  ],
   "simulator-radio-group-notice": [
     {
       "type": 0,
@@ -2043,6 +2049,12 @@
       "value": "メッセージを送信"
     }
   ],
+  "simulator-radio-user": [
+    {
+      "type": 0,
+      "value": "Radio message to the micro:bit simulator"
+    }
+  ],
   "simulator-reference-link": [
     {
       "type": 0,

src/messages/ui.ko.json

@@ -2017,6 +2017,12 @@
       "value": "라디오"
     }
   ],
+  "simulator-radio-code": [
+    {
+      "type": 0,
+      "value": "Radio message from the micro:bit simulator"
+    }
+  ],
   "simulator-radio-group-notice": [
     {
       "type": 0,
@@ -2061,6 +2067,12 @@
       "value": "메시지 전송"
     }
   ],
+  "simulator-radio-user": [
+    {
+      "type": 0,
+      "value": "Radio message to the micro:bit simulator"
+    }
+  ],
   "simulator-reference-link": [
     {
       "type": 0,

src/messages/ui.zh-cn.json

@@ -2014,6 +2014,12 @@
       "value": "无线电"
     }
   ],
+  "simulator-radio-code": [
+    {
+      "type": 0,
+      "value": "Radio message from the micro:bit simulator"
+    }
+  ],
   "simulator-radio-group-notice": [
     {
       "type": 0,
@@ -2054,6 +2060,12 @@
       "value": "发送消息"
     }
   ],
+  "simulator-radio-user": [
+    {
+      "type": 0,
+      "value": "Radio message to the micro:bit simulator"
+    }
+  ],
   "simulator-reference-link": [
     {
       "type": 0,

src/messages/ui.zh-tw.json

@@ -2006,6 +2006,12 @@
       "value": "無線電"
     }
   ],
+  "simulator-radio-code": [
+    {
+      "type": 0,
+      "value": "Radio message from the micro:bit simulator"
+    }
+  ],
   "simulator-radio-group-notice": [
     {
       "type": 0,
@@ -2046,6 +2052,12 @@
       "value": "傳送訊息"
     }
   ],
+  "simulator-radio-user": [
+    {
+      "type": 0,
+      "value": "Radio message to the micro:bit simulator"
+    }
+  ],
   "simulator-reference-link": [
     {
       "type": 0,

src/simulator/CompassModule.tsx

@@ -5,7 +5,7 @@
  */
 import { Box, HStack, Icon, Stack, Text } from "@chakra-ui/react";
 import { ReactNode, useEffect, useRef } from "react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import {
   RangeSensor as RangeSensorType,
   SensorStateKey,
@@ -29,6 +29,7 @@ const CompassModule = ({
   minimised,
 }: CompassModuleProps) => {
   const ref = useRef<SVGSVGElement>(null);
+  const intl = useIntl();
   const compassHeading = state["compassHeading"];
   useEffect(() => {
     const needle = ref.current?.querySelector("#Needle");
@@ -44,7 +45,7 @@ const CompassModule = ({
         <RangeSensor
           id="compassHeading"
           icon={icon}
-          title="compass heading"
+          title={intl.formatMessage({ id: "simulator-compass-heading-one" })}
           sensor={compassHeading as RangeSensorType}
           onSensorChange={onValueChange}
           minimised={minimised}
@@ -55,11 +56,14 @@ const CompassModule = ({
             <FormattedMessage id="simulator-compass-heading-one" />
           </Text>
           <HStack spacing={3} pl={4} width="100%">
-            <Axis
-              axis="compassHeading"
-              label=""
-              state={state}
-              onValueChange={onValueChange}
+            <RangeSensor
+              id="compassHeading"
+              title={intl.formatMessage({
+                id: "simulator-compass-heading-one",
+              })}
+              sensor={compassHeading as RangeSensorType}
+              onSensorChange={onValueChange}
+              minimised={minimised}
             />
             <Icon
               ref={ref}