Microphone button status change on narrator

CHANGELOG.md

@@ -15,6 +15,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+- Fix [#1409](https://github.com/Microsoft/BotFramework-WebChat/issues/1409). Added microphone status as screen reader only text, by [@corinagum](https://github.com/corinagum) in PR [#1490](https://github.com/Microsoft/BotFramework-WebChat/pull/1490)
+
 ## [4.2.0] - 2018-12-11
 ### Added
 - Build: Development build now include instrumentation code, updated build scripts

packages/component/src/Localization/cs-CZ.js

@@ -1,5 +1,7 @@
 export default {
   'Chat': 'Chat',
+  // 'Microphone off': '',
+  // 'Microphone on': '',
   'Listening…': 'Poslouchám…',
   'retry': 'opakovat',
   'Send failed, {retry}': 'nepodařilo se odeslat, {retry}',

packages/component/src/Localization/da-DK.js

@@ -1,5 +1,7 @@
 export default {
   'Chat': 'Chat',
+  // 'Microphone off': '',
+  // 'Microphone on': '',
   'Listening…': 'Lytter…',
   'retry': 'prøv igen',
   'Send failed, {retry}': 'ikke sendt, {retry}',

packages/component/src/Localization/de-DE.js

@@ -1,5 +1,7 @@
 export default {
   'Chat': 'Chat',
+  // 'Microphone off': '',
+  // 'Microphone on': '',
   'Listening…': 'Hören…',
   'retry': 'wiederholen',
   'Send failed, {retry}': 'konnte nicht senden, {retry}',

packages/component/src/Localization/el-GR.js

@@ -1,5 +1,7 @@
 export default {
   'Chat': 'Συνομιλία',
+  // 'Microphone off': '',
+  // 'Microphone on': '',
   'Listening…': 'Ακούγοντας…',
   'retry': 'δοκιμή',
   'Send failed, {retry}': 'αποτυχία, {retry}',

packages/component/src/Localization/en-US.js

@@ -31,6 +31,8 @@ export default {
     'Adaptive Card parse error',
     'Adaptive Card render error',
     'Chat',
+    'Microphone off',
+    'Microphone on',
     'Left',
     'Listening…',
     'New messages',

packages/component/src/Localization/es-ES.js

@@ -1,5 +1,7 @@
 export default {
   'Chat': 'Chat',
+  // 'Microphone off': '',
+  // 'Microphone on': '',
   'Listening…': 'Escuchando…',
   'retry': 'reintentar',
   'Send failed, {retry}': 'no enviado, {retry}',

packages/component/src/Localization/fi-FI.js

@@ -1,5 +1,7 @@
 export default {
   'Chat': 'Chat',
+  // 'Microphone off': '',
+  // 'Microphone on': '',
   'Listening…': 'Kuuntelee…',
   'retry': 'yritä uudelleen',
   'Send failed, {retry}': 'ei voitu lähettää, {retry}',

packages/component/src/Localization/fr-FR.js

@@ -25,6 +25,8 @@ function xMinutesAgo(date) {
 
 export default {
   'Chat': 'Discuter',
+  // 'Microphone off': '',
+  // 'Microphone on': '',
   'Left': 'Gauche',
   'Listening…': 'Écoute…',
   'New messages': 'Nouveaux messages',

packages/component/src/Localization/hu-HU.js

@@ -1,5 +1,7 @@
 export default {
   'Chat': 'Csevegés',
+  // 'Microphone off': '',
+  // 'Microphone on': '',
   'Listening…': 'Figyelés…',
   'retry': 'próbálja újra',
   'Send failed, {retry}': 'nem sikerült elküldeni, {retry}',

packages/component/src/Localization/it-IT.js

@@ -1,5 +1,7 @@
 export default {
   'Chat': 'Chat',
+  // 'Microphone off': '',
+  // 'Microphone on': '',
   'Listening…': 'Ascoltando…',
   'retry': 'riprova',
   'Send failed, {retry}': 'impossibile inviare, {retry}',

packages/component/src/Localization/ja-JP.js

@@ -21,6 +21,8 @@ function xMinutesAgo(date) {
 
 export default {
   'Chat': 'チャット',
+  'Microphone off': 'マイクオン',
+  'Microphone on': 'マイクオフ',
   'Listening': '聴いてます',
   'retry': '再送',
   'Send failed, {retry}': '送信できませんでした。{retry}',

packages/component/src/Localization/ko-KR.js

@@ -1,5 +1,7 @@
 export default {
   'Chat': '채팅',
+  // 'Microphone off': '',
+  // 'Microphone on': '',
   'Listening…': '수신중…',
   'retry': '재전송',
   'Send failed, {retry}': '전송할 수 없습니다, {retry}',

packages/component/src/Localization/lv-LV.js

@@ -1,5 +1,7 @@
 export default {
   'Chat': 'Tērzēšana',
+  // 'Microphone off': '',
+  // 'Microphone on': '',
   'Listening…': 'Klausoties…',
   'retry': 'Mēģināt vēlreiz',
   'Send failed, {retry}': 'Neizdevās nosūtīt, {retry}',

packages/component/src/Localization/nb-NO.js

@@ -1,5 +1,7 @@
 export default {
   // 'Chat': 'Chat',
+  // 'Microphone off': '',
+  // 'Microphone on': '',
   'Listening…': 'Lytter…',
   'retry': 'prøv igjen',
   'Send failed, {retry}': '{retry}',

packages/component/src/Localization/nl-NL.js

@@ -1,5 +1,7 @@
 export default {
   'Chat': 'Chat',
+  // 'Microphone off': '',
+  // 'Microphone on': '',
   'Listening…': 'Aan het luisteren…',
   'retry': 'opnieuw',
   'Send failed, {retry}': 'versturen mislukt, {retry}',

packages/component/src/Localization/pl-PL.js

@@ -1,5 +1,7 @@
 export default {
   'Chat': 'Czat',
+  // 'Microphone off': '',
+  // 'Microphone on': '',
   'Listening…': 'Słuchanie…',
   'retry': 'wyślij ponownie',
   'Send failed, {retry}': 'wysłanie nieudane, {retry}',

packages/component/src/Localization/pt-BR.js

@@ -1,5 +1,7 @@
 export default {
   'Chat': 'Bate-papo',
+  // 'Microphone off': '',
+  // 'Microphone on': '',
   'Listening…': 'Ouvindo…',
   'retry': 'repetir',
   'Send failed, {retry}': 'não pude enviar, {retry}',

packages/component/src/Localization/pt-PT.js

@@ -1,5 +1,7 @@
 export default {
   'Chat': 'Chat',
+  // 'Microphone off': '',
+  // 'Microphone on': '',
   'Listening…': 'A Escutar…',
   'retry': 'repetir',
   'Send failed, {retry}': 'não foi possível enviar, {retry}',

packages/component/src/Localization/ru-RU.js

@@ -31,6 +31,8 @@ export default {
   'Adaptive Card parse error': 'Ошибка парсинга адаптивной карты',
   'Adaptive Card render error': 'Ошибка отображения адаптивной карты',
   'Chat': 'Чат',
+  // 'Microphone off': '',
+  // 'Microphone on': '',
   'Listening…': 'Прослушивание…',
   'retry': 'повторить',
   'Send failed, {retry}': 'Не удалось отправить, {retry}',

packages/component/src/Localization/sv-SE.js

@@ -1,5 +1,7 @@
 export default {
   'Chat': 'Chatt',
+  // 'Microphone off': '',
+  // 'Microphone on': '',
   'Listening…': 'Lyssnar…',
   'retry': 'försök igen',
   'Send failed, {retry}': 'kunde inte skicka, {retry}',

packages/component/src/Localization/tr-TR.js

@@ -1,5 +1,7 @@
 export default {
   'Chat': 'Sohbet',
+  // 'Microphone off': '',
+  // 'Microphone on': '',
   'Listening…': 'Dinliyor…',
   'retry': 'yeniden deneyin',
   'Send failed, {retry}': 'gönderilemedi, {retry}',

packages/component/src/Localization/zh-HANS.js

@@ -25,6 +25,8 @@ function xMinutesAgo(date) {
 
 export default {
   'Chat': '聊天',
+  // 'Microphone off': '',
+  // 'Microphone on': '',
   'Left': '左',
   'Listening…': '正在倾听…',
   'New messages': '新讯息',

packages/component/src/Localization/zh-HANT.js

@@ -25,6 +25,8 @@ function xMinutesAgo(date) {
 
 export default {
   'Chat': '聊天',
+  'Microphone off': '開啟麥克風',
+  'Microphone on': '關閉麥克風',
   'Left': '左',
   'Listening…': '正在聆聽…',
   'New messages': '新訊息',

packages/component/src/Localization/zh-YUE.js

@@ -26,6 +26,8 @@ function xMinutesAgo(date) {
 
 export default {
   'Chat': '傾偈',
+  'Microphone off': '閂咪',
+  'Microphone on': '開咪',
   'Left': '左',
   'Listening…': '聽緊你講嘢…',
   'New messages': '新訊息',

packages/component/src/SendBox/MicrophoneButton.js

@@ -12,7 +12,17 @@ import MicrophoneIcon from './Assets/MicrophoneIcon';
 const { DictateState } = Constants;
 
 const ROOT_CSS = css({
-  display: 'flex'
+  display: 'flex',
+
+  '& > .sr-only': {
+    color: 'transparent',
+    height: 1,
+    left: -10000,
+    overflow: 'hidden',
+    position: 'absolute',
+    top: 'auto',
+    width: 1
+  }
 });
 
 const connectMicrophoneButton = (...selectors) => connectToWebChat(
@@ -48,19 +58,29 @@ export default connectMicrophoneButton(
     language,
     styleSet
   }) =>
-    <div className={ classNames(
-      styleSet.microphoneButton + '',
-      ROOT_CSS + '',
-      (className || '') + '',
-      { dictating }
-    ) }>
+    <div
+      aria-controls="webchatSendBoxMicrophoneButton"
+      className={ classNames(
+        styleSet.microphoneButton + '',
+        ROOT_CSS + '',
+        (className || '') + '',
+        { dictating }
+      ) }
+    >
       <IconButton
         alt={ localize('Speak', language) }
         disabled={ disabled }
         onClick={ click }
       >
         <MicrophoneIcon />
       </IconButton>
+      <div 
+        aria-live="polite"
+        className="sr-only"
+        id="webchatSendBoxMicrophoneButton"
+      >
+        { localize(dictating ? 'Microphone on' : 'Microphone off', language) }
+      </div>
     </div>
 )