Skip to content
Permalink
Browse files

Add roles to various components of Web Chat (#1462)

* Update repo's sample links with numbering fixes

* Add form role to SendBox and region role to Transcript.

* update CHANGELOG.md

* Update Transcript from region role to log

* Readme link fixes
  • Loading branch information
Corina
Corina committed Dec 12, 2018
1 parent 9ce4ef0 commit 06ce2988628c2e72b611b239cc7977ff18b2da37
Showing with 121 additions and 129 deletions.
  1. +2 −0 CHANGELOG.md
  2. +25 −25 README.md
  3. +4 −4 SAMPLES.md
  4. +1 −1 __tests__/README.md
  5. +1 −1 __tests__/setup/web/index.html
  6. +7 −21 packages/bundle/package-lock.json
  7. +8 −5 packages/component/src/BasicSendBox.js
  8. +1 −0 packages/component/src/BasicTranscript.js
  9. +1 −1 packages/component/src/SendBox/TextBox.js
  10. +7 −7 samples/{1.a.getting-started-full-bundle → 01.a.getting-started-full-bundle}/README.md
  11. +1 −1 samples/{1.c.getting-started-migration → 01.a.getting-started-full-bundle}/index.html
  12. +1 −1 samples/{1.b.getting-started-es5-bundle → 01.b.getting-started-es5-bundle}/index.html
  13. +9 −9 samples/{1.c.getting-started-migration → 01.c.getting-started-migration}/README.md
  14. +1 −1 samples/{1.a.getting-started-full-bundle → 01.c.getting-started-migration}/index.html
  15. +2 −2 samples/{2.a.getting-started-minimal-bundle → 02.a.getting-started-minimal-bundle}/README.md
  16. +1 −1 samples/{2.a.getting-started-minimal-bundle → 02.a.getting-started-minimal-bundle}/index.html
  17. 0 samples/{2.b.getting-started-minimal-markdown → 02.b.getting-started-minimal-markdown}/README.md
  18. +1 −1 samples/{2.b.getting-started-minimal-markdown → 02.b.getting-started-minimal-markdown}/index.html
  19. +3 −3 samples/{3.a.host-with-react → 03.a.host-with-react}/README.md
  20. +1 −1 samples/{3.a.host-with-react → 03.a.host-with-react}/index.html
  21. 0 samples/{4.display-user-bot-initials-styling → 04.display-user-bot-initials-styling}/README.md
  22. +1 −1 samples/{4.display-user-bot-initials-styling → 04.display-user-bot-initials-styling}/index.html
  23. +1 −1 samples/{5.a.branding-webchat-styling → 05.a.branding-webchat-styling}/index.html
  24. +1 −1 samples/{5.b.idiosyncratic-manual-styling → 05.b.idiosyncratic-manual-styling}/index.html
  25. 0 samples/{5.c.presentation-mode-styling → 05.c.presentation-mode-styling}/README.md
  26. +1 −1 samples/{5.c.presentation-mode-styling → 05.c.presentation-mode-styling}/index.html
  27. +3 −3 samples/{6.a.cognitive-services-bing-speech-js → 06.a.cognitive-services-bing-speech-js}/README.md
  28. +1 −1 samples/{6.a.cognitive-services-bing-speech-js → 06.a.cognitive-services-bing-speech-js}/index.html
  29. +1 −1 ...{6.b.cognitive-services-bing-speech-react → 06.b.cognitive-services-bing-speech-react}/index.html
  30. 0 ...6.c.cognitive-services-speech-services-js → 06.c.cognitive-services-speech-services-js}/README.md
  31. +1 −1 ....c.cognitive-services-speech-services-js → 06.c.cognitive-services-speech-services-js}/index.html
  32. +5 −5 samples/{6.d.speech-web-browser → 06.d.speech-web-browser}/README.md
  33. +1 −1 samples/{6.d.speech-web-browser → 06.d.speech-web-browser}/index.html
  34. 0 samples/{6.d.speech-web-browser → 06.d.speech-web-browser}/serve.json
  35. 0 ...ices-with-lexical-result → 06.e.cognitive-services-speech-services-with-lexical-result}/README.md
  36. +1 −1 ...ces-with-lexical-result → 06.e.cognitive-services-speech-services-with-lexical-result}/index.html
  37. +1 −1 samples/{7.customization-timestamp-grouping → 07.customization-timestamp-grouping}/index.html
  38. 0 samples/{8.customization-user-highlighting → 08.customization-user-highlighting}/README.md
  39. +1 −1 samples/{8.customization-user-highlighting → 08.customization-user-highlighting}/index.html
  40. 0 samples/{9.customization-reaction-buttons → 09.customization-reaction-buttons}/README.md
  41. +1 −1 samples/{9.customization-reaction-buttons → 09.customization-reaction-buttons}/index.html
  42. +1 −1 samples/10.customization-card-components/index.html
  43. +1 −1 samples/11.customization-redux-actions/index.html
  44. +1 −1 samples/12.customization-minimizable-web-chat/public/index.html
  45. +1 −1 samples/13.customization-speech-ui/public/index.html
  46. +1 −1 samples/14.customization-piping-to-redux/public/index.html
  47. +1 −1 samples/15.backchannel-piggyback-on-outgoing-activities/index.html
  48. +16 −16 samples/README.md
  49. +1 −1 samples/webchat-v3/index.html
  50. +1 −1 serve.json
@@ -14,6 +14,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
-->

## [Unreleased]
### Fixed
- 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)

## [4.2.0] - 2018-12-11
### Added

Large diffs are not rendered by default.

@@ -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.

Some generated files are not rendered by default. Learn more.

@@ -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="log"
>
<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.
@@ -11,7 +11,7 @@ A simple web page with a maximized Web Chat and minimal additional components. T
# How to run

- Fork this repository
- Navigate to `/Your-Local-WebChat/samples/minimal-bundle` in command line
- Navigate to `/Your-Local-WebChat/samples/02.a.getting-started-minimal-bundle` in command line
- Run `npx serve`
- Browse to [http://localhost:5000/](http://localhost:5000/)

@@ -72,7 +72,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' });
@@ -30,7 +30,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.
@@ -30,7 +30,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.

0 comments on commit 06ce298

Please sign in to comment.
You can’t perform that action at this time.