Merge branch 'development'

CHANGELOG.md

@@ -4,22 +4,76 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.17.0] - 2020-07-12
+- Improved accessibility - big thanks to @pdkn for this significant contribution
+  * Improve screen reader experience
+    - Add screen reader specific text to questions & answer (hidden visually)
+      so messages are prepended with ( `bot says: `/ `I say: `)  helping to
+      give context to visually impaired
+    - Hide message date from screen readers
+    - Hide loading message from screen readers
+    - Hide avatar image from screen readers
+    - Make the chatbot titlebar title a \<h1> heading – (Pages must contain
+      a level-one heading)
+    - Change \<footer> tag to a \<div> as it's content doesn't conform to
+      normal content of a footer so adding role="contentinfo" isn't applicable
+  * Improve aria
+    - Add aria-label and aria-hidden
+    - Add alt attribute to images (logo)
+    - Add aria-live 'polite' to chat messages list
+  * Improve tabbing
+    - Fix element tabindex greater than zero
+    - Make feedback buttons tabbable
+    - Remove focusability from loading message
+    - Remove focusability from avatar image
+  * Add sound effects
+    - Dispatch event when a message is sent or received (so client app can
+      respond and play audio effect)
+    - Play a SFX when sending/receiving messages
+    - Add a SFX on/off button in toolbar
+    - Allow setting of SFX .mp3 files in config
+      * ui.messageSentSFX and ui.messageReceived
+    - Add config ui.enableSFX to enable sound effects
+* Style changes
+  - ResponseCard buttons css, remove !important so it can be overridden by
+    custom implementation
+  - ResponseCard buttons, change font-size from 12px to 1em so it defaults to
+    a percent size of parent
+  - Adjusted panel dimensions
+  - Removed toolbar dense setting in fullscreen
+* Other
+  - **\[BREAKING CHANGE\]** Changed minimized view to look like a round button
+    with a chat icon (rather than toolbar). The button has a tooltip with a
+    message that can be changed wit the config option:
+    `ui.minButtonToolTipContent`.
+    This changes the UI style and sizes so you may need to adapt your existing
+    custom styles to it.
+  - Add new config option `ui.shouldDisableClickedResponseCardButtons` to
+    control whether response card buttons should be disabled after being clicked
+  - Message list window auto scrolls to top of response message rather than
+    bottom (handy if responses are long else user may have to scroll back up
+    to the start of message)
+  - Allow tooltips and icons to be easily customised/themed via css
+- Fix CloudFront CORS issue. Added CloudFront configuration `CacheMethods` for
+  GET, HEAD and OPTIONS; Also forward headers: Origin,
+  Access-Control-Request-Method and Access-Control-Request-Headers
+
 ## [0.16.0] - 2020-06-06
-- Lex-web-ui now ships with cloudfront as the default distribution method 
-  * better load times 
+- Lex-web-ui now ships with cloudfront as the default distribution method
+  * better load times
   * non public access to S3 bucket
   * better future integration to cloudfront features such as WAF and Lambda@Edge
 - Updated package.json dependencies
 
 ## [0.15.0] - 2020-05-15
-- Moved to Webpack 4 
+- Moved to Webpack 4
 - Changed default parameter ShowResponseCardTitle to be false - was default of true
-- Added back default parameter BotAlias of '$LATEST'. The '$LATEST' 
+- Added back default parameter BotAlias of '$LATEST'. The '$LATEST'
 alias should only be used for manual testing. Amazon Lex limits
 the number of runtime requests that you can make to the $LATEST version of the bot.
 
 ## [0.14.15] - 2020-05-06
-- Fixed text input focus issues on IE11 after pressing enter to send request. 
+- Fixed text input focus issues on IE11 after pressing enter to send request.
 - Added new Iframe API entry points to deleteSession and startNewSession for fine grain control of Lex sessions
 
 ## [0.14.14] - 2020-04-23
@@ -40,7 +94,7 @@ buttons are present. This feature is disabled by default.
 
 ## [0.14.11] - 2020-03-22
 
-### Added 
+### Added
 - Installation support for eu-west-1 and ap-southeast-2
 - CSS Style information and default customization css file
 - Fixed defects with respect to the default Order Flowers Bot installation

README-css-style.md

@@ -1,9 +1,9 @@
 # Quick CSS guide for Lex Web Ui
 
