microsoft · corinagum · Dec 12, 2018 · Dec 10, 2018 · Dec 10, 2018 · Dec 10, 2018
@@ -51,6 +51,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Fix [#1397](https://github.com/Microsoft/BotFramework-WebChat/issues/1397/) by patching activities without `from` field, in PR [#1405](https://github.com/Microsoft/BotFramework-WebChat/pull/1405)
 - Fix [#1237](https://github.com/Microsoft/BotFramework-WebChat/issues/1237). Added new sample called `migration`, by [@corinagum](https://github.com/corinagum) in PR [#1398](https://github.com/Microsoft/BotFramework-WebChat/pull/1398)
 - Fix sample names and add table to README; resolves [Issue #1332](https://github.com/Microsoft/BotFramework-WebChat/issues/1332) by [@corinagum](https://github.com/corinagum) in PR [#1435](https://github.com/Microsoft/BotFramework-WebChat/pull/1435)
+- Fix [#1360](https://github.com/Microsoft/BotFramework-WebChat/issues/1360). Add roles to components of web chat by [@corinagum](https://github.com/corinagum) in PR [#1462](https://github.com/Microsoft/BotFramework-WebChat/pull/1462)
 
 ### Fixed
 - Build: Webpack watch mode now emits non-minified code for shorter dev RTT, in [#1331](https://github.com/Microsoft/BotFramework-WebChat/pull/1331)

@@ -22,7 +22,7 @@ If you need to do some simple styling, you can set them thru `styleOptions`. Sty
 <!DOCTYPE html>
 <html>
   <body>
-    <div id="webchat"></div>
+    <div id="webchat" role="main"></div>
     <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
     <script>
       const styleOptions = {
@@ -55,7 +55,7 @@ For deeper styling, you can also modify the style set manually by setting the CS
 <!DOCTYPE html>
 <html>
   <body>
-    <div id="webchat"></div>
+    <div id="webchat" role="main"></div>
     <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
     <script>
       // "styleSet" is a set of CSS rules which are generated from "styleOptions"
@@ -91,7 +91,7 @@ The latest Web Chat support avatar, you can customize them using `botAvatarIniti
 <!DOCTYPE html>
 <html>
   <body>
-    <div id="webchat"></div>
+    <div id="webchat" role="main"></div>
     <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
     <script>
       window.WebChat.renderWebChat({
@@ -164,7 +164,7 @@ ReactDOM.render(
 );
 ```
 
-The full sample can be found at [/samples/custom-attachment-github-repository/](samples/custom-attachment-github-repository/).
+The full sample can be found at [/samples/10.customization-card-components/](samples/10.customization-card-components/).
 
 In this sample, we are adding a new React component called `GitHubRepositoryAttachment`:
 

@@ -4,7 +4,7 @@ Automated testing in Web Chat is using multiple open-source technologies.
 
 - [Travis CI](https://travis-ci.org/) for automatic testing
 - Test against [MockBot](https://github.com/compulim/BotFramework-MockBot)
-   - Try it out with this [live demo](https://microsoft.github.io/BotFramework-WebChat/full-bundle)
+   - Try it out with this [live demo](https://microsoft.github.io/BotFramework-WebChat/01.a.getting-started-full-bundle)
 - Visual regression test (a.k.a. compare screenshots)
    - Generated on [Chrome on Docker](https://github.com/SeleniumHQ/docker-selenium)
    - Compared using [`pixelmatch`](https://npmjs.com/package/pixelmatch) via [`jest-image-snapshot`](https://npmjs.com/package/jest-image-snapshot)

@@ -49,7 +49,7 @@
     </style>
   </head>
   <body>
-    <div id="webchat"></div>
+    <div id="webchat" role="main"></div>
     <script>
       (async function () {
         // In this demo, we are using Direct Line token from MockBot.

@@ -35,11 +35,14 @@ const BasicSendBox = ({
   styleSet,
   webSpeechPonyfill
 }) =>
-  <div className={ classNames(
-    styleSet.sendBox + '',
-    ROOT_CSS + '',
-    (className || '') + ''
-  ) }>
+  <div 
+    className={ classNames(
+      styleSet.sendBox + '',
+      ROOT_CSS + '',
+      (className || '') + ''
+    ) }
+    role="form"
+  >
     <SuggestedActions />
     <div className="main">
       <UploadButton />

@@ -86,6 +86,7 @@ const BasicTranscript = ({
         ROOT_CSS + '',
         (className || '') + ''
       ) }
+      role="region"
     >
       <ScrollToBottomPanel className={ PANEL_CSS + '' }>
         <div className={ FILLER_CSS } />

@@ -70,7 +70,7 @@ export default connectSendTextBox(
         <TypeFocusSinkContext.Consumer>
           { ({ sendFocusRef }) =>
             <input
-                  aria-label={ typeYourMessageString }
+              aria-label={ typeYourMessageString }
               disabled={ disabled }
               onChange={ onChange }
               placeholder={ typeYourMessageString }

@@ -6,12 +6,12 @@ A simple web page with a maximized and full-featured Web Chat embed from a CDN.
 
 # Test out the hosted sample
 
-- [Try out MockBot](https://microsoft.github.io/BotFramework-WebChat/full-bundle)
+- [Try out MockBot](https://microsoft.github.io/BotFramework-WebChat/01.a.getting-started-full-bundle)
 
 # How to run locally
 
 - Fork this repository
-- Navigate to `/Your-Local-WebChat/samples/full-bundle` in command line
+- Navigate to `/Your-Local-WebChat/samples/01.a.getting-started-full-bundle` in command line
 - Run `npx serve` in the full-bundle directory
 - Browse to [http://localhost:5000/](http://localhost:5000/)
 
@@ -52,7 +52,7 @@ Next, the code to render Web Chat must be added to the body. Note that MockBot u
 
 ```diff
 <body>
-+ <div id="webchat"></div>
++ <div id="webchat" role="main"></div>
 + <script>
 +   (async function () {
 +     const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
@@ -118,7 +118,7 @@ Here is the finished `index.html`:
    </style>
   </head>
    <body>
-+    <div id="webchat"></div>
++    <div id="webchat" role="main"></div>
 +    <script>
 +     (async function () {
 +       const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
@@ -141,9 +141,9 @@ Here is the finished `index.html`:
 
 Check out the hosted samples and source code for other CDN bundle options below.
 
-- [Full bundle with polyfills for ES5 browsers](https://microsoft.github.io/BotFramework-WebChat/es5-bundle) | [(source)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/es5-bundle)
-- [Minimal bundle](https://microsoft.github.io/BotFramework-WebChat/minimal-bundle) | [(source)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/minimal-bundle)
-- [Minimal bundle with Markdown](https://microsoft.github.io/BotFramework-WebChat/minimal-bundle-with-markdown) | [(source)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/minimal-bundle-with-markdown)
+- [Full bundle with polyfills for ES5 browsers](https://microsoft.github.io/BotFramework-WebChat/01.b.getting-started-es5-bundle) | [(source)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/01.b.getting-started-es5-bundle)
+- [Minimal bundle](https://microsoft.github.io/BotFramework-WebChat/02.a.getting-started-minimal-bundle) | [(source)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/02.a.getting-started-minimal-bundle)
+- [Minimal bundle with Markdown](https://microsoft.github.io/BotFramework-WebChat/02.b.getting-started-minimal-markdown) | [(source)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/02.b.getting-started-minimal-markdown)
 
 ## CDN sunburst chart
 

@@ -20,7 +20,7 @@
     </style>
   </head>
   <body>
-    <div id="webchat"></div>
+    <div id="webchat" role="main"></div>
     <script>
       (async function () {
         // In this demo, we are using Direct Line token from MockBot.

@@ -20,7 +20,7 @@
     </style>
   </head>
   <body>
-    <div id="webchat"></div>
+    <div id="webchat" role="main"></div>
     <script>
       // In this demo, we are using Direct Line token from MockBot.
       // To talk to your bot, you should use the token exchanged using your Direct Line secret.

@@ -2,17 +2,17 @@
 
 A simple web page with a maximized and full-featured Web Chat embed from a CDN. This shows the steps on how to migrate from a Web Chat v3 to v4.
 
-> Note: This sample is __unrelated__ to the version of **Bot Framework** that the bot is using. This sample makes changes from the v3 Web Chat samples to ultimately match the [full-bundle CDN sample](./../full-bundle/README.md).
+> Note: This sample is __unrelated__ to the version of **Bot Framework** that the bot is using. This sample makes changes from the v3 Web Chat samples to ultimately match the [full-bundle CDN sample](./../01.a.getting-started-full-bundle/README.md).
 
 # Test out the hosted sample
 
-- [Try out MockBot](https://microsoft.github.io/BotFramework-WebChat/full-bundle)
+- [Try out MockBot](https://microsoft.github.io/BotFramework-WebChat/01.a.getting-started-full-bundle)
 > Although there are two separate samples, one named `full-bundle` and the other named `migration`, the end-result HTML is exactly the same. Therefore, the `migration` sample links to the same `full-bundle` bot. 
 
 # How to run locally
 
 - Fork this repository
-- Navigate to `/Your-Local-WebChat/samples/migration` in command line
+- Navigate to `/Your-Local-WebChat/samples/01.c.getting-started-migration` in command line
 - Run `npx serve` in the migration directory
 - Browse to [http://localhost:5000/](http://localhost:5000/)
 
@@ -70,7 +70,7 @@ Our first change is to update the CDN the webpage uses from v3 to v4.
   </head>
   <body>
 -   <div id="bot" />    
-+   <div id="webchat" />
++   <div id="webchat" role="main" />
 -   <script src="https://cdn.botframework.com/botframework-webchat/0.13.1/botchat.js"></script>
 …
 ```
@@ -81,7 +81,7 @@ Next, the code to render Web Chat must be updated in the body. Note that MockBot
 ```diff
 …
 <body>
-  <div id="webchat"></div>
+  <div id="webchat" role="main"></div>
   <script>
 -   BotChat.App({
 -     directLine: { secret: direct_line_secret },
@@ -158,7 +158,7 @@ Here is the finished `index.html`:
 +   </style>
   </head>
   <body>
-+   <div id="webchat"></div>
++   <div id="webchat" role="main"></div>
 +   <script>
 +    (async function () {
 +      const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
@@ -181,9 +181,9 @@ Here is the finished `index.html`:
 
 Check out the hosted samples and source code for other CDN bundle options below.
 
-- [Full bundle with polyfills for ES5 browsers](https://microsoft.github.io/BotFramework-WebChat/es5-bundle) | [(source)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/es5-bundle)
-- [Minimal bundle](https://microsoft.github.io/BotFramework-WebChat/minimal-bundle) | [(source)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/minimal-bundle)
-- [Minimal bundle with Markdown](https://microsoft.github.io/BotFramework-WebChat/minimal-bundle-with-markdown) | [(source)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/minimal-bundle-with-markdown)
+- [Full bundle with polyfills for ES5 browsers](https://microsoft.github.io/BotFramework-WebChat/01.b.getting-started-es5-bundle) | [(source)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/01.b.getting-started-es5-bundle)
+- [Minimal bundle](https://microsoft.github.io/BotFramework-WebChat/02.a.getting-started-minimal-bundle) | [(source)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/02.a.getting-started-minimal-bundle)
+- [Minimal bundle with Markdown](https://microsoft.github.io/BotFramework-WebChat/02.b.getting-started-minimal-markdown) | [(source)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/02.b.getting-started-minimal-markdown)
 
 ## CDN sunburst chart
 

@@ -20,7 +20,7 @@
     </style>
   </head>
   <body>
-    <div id="webchat"></div>
+    <div id="webchat" role="main"></div>
     <script>
       (async function () {
         // In this demo, we are using Direct Line token from MockBot.