microsoft · corinagum · Dec 18, 2018 · Dec 13, 2018 · Dec 13, 2018 · Dec 14, 2018
@@ -7,3 +7,4 @@
 
 # Do not commit binaries
 /chromedriver*
+chromedriver.exe
@@ -25,14 +25,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Fix [#1360](https://github.com/Microsoft/BotFramework-WebChat/issues/1360). Added `roles` to components of Web Chat, by [@corinagum](https://github.com/corinagum) in PR [#1462](https://github.com/Microsoft/BotFramework-WebChat/pull/1462)
 - 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)
 - Fix [#1605](https://github.com/Microsoft/BotFramework-WebChat/issues/1305), [#1316](https://github.com/Microsoft/BotFramework-WebChat/issues/1316), [#1341](https://github.com/Microsoft/BotFramework-WebChat/issues/1341), [#1411](https://github.com/Microsoft/BotFramework-WebChat/issues/1411). Fix color contrast ratios & downloadIcon narrator accessibility by [@corinagum](https://github.com/corinagum) in PR [#1494](https://github.com/Microsoft/BotFramework-WebChat/pull/1494)
-
-### Samples
-- UI: [Hide upload button](https://microsoft.github.io/BotFramework-WebChat/05.d.hide-upload-button-styling/), in [#1491](https://github.com/Microsoft/BotFramework-WebChat/pull/1491)
+- Fix [#1264](https://github.com/Microsoft/BotFramework-WebChat/issues/1264), [#1308](https://github.com/Microsoft/BotFramework-WebChat/issues/1308), [#1318](https://github.com/Microsoft/BotFramework-WebChat/issues/1318), [#1334](https://github.com/Microsoft/BotFramework-WebChat/issues/1334),[#1425](https://github.com/Microsoft/BotFramework-WebChat/issues/1425). Update icons with accessibilty, Sent message accessibility, and fix sample README.md,  [@corinagum](https://github.com/corinagum) in PR [#1506](https://github.com/Microsoft/BotFramework-WebChat/pull/1506)
 
 ### Removed
 - `botAvatarImage` and `userAvatarImage` props, as they are moved inside `styleOptions`, in PR [#1486](https://github.com/Microsoft/BotFramework-WebChat/pull/1486)
 
 ### Samples
+- UI: [Hide upload button](https://microsoft.github.io/BotFramework-WebChat/05.d.hide-upload-button-styling/), in [#1491](https://github.com/Microsoft/BotFramework-WebChat/pull/1491)
 - UI: [Avatar image](https://microsoft.github.io/BotFramework-WebChat/04.b.display-user-bot-images-styling/), in [#1486](https://github.com/Microsoft/BotFramework-WebChat/pull/1486)
 
 ## [4.2.0] - 2018-12-11

@@ -101,7 +101,7 @@ For full customizability, you can use React to recompose components of Web Chat.
 To install the production build from NPM, run `npm install botframework-webchat`.
 
 ```jsx
-import DirectLine from 'botframework-directlinejs';
+import { DirectLine } from 'botframework-directlinejs';
 import React from 'react';
 import ReactWebChat from 'botframework-webchat';
 

@@ -1,2 +1,3 @@
 # Ignore baseline images from local build because they "Works on my machine <TM>"
 /chrome-local
+chromedriver.exe
@@ -54,6 +54,9 @@ global.setupWebServer = async () => {
         rewrites: [
           { source: '/webchat.js', destination: 'packages/bundle/dist/webchat.js' },
           { source: '/webchat-es5.js', destination: 'packages/bundle/dist/webchat-es5.js' },
+          { source: '/webchat-instrumented.js', destination: 'packages/bundle/dist/webchat-instrumented.js' },
+          { source: '/webchat-instrumented-es5.js', destination: 'packages/bundle/dist/webchat-instrumented-es5.js' },
+          { source: '/webchat-instrumented-minimal.js', destination: 'packages/bundle/dist/webchat-instrumented-minimal.js' },
           { source: '/webchat-minimal.js', destination: 'packages/bundle/dist/webchat-minimal.js' }
         ],
         public: join(__dirname, '../..'),

@@ -1,15 +1,12 @@
 import React from 'react';
 
 export default ({ className, label, size = 1 }) =>
-  <svg
-    aria-label={ label }
-    className={ className }
-    height={ 20 * size }
-    viewBox="0 0 12 20"
-    width={ 12 * size }
-  >
-    <path
-      d="M.435 20v-1.25h11.13V20H.435zM12 10.44l-6 6.113-6-6.114.87-.88 4.512 4.59V0h1.236v14.15l4.512-4.59.87.88z"
-      fillRule="evenodd"
-    />
-  </svg>
+<svg
+  aria-label={ label }
+  className={ className }
+  height={ 22 * size }
+  viewBox="0 0 31.8 46"
+  width={ 22 * size }
+>
+  <path d="M26.8,23.8l-10.9,11L5,23.8l1.6-1.6l8.2,8.3V5H17v25.5l8.2-8.3L26.8,23.8z M5.8,41v-2.2H26V41H5.8z"/>
+</svg>
@@ -94,7 +94,11 @@ const BasicTranscript = ({
           speechSynthesis={ speechSynthesis }
           speechSynthesisUtterance={ SpeechSynthesisUtterance }
         >
-          <ul className={ classNames(LIST_CSS + '', styleSet.activities + '') }>
+          <ul 
+            aria-live="polite"
+            className={ classNames(LIST_CSS + '', styleSet.activities + '') } 
+            role="list"
+          >
             {
               visibleActivities.map((activity, index) => {
                 const showTimestamp = shouldShowTimestamp(activity, visibleActivities[index + 1], groupTimestamp);
@@ -103,6 +107,7 @@ const BasicTranscript = ({
                   <li
                     className={ styleSet.activity }
                     key={ activity.id || (activity.channelData && activity.channelData.clientActivityID) || index }
+                    role="listitem"
                   >
                     { activityRenderer({ activity, showTimestamp })(({ attachment }) => attachmentRenderer({ activity, attachment })) }
                     { activity.channelData && activity.channelData.speak && <SpeakActivity activity={ activity } /> }

@@ -1,9 +1,20 @@
+import { css } from 'glamor';
 import React from 'react';
 
+const ROOT_CSS = css({
+  height: 28,
+  overflow: 'hidden',
+  padding: 6,
+  width: 28
+});
+
 export default () =>
-  <svg
-    height={ 18 }
-    width={ 26 }
-  >
-    <path d="M19.96 4.79m-2 0a2 2 0 0 1 4 0 2 2 0 0 1-4 0zM8.32 4.19L2.5 15.53 22.45 15.53 17.46 8.56 14.42 11.18 8.32 4.19ZM1.04 1L1.04 17 24.96 17 24.96 1 1.04 1ZM1.03 0L24.96 0C25.54 0 26 0.45 26 0.99L26 17.01C26 17.55 25.53 18 24.96 18L1.03 18C0.46 18 0 17.55 0 17.01L0 0.99C0 0.45 0.47 0 1.03 0Z" />
-  </svg>
+  <div className={ ROOT_CSS }>
+    <svg
+      height={ 28 }
+      viewBox="0 0 25.75 46"
+      width={ 28 }
+    >
+      <path d="M20.75 11.75v21.37a7.69 7.69 0 0 1-.62 3.07 7.95 7.95 0 0 1-4.19 4.19 7.89 7.89 0 0 1-6.13 0 7.95 7.95 0 0 1-4.19-4.19 7.69 7.69 0 0 1-.62-3.07v-22.5a5.27 5.27 0 0 1 .45-2.17 5.69 5.69 0 0 1 3-3 5.48 5.48 0 0 1 4.35 0 5.69 5.69 0 0 1 3 3 5.27 5.27 0 0 1 .45 2.17v22.5a3.41 3.41 0 0 1-.26 1.32 3.31 3.31 0 0 1-1.8 1.8 3.46 3.46 0 0 1-2.63 0 3.31 3.31 0 0 1-1.8-1.8 3.41 3.41 0 0 1-.26-1.32V14h2.25v19.12a1.13 1.13 0 1 0 2.25 0v-22.5a3.4 3.4 0 0 0-.26-1.31 3.31 3.31 0 0 0-1.8-1.8 3.46 3.46 0 0 0-2.63 0 3.31 3.31 0 0 0-1.8 1.8 3.4 3.4 0 0 0-.26 1.31v22.5a5.32 5.32 0 0 0 .45 2.18 5.69 5.69 0 0 0 3 3 5.48 5.48 0 0 0 4.35 0 5.69 5.69 0 0 0 3-3 5.32 5.32 0 0 0 .45-2.18v-21.37z" clipRule="evenodd" />
+    </svg>
+  </div>
@@ -1,13 +1,23 @@
+import { css } from 'glamor';
+import classNames from 'classnames';
 import React from 'react';
 
+const ROOT_CSS = css({
+  height: 28,
+  overflow: 'hidden',
+  padding: 6,
+  width: 28
+});
+
 export default ({ className }) =>
-  <svg
-    className={ (className || '') + '' }
-    height="22"
-    viewBox="0 0 58 58"
-    width="28"
+  <div
+    className={ classNames((className || '') + '', ROOT_CSS) }
   >
-    <path d="M 44 28 C 43.448 28 43 28.447 43 29 L 43 35 C 43 42.72 36.72 49 29 49 C 21.28 49 15 42.72 15 35 L 15 29 C 15 28.447 14.552 28 14 28 C 13.448 28 13 28.447 13 29 L 13 35 C 13 43.485 19.644 50.429 28 50.949 L 28 56 L 23 56 C 22.448 56 22 56.447 22 57 C 22 57.553 22.448 58 23 58 L 35 58 C 35.552 58 36 57.553 36 57 C 36 56.447 35.552 56 35 56 L 30 56 L 30 50.949 C 38.356 50.429 45 43.484 45 35 L 45 29 C 45 28.447 44.552 28 44 28 Z"/>
-    <path d="M 28.97 44.438 L 28.97 44.438 C 23.773 44.438 19.521 40.033 19.521 34.649 L 19.521 11.156 C 19.521 5.772 23.773 1.368 28.97 1.368 L 28.97 1.368 C 34.166 1.368 38.418 5.772 38.418 11.156 L 38.418 34.649 C 38.418 40.033 34.166 44.438 28.97 44.438 Z"/>
-    <path d="M 29 46 C 35.065 46 40 41.065 40 35 L 40 11 C 40 4.935 35.065 0 29 0 C 22.935 0 18 4.935 18 11 L 18 35 C 18 41.065 22.935 46 29 46 Z M 20 11 C 20 6.037 24.038 2 29 2 C 33.962 2 38 6.037 38 11 L 38 35 C 38 39.963 33.962 44 29 44 C 24.038 44 20 39.963 20 35 L 20 11 Z"/>
-  </svg>
+    <svg
+      height={ 28 }
+      viewBox="0 0 34.75 46"
+      width={ 28 }
+    >
+      <path class="a" d="M29.75,23v6.36a7,7,0,0,1-.56,2.78,7.16,7.16,0,0,1-3.8,3.8,7,7,0,0,1-2.78.56H18.5v2.25H23V41H11.75v-2.25h4.5V36.5h-4.11a7,7,0,0,1-2.78-.56,7.16,7.16,0,0,1-3.8-3.8,7,7,0,0,1-.56-2.78V23h2.25v6.36a4.72,4.72,0,0,0,.39,1.9,4.78,4.78,0,0,0,2.6,2.6,4.72,4.72,0,0,0,1.9.39h10.47a4.72,4.72,0,0,0,1.9-.39,4.78,4.78,0,0,0,2.6-2.6,4.72,4.72,0,0,0,.39-1.9V23Zm-18,5.62a1.13,1.13,0,0,0,1.13,1.13h9a1.13,1.13,0,0,0,1.12-1.13V8.38a1.13,1.13,0,0,0-1.12-1.13h-9a1.13,1.13,0,0,0-1.13,1.13Zm1.13,3.38a3.41,3.41,0,0,1-1.32-.26,3.31,3.31,0,0,1-1.8-1.8,3.41,3.41,0,0,1-.26-1.32V8.38a3.41,3.41,0,0,1,.26-1.32,3.31,3.31,0,0,1,1.8-1.8,3.41,3.41,0,0,1,1.32-.26h9a3.4,3.4,0,0,1,1.31.26,3.31,3.31,0,0,1,1.8,1.8,3.41,3.41,0,0,1,.26,1.32v20.24a3.41,3.41,0,0,1-.26,1.32,3.31,3.31,0,0,1-1.8,1.8,3.4,3.4,0,0,1-1.31.26Z" />
+    </svg>
+  </div>
@@ -1,9 +1,20 @@
+import { css } from 'glamor';
 import React from 'react';
 
-export default props =>
-  <svg
-    height={ 18 }
-    width={ 28 }
-  >
-    <path d="M26.79 9.38A0.31 0.31 0 0 0 26.79 8.79L0.41 0.02C0.36 0 0.34 0 0.32 0 0.14 0 0 0.13 0 0.29 0 0.33 0.01 0.37 0.03 0.41L3.44 9.08 0.03 17.76A0.29 0.29 0 0 0 0.01 17.8 0.28 0.28 0 0 0 0.01 17.86C0.01 18.02 0.14 18.16 0.3 18.16A0.3 0.3 0 0 0 0.41 18.14L26.79 9.38ZM0.81 0.79L24.84 8.79 3.98 8.79 0.81 0.79ZM3.98 9.37L24.84 9.37 0.81 17.37 3.98 9.37Z" />
-  </svg>
+const ROOT_CSS = css({
+  height: 28,
+  overflow: 'hidden',
+  padding: 6,
+  width: 28
+});
+
+export default () =>
+  <div className={ ROOT_CSS }>
+    <svg
+      height={ 28 }
+      viewBox="0 0 45.7 33.8"
+      width={ 28 }
+    >
+      <path d="M8.55 25.25l21.67-7.25H11zm2.41-9.47h19.26l-21.67-7.23zm-6 13l4-11.9L5 5l35.7 11.9z" clipRule="evenodd" />
+    </svg>
+  </div>
@@ -74,10 +74,11 @@ export default connectMicrophoneButton(
       >
         <MicrophoneIcon />
       </IconButton>
-      <div 
+      <div
         aria-live="polite"
         className="sr-only"
         id="webchatSendBoxMicrophoneButton"
+        role="status"
       >
         { localize(dictating ? 'Microphone on' : 'Microphone off', language) }
       </div>

@@ -78,7 +78,7 @@ class UploadButton extends React.Component {
     return (
       <div className={ classNames(ROOT_CSS + '', styleSet.uploadButton + '') }>
         <input
-          aria-label={ uploadFileString }
+          aria-hidden="true"
           disabled={ disabled }
           multiple={ true }
           onChange={ this.handleFileChange }
@@ -88,7 +88,8 @@ class UploadButton extends React.Component {
           type="file"
         />
         <IconButton
-          alt={ localize('Upload file', language) }
+          alt={ uploadFileString }
+          aria-label={ uploadFileString }
           disabled={ disabled }
           onClick={ this.handleClick }
         >

@@ -86,6 +86,7 @@ export class AdaptiveCardBuilder {
         (textblock as any)[prop] = (template as any)[prop];
       }
 
+      textblock.speak = text;
       textblock.text = text;
       container.addItem(textblock);
     }