-The ability to update the style of the lex-web-ui to conform to an existing site's style 
+The ability to update the style of the lex-web-ui to conform to an existing site's style
 is important. This guide will walk you through adjusting the UI to meet your needs.
 
-This guide does not cover the case if you are building lex-web-ui for use as a component 
+This guide does not cover the case if you are building lex-web-ui for use as a component
 in other Vue apps or modifing Vue source components for your own implementation.
 
 ## Summary of available css modifications
@@ -12,8 +12,8 @@ in other Vue apps or modifing Vue source components for your own implementation.
 
 ## Iframe width and height
 
-As noted on the bottom of the diagram, if using a parent page to host the lex-web-ui as an iframe, 
-the iframe size and width and position an be controlled using css applied to the parent page. 
+As noted on the bottom of the diagram, if using a parent page to host the lex-web-ui as an iframe,
+the iframe size and width and position an be controlled using css applied to the parent page.
 
 ```shell script
 .lex-web-ui-iframe {
@@ -24,12 +24,12 @@ the iframe size and width and position an be controlled using css applied to the
 }
 ```
 Note that these values can be specified using vw and vh to reflect percentages of the view
-window's width and height. 
+window's width and height.
 
 ## Style for elements of the Lex-Web-Ui
-Use the following process to set style after the lex-web-ui has been deployed. 
+Use the following process to set style after the lex-web-ui has been deployed.
 
-*Note: Version 0.14.11 pre-installs with the file custom-chatbot-style.css and pre-configures its use in index.html. 
+*Note: Version 0.14.11 pre-installs with the file custom-chatbot-style.css and pre-configures its use in index.html.
 Download the file from S3. Follow steps 2 and 3. The default file has all styles commented out. Enable style changes
 you desire and upload the file back to S3.
 
@@ -49,7 +49,7 @@ The new css file will then hold style changes for the elements in the UI.
 
 ### Toolbar
 #### Toolbar Background Color
-There are two distinct mechanisms for changing the background color. 
+There are two distinct mechanisms for changing the background color.
 1) Update lex-web-ui-loader-config.json. Change the property ui.toolbarColor. You must select a value
 from.
 https://vuetifyjs.com/en/styles/colors#
@@ -65,16 +65,30 @@ https://vuetifyjs.com/en/styles/colors#
 .toolbar__title {
   font-family:"Sans-serif" !important;
   font-size: 16px !important;
-  color: #ffffff !important;

-}

+  color: #ffffff !important;
+}
 ```
 
 #### Toolbar logo - easily set in lex-web-ui-loader-config.json
 Modify lex-web-ui-loader-config.json
 ```
 ui.toolbarLogo: "url"
 ```
-
+
+### Minimized button tooltip content
+Modify lex-web-ui-loader-config.json
+```
+"minButtonToolTipContent": "My Chatbot",
+```
+
+### Minimized button color
+```css
+button.min-button {
+    background-color: blue !important;
+    border-color: blue !important;
+}
+```
+
 #### Message Avatar Icons - easily set in lex-web-ui-loader-config.json
 Modify lex-web-ui-loader-config.json
 ```
