Accessibility of anchors and sample improvements (#1710)

* Link to hosted sample and create 05.a README.md

* Add 05.a README.md

* 05.b sample README.md

* Add 05.c README.md

* Add 05.d README.md

* Update and Add 06.a and 06.b

* Update 06.b

* Minor fixes and add 06.c README.md

* Update 'Further reading' link text

* Add 06.e README.md sample

* Add 06.f README.md

* Add 07.a README.md and minor corrections

* Update sample CSS to remove root height and width

* Add 07.b README.md

* Add 08 README.md

* Add 09 README.md

* Update 10.a README.md

* Samples 'Further reading' cleanup pass

* Add 10.b README.md

* minor edits

* Anchor accessibility pass

* Sample table cleanup

* Link accessibility pass

* Update CHANGELOG.md

* Fix various typos and errors

CHANGELOG.md

@@ -87,6 +87,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - `component`: Use Speech Services token for [speech UI sample](https://microsoft.github.io/BotFramework-WebChat/13.customization-speech-ui/), in [#1634](https://github.com/Microsoft/BotFramework-WebChat/pull/1634)
 - `component`: [Selectable Activity](https://microsoft.github.io/BotFramework-WebChat/16.customization-selectable-activity/), in [#1624](https://github.com/Microsoft/BotFramework-WebChat/pull/1624)
 - `component`: [Chat Send History](https://microsoft.github.io/BotFramework-WebChat/17.chat-send-history/), in [#1678](https://github.com/Microsoft/BotFramework-WebChat/pull/1678)
+- `*`: Update `README.md`'s for samples 05-10 [#1444](https://github.com/Microsoft/BotFramework-WebChat/issues/1444) and improve accessibility of anchors [#1681](https://github.com/Microsoft/BotFramework-WebChat/issues/1681), by [@corinagum](https://github.com/corinagum) in PR [#1710](https://github.com/Microsoft/BotFramework-WebChat/pull/1710)
 
 ## [4.2.0] - 2018-12-11
 ### Added

SAMPLES.md

@@ -6,17 +6,17 @@ Follow the instructions on the [README.md](README.md) page to integrate the Web
 
 The latest version of Web Chat control provides rich customization options: you can change colors, sizes, placement of elements, add custom elements, and interact with the hosting webpage. Below are several examples of how to customize those elements of the Web Chat UI.
 
-You can find the full list of all settings that the Web Chat control understands [here](https://github.com/Microsoft/BotFramework-WebChat/tree/master/packages/component/src/Styles/defaultStyleSetOptions.js).
+You can find the full list of all settings that you can easily modify in Web Chat on the [`defaultStyleSetOptions.js` file](https://github.com/Microsoft/BotFramework-WebChat/tree/master/packages/component/src/Styles/defaultStyleSetOptions.js).
 
-These settings will generate a *style set*, which is a set of CSS rules enhanced with [glamor](https://github.com/threepointone/glamor). You can find the full list of CSS styles generated in the style set [here](https://github.com/Microsoft/BotFramework-WebChat/blob/master/packages/component/src/Styles/createStyleSet.js).
+These settings will generate a *style set*, which is a set of CSS rules enhanced with [glamor](https://github.com/threepointone/glamor). You can find the full list of CSS styles generated in the style set on the [`createStyleSet.js` file](https://github.com/Microsoft/BotFramework-WebChat/blob/master/packages/component/src/Styles/createStyleSet.js).
 
 ## Change font or color
 
 Instead of using the default background color and the fonts used inside of the chat bubbles, you can customize those to match the style of the target web page. The code snippet below allows you to change the background color of messages from the user and from the bot.
 
 <img alt="Screenshot with custom style options" src="https://raw.githubusercontent.com/Microsoft/BotFramework-WebChat/master/doc/sample-custom-style-options.png" width="396" />
 
-If you need to do some simple styling, you can set them thru `styleOptions`. Style options are set of predefined styles that you can modify directly, and Web Chat will compute the whole stylesheet based on it.
+If you need to do some simple styling, you can set them via `styleOptions`. Style options are set of predefined styles that you can modify directly, and Web Chat will compute the whole stylesheet based on it.
 
 ```html
 <!DOCTYPE html>
@@ -164,7 +164,7 @@ ReactDOM.render(
 );
 ```
 
-The full sample can be found at [/samples/10.customization-card-components/](samples/10.customization-card-components/).
+The full sample can be found at [/samples/10.a.customization-card-components/](samples/10.a.customization-card-components/).
 
 In this sample, we are adding a new React component called `GitHubRepositoryAttachment`:
 
@@ -178,7 +178,7 @@ const GitHubRepositoryAttachment = props =>
   </div>;
 ```
 
-Then, we create a middleware that will render the new React component when the bot send attachment of content type `application/vnd.microsoft.botframework.samples.github-repository`. Otherwise, it will continue on the middleware by calling `next(card)`.
+Then, we create a middleware that will render the new React component when the bot sends an attachment of content type `application/vnd.microsoft.botframework.samples.github-repository`. Otherwise, it will continue on the middleware by calling `next(card)`.
 
 ```jsx
 const attachmentMiddleware = () => next => card => {

__tests__/setup/web/index.html

@@ -35,7 +35,7 @@
     }();
     </script>
     <!--
-      For demonstration purpose, we are using development branch of Web Chat at "/master/webchat.js".
+      For demonstration purposes, we are using development branch of Web Chat at "/master/webchat.js".
       When you are using Web Chat for production, you should use the latest stable at "/latest/webchat.js".
       Or locked down on a specific version "/4.1.0/webchat.js".
     -->
@@ -44,8 +44,7 @@
       body { margin: 0 }
       input, textarea, [contenteditable] { caret-color: Transparent; }
 
-      #webchat,
-      #webchat > * {
+      #webchat {
         height: 100%;
         width: 100%;
       }

samples/01.a.getting-started-full-bundle/README.md

@@ -110,8 +110,7 @@ Here is the finished `index.html`:
    <style>
 +    html, body { height: 100% }
 +    body { margin: 0 }
-+    #webchat,
-+    #webchat > * {
++    #webchat {
 +      height: 100%;
 +      width: 100%;
 +    }
@@ -141,14 +140,14 @@ 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/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)
+- [Full bundle with polyfills for ES5 browsers bot](https://microsoft.github.io/BotFramework-WebChat/01.b.getting-started-es5-bundle) | [(Full bundle with polyfills for ES5 browsers source code)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/01.b.getting-started-es5-bundle)
+- [Minimal bundle bot](https://microsoft.github.io/BotFramework-WebChat/02.a.getting-started-minimal-bundle) | [(Minimal bundle source code)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/02.a.getting-started-minimal-bundle)
+- [Minimal bundle with Markdown bot](https://microsoft.github.io/BotFramework-WebChat/02.b.getting-started-minimal-markdown) | [(Minimal bundle with Markdown source code)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/02.b.getting-started-minimal-markdown)
 
 ## CDN sunburst chart
 
-[This chart](http://cdn.botframework.com/botframework-webchat/master/stats.html) provides a visual of the contents of the various Web Chat bundles
+[Web Chat bundles sunburst chart](http://cdn.botframework.com/botframework-webchat/master/stats.html) - provides a visual of the contents of the various Web Chat bundles
 
 ## Full list of Web Chat hosted samples
 
-View the list of available samples by clicking [here](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples)
+View the list of [available Web Chat samples](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples)

samples/01.b.getting-started-es5-bundle/README.md

@@ -1,4 +1,4 @@
-# Sample -  Getting started with Web Chat CDN with ES5 polyfills
+# Sample -  Getting Started with Web Chat CDN with ES5 Polyfills
 
 > This is a great sample for first-time Web Chat users developing bots that must work on Internet Explorer 11.
 
@@ -70,8 +70,7 @@ Here is the finished `index.html`:
       html, body { height: 100% }
       body { margin: 0 }
 
-      #webchat,
-      #webchat > * {
+      #webchat {
         height: 100%;
         width: 100%;
       }
@@ -103,20 +102,20 @@ Here is the finished `index.html`:
 
 # Further reading
 
+- [Learn more about polyfills](https://stackoverflow.com/questions/7087331/what-is-the-meaning-of-polyfills-in-html5)
+
 ## Other CDN bundles
 
 Check out the hosted samples and source code for other CDN bundle options below.
 
-- [Full bundle](https://microsoft.github.io/BotFramework-WebChat/01.a.getting-started-full-bundle) | [(source)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/01.a.getting-started-full-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)
-
-- [Learn more about polyfills](https://stackoverflow.com/questions/7087331/what-is-the-meaning-of-polyfills-in-html5)
+- [Full bundle bot](https://microsoft.github.io/BotFramework-WebChat/01.a.getting-started-full-bundle) | [(Full bundle source code)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/01.a.getting-started-full-bundle)
+- [Minimal bundle bot](https://microsoft.github.io/BotFramework-WebChat/02.a.getting-started-minimal-bundle) | [(Minimal bundle source code)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/02.a.getting-started-minimal-bundle)
+- [Minimal bundle with Markdown bot](https://microsoft.github.io/BotFramework-WebChat/02.b.getting-started-minimal-markdown) | [(Minimal bundle source code)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/02.b.getting-started-minimal-markdown)
 
 ## CDN sunburst chart
 
-[This chart](http://cdn.botframework.com/botframework-webchat/master/stats.html) provides a visual of the contents of the various Web Chat bundles
+[Web Chat bundles sunburst chart](http://cdn.botframework.com/botframework-webchat/master/stats.html) - provides a visual of the contents of the various Web Chat bundles
 
 ## Full list of Web Chat hosted samples
 
-View the list of available samples by clicking [here](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples)
+View the list of [available Web Chat samples](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples)

samples/01.b.getting-started-es5-bundle/index.html

@@ -12,8 +12,7 @@
       html, body { height: 100% }
       body { margin: 0 }
 
-      #webchat,
-      #webchat > * {
+      #webchat {
         height: 100%;
         width: 100%;
       }

samples/01.c.getting-started-migration/README.md

@@ -7,7 +7,7 @@ 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/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. 
+> 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
 
@@ -37,7 +37,7 @@ The `index.html` page in the migration directory has two main goals.
 - To import the Web Chat v4 full bundle CDN script
 - To render Web Chat using the v4 best practices
 
- We'll start by using our old v3 `index.html` as our starting point. 
+ We'll start by using our old v3 `index.html` as our starting point.
 ```html
 <!DOCTYPE html>
 <html lang="en-US">
@@ -69,7 +69,7 @@ Our first change is to update the CDN the webpage uses from v3 to v4.
 +  <script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script>
   </head>
   <body>
--   <div id="bot" />    
+-   <div id="bot" />
 +   <div id="webchat" role="main" />
 -   <script src="https://cdn.botframework.com/botframework-webchat/0.13.1/botchat.js"></script>
 …
@@ -127,8 +127,7 @@ Finally, we will add basic styling since there is no longer a stylesheet include
 +     html, body { height: 100% }
 +     body { margin: 0 }
 
-+     #webchat,
-+     #webchat > * {
++     #webchat {
 +       height: 100%;
 +       width: 100%;
 +     }
@@ -150,8 +149,7 @@ Here is the finished `index.html`:
 +   <style>
 +     html, body { height: 100% }
 +     body { margin: 0 }
-+     #webchat,
-+     #webchat > * {
++     #webchat {
 +       height: 100%;
 +       width: 100%;
 +     }
@@ -177,18 +175,9 @@ Here is the finished `index.html`:
 
 # Further reading
 
-## Other CDN bundles
+- [Full bundle bot](https://microsoft.github.io/BotFramework-WebChat/01.a.getting-started-full-bundle) | [(Full bundle source code)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/01.a.getting-started-full-bundle)
 
-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/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
-
-[This chart](http://cdn.botframework.com/botframework-webchat/master/stats.html) provides a visual of the contents of the various Web Chat bundles
 
 ## Full list of Web Chat hosted samples
 
-View the list of available samples by clicking [here](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples)
+View the list of [available Web Chat samples](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples)

samples/01.c.getting-started-migration/index.html

@@ -12,8 +12,7 @@
       html, body { height: 100% }
       body { margin: 0 }
 
-      #webchat,
-      #webchat > * {
+      #webchat {
         height: 100%;
         width: 100%;
       }

samples/02.a.getting-started-minimal-bundle/README.md

@@ -8,6 +8,10 @@ A simple web page with a maximized Web Chat and minimal additional components. T
 - Cognitive Services Bing Speech
 - Markdown-It
 
+# Test out the hosted sample
+- [Try out MockBot](https://microsoft.github.io/BotFramework-WebChat/02.a.getting-started-minimal-bundle)
+
+
 # How to run
 
 - Fork this repository
@@ -88,3 +92,21 @@ Here is the finished `index.html`:
   </body>
 </html>
 ```
+
+# Further reading
+
+## Other CDN bundles
+
+Check out the hosted samples and source code for other CDN bundle options below.
+
+- [Full bundle bot](https://microsoft.github.io/BotFramework-WebChat/01.a.getting-started-full-bundle) | [(Full bundle source code)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/01.a.getting-started-full-bundle)
+- [Full bundle with polyfills for ES5 browsers bot](https://microsoft.github.io/BotFramework-WebChat/01.b.getting-started-es5-bundle) | [(Full bundle with polyfills for ES5 browsers source code)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/01.b.getting-started-es5-bundle)
+- [Minimal bundle with Markdown bot](https://microsoft.github.io/BotFramework-WebChat/02.b.getting-started-minimal-markdown) | [(Minimal bundle with Markdown source code)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/02.b.getting-started-minimal-markdown)
+
+## CDN sunburst chart
+
+[Web Chat bundles sunburst chart](http://cdn.botframework.com/botframework-webchat/master/stats.html) - provides a visual of the contents of the various Web Chat bundles
+
+## Full list of Web Chat hosted samples
+
+View the list of [available Web Chat samples](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples)

samples/02.a.getting-started-minimal-bundle/index.html

@@ -22,8 +22,7 @@
       html, body { height: 100% }
       body { margin: 0 }
 
-      #webchat,
-      #webchat > * {
+      #webchat {
         height: 100%;
         width: 100%;
       }

samples/02.b.getting-started-minimal-markdown/README.md

@@ -1,4 +1,4 @@
-# Sample - Getting Started with Web Chat CDN minimal bundle and Markdown
+# Sample - Getting Started with Web Chat CDN Minimal Bundle and Markdown
 
 ## Description
 
@@ -7,6 +7,10 @@ A simple web page with a maximized Web Chat and minimal additional components. T
 - Adaptive Cards
 - Cognitive Services Bing Speech
 
+# Test out the hosted sample
+
+- [Try out MockBot](https://microsoft.github.io/BotFramework-WebChat/02.b.getting-started-minimal-markdown)
+
 # How to run
 
 - Fork this repository
@@ -64,8 +68,7 @@ Here is the finished `index.html`:
       html, body { height: 100% }
       body { margin: 0 }
 
-      #webchat,
-      #webchat > * {
+      #webchat {
         height: 100%;
         width: 100%;
       }
@@ -91,3 +94,22 @@ Here is the finished `index.html`:
 </html>
 
 ```
+
+# Further reading
+
+## Other CDN bundles
+
+Check out the hosted samples and source code for other CDN bundle options below.
+
+- [Full bundle bot](https://microsoft.github.io/BotFramework-WebChat/01.a.getting-started-full-bundle) | [(Full bundle source code)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/01.a.getting-started-full-bundle)
+- [Full bundle with polyfills for ES5 browsers bot](https://microsoft.github.io/BotFramework-WebChat/01.b.getting-started-es5-bundle) | [(Full bundle with polyfills for ES5 browsers source code)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/01.b.getting-started-es5-bundle)
+- [Minimal bundle bot](https://microsoft.github.io/BotFramework-WebChat/02.a.getting-started-minimal-bundle) | [(Minimal bundle source code)](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/02.a.getting-started-minimal-bundle)
+
+
+## CDN sunburst chart
+
+[Web Chat bundles sunburst chart](http://cdn.botframework.com/botframework-webchat/master/stats.html) - provides a visual of the contents of the various Web Chat bundles
+
+## Full list of Web Chat hosted samples
+
+View the list of [available Web Chat samples](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples)

samples/02.b.getting-started-minimal-markdown/index.html

@@ -22,8 +22,7 @@
       html, body { height: 100% }
       body { margin: 0 }
 
-      #webchat,
-      #webchat > * {
+      #webchat {
         height: 100%;
         width: 100%;
       }

samples/03.a.host-with-react/README.md

@@ -52,7 +52,7 @@ We'll start by adding React and Babel to the head or our template, based off of
 
 The core of this code both creates and renders the React component that displays Web Chat.
 
-```js
+```jsx
 …
 const { createStore, ReactWebChat } = window.WebChat;
 const { Provider } = window.ReactRedux;
@@ -88,7 +88,7 @@ Here is the finished `index.html`:
     <style>
       html, body { height: 100% }
       body { margin: 0 }
-      #webchat, #webchat > * {
+      #webchat {
         height: 100%;
         width: 100%;
       }
@@ -127,4 +127,4 @@ Here is the finished `index.html`:
 
 ## Full list of Web Chat hosted samples
 
-View the list of available samples by clicking [here](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples)
+View the list of [available Web Chat samples](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples)

samples/03.a.host-with-react/index.html

@@ -18,8 +18,7 @@
       html, body { height: 100% }
       body { margin: 0 }
 
-      #webchat,
-      #webchat > * {
+      #webchat {
         height: 100%;
         width: 100%;
       }