@@ -88,7 +102,7 @@ ui.avatarImageUrl: "url"
 }
 ```
 
-#### Messages from bot 
+#### Messages from bot
 Set background of the bot's response messages
 ```
 .message-bot .message-bubble {
@@ -166,5 +180,5 @@ Set background of the bot's response messages
 ```
 
 #### Other
-Other CSS can be applied to the classes above in addition to what is listed. Be creative and 
-create a compelling style for your site. 
+Other CSS can be applied to the classes above in addition to what is listed. Be creative and
+create a compelling style for your site.

README.md

@@ -18,6 +18,14 @@ and ability to interrupt responses and replay recordings
 - Ability to programmatically configure and interact with the chatbot
 UI using JavaScript
 
+#### New Features in version 0.17.0
+- Improved screen reader / accessibility features 
+- Added CloudFormation stack outputs for CloudFront and S3 bucket
+- Use response card defined in session attribute "appContext" over that defined by Lex based response Card 
+- Updated dependent packages in package-lock.json identified by Dependabot security alerts 
+- Resolved additional CloudFront CORS issues
+- See [CHANGELOG](CHANGELOG.md) for additional details
+
 #### New Features in version 0.16.0
 - Lex-web-ui now ships with cloudfront as the default distribution method 
   * better load times 
@@ -32,43 +40,6 @@ UI using JavaScript
 alias should only be used for manual testing. Amazon Lex limits
 the number of runtime requests that you can make to the $LATEST version of the bot.
 
-#### New Features in version 0.14.15
-- Fixed text input focus issues on IE11 after pressing enter to send request. 
-- Added new Iframe API entry points to deleteSession and startNewSession for fine grain control of Lex sessions
-
-#### New Features in version 0.14.14
-- Added css to resolve message-text width issue in IE11. 
-- Disabled text input components when the UI is performing Lex postText processing (sending / receiving)
-- Switched default load options to use minimized components
-- Removed use of default Alias '$LATEST'. Users must specify the appropriate alias to use. 
-
-#### New Features in version 0.14.13
-- Added new feature that allows the input area to be hidden if Response Card buttons are present. User
-must select from the available set of buttons. To enable this feature set the property 
-ui.hideInputFieldsForButtonResponse to true in the lex-web-ui-loader-config.json. This file is stored in
-the S3 bucket hosting the UI. Upload back to the S3 bucket. This feature
-is disabled by default. 
-- Removed use of botocore.vendored.requests. Now imports this module for python based lambda functions. 
-
-#### New Features in version 0.14.12
-- Defect fixes for CORS processing
-- Updates for multi-region support
-- Easy URLs to launch in us-east-1 (N. Virginia), us-west-2 (Oregon), eu-west-1 (Ireland), ap-southeast-2 (Sydney) - see Launch links below
-
-#### New Features in version 0.14.11
-- Installation now supported in several regions - see the Launch links below
-- Added css guide and default customization css file to allow style modifications used by index.html
-- Bug fixes related to installing sample Order Flowers bot
-
-#### New Features in version 0.14.9
-- Use of NodeJS 10.x for Lambda functions.
-Note that this feature requires use of NodeJS 10.16.3 or higher and npm version 6.13.0 or higher
-to build the LexWebUi. 
-- Moved use of Polly for initial speech instruction to be used by Cognito Auth Role only
-
-#### New Features in version 0.14.8
-- Inline message feedback buttons
-
 <img src="./img/feedbackButtons.png" width="480">
 
 Toolbar Buttons

build/update-lex-web-ui-config.js

@@ -26,7 +26,8 @@ const config = require('../config');
   'UI_TOOLBAR_LOGO',
   'NEGATIVE_INTENT',
   'POSITIVE_INTENT',
-  'HELP_INTENT'
+  'HELP_INTENT',
+  'MIN_BUTTON_TOOLTIP_CONTENT',
 ].forEach(function (envVar) {
   console.log('[INFO] Env var - %s: [%s]', envVar, process.env[envVar]);
 });

config/base.env.js

@@ -26,6 +26,7 @@ module.exports = {
     positiveFeedbackIntent: process.env.POSITIVE_INTENT,
     negativeFeedbackIntent: process.env.NEGATIVE_INTENT,
     helpIntent: process.env.HELP_INTENT,
+    minButtonToolTipContent: process.env.MIN_BUTTON_TOOLTIP_CONTENT,
     enableLogin: (process.env.ENABLE_LOGIN === undefined) ? undefined : (process.env.ENABLE_LOGIN === 'true') ? true : false,
     AllowSuperDangerousHTMLInMessage: (process.env.ENABLE_MARKDOWN_SUPPORT === undefined) ? undefined : (process.env.ENABLE_MARKDOWN_SUPPORT === 'true') ? true : false,
     shouldDisplayResponseCardTitle: (process.env.SHOW_RESPONSE_CARD_TITLE === undefined) ? undefined : (process.env.SHOW_RESPONSE_CARD_TITLE === 'true') ? true : false,

dist/custom-chatbot-style.css

@@ -8,8 +8,8 @@
 .toolbar__title {
   font-family:"Sans-serif" !important;
   font-size: 1.875em !important;
-  color: #ffffff !important;

-}

+  color: #ffffff !important;
+}
 
 .message-list-container {
   background-color: #dcdbdc !important
@@ -74,4 +74,8 @@
 }
 
 
+button.min-button {
+    background-color: blue !important;
+    border-color: blue !important;
+}
 */