From dc21f9f8d6050fb7d5b3a0f41549e33ec0036611 Mon Sep 17 00:00:00 2001 From: bobpskier Date: Wed, 12 Feb 2025 07:35:59 -0700 Subject: [PATCH 1/9] Accessibility updates --- .../src/components/ToolbarContainer.vue | 31 +++++++++++-------- 1 file changed, 18 insertions(+), 13 deletions(-) diff --git a/lex-web-ui/src/components/ToolbarContainer.vue b/lex-web-ui/src/components/ToolbarContainer.vue index f09b62ff..67b6f3f0 100644 --- a/lex-web-ui/src/components/ToolbarContainer.vue +++ b/lex-web-ui/src/components/ToolbarContainer.vue @@ -31,7 +31,7 @@ > - + @@ -86,15 +86,10 @@ {{ toolbarEndLiveChatLabel }} - - - - {{ locale }} - - + + + {{ locale }} + @@ -129,7 +124,7 @@ v-show="!isUiMinimized" >

{{ toolbarTitle }} {{ userName }}

- + {{currentLocale}} + From ee55972072ee1b9e1c529a4118db0668a281645a Mon Sep 17 00:00:00 2001 From: Austin Johnson Date: Wed, 21 May 2025 14:59:26 -0400 Subject: [PATCH 2/9] Fix redaction so it applies to the correct message --- README.md | 34 +-------------------------------- lex-web-ui/src/store/getters.js | 14 ++++++-------- 2 files changed, 7 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index aed9f321..0f8eac31 100755 --- a/README.md +++ b/README.md @@ -74,7 +74,7 @@ of the various methods: | --- | --- | --- | --- | | 1 | [CloudFormation Deployment](#cloudformation-deployment) using the CloudFormation [templates](templates) provided by this project | Fully automated deployment of a hosted web application to an S3 bucket with an optional CI/CD pipeline. By default, it also creates a Cognito Identity Pool and a sample Lex bot | Use when you want to have a infrastructure as code approach that automatically builds and configures the chatbot UI resources | | 2 | Use the pre-built [libraries](#libraries) from the [dist](dist) directory of this repo | We provide a pre-built version of the chatbot UI component and a loader library that you can use on your web site as a [stand alone page](#stand-alone-page) or as an embeddable [iframe](#iframe) | Use when you have an existing site and want to add the chatbot UI to it by simply copying or referencing the library files | -| 3 | Use npm to install and use the chatbot UI as a Vue component | Enables developers to consume this project as an [npm](https://www.npmjs.com/) package that provides a [Vue](https://vuejs.org/) component. See the [Npm Install and Vue Component Use](#npm-install-and-vue-component-use) section for details | Use when developing front-end based web applications built using JavaScript and bundled with tools such as [webpack](https://webpack.github.io) | + See the [Usage](#usage) and [Deployment](#deployment) sections below for details. @@ -395,38 +395,6 @@ see the source of the [parent.html](src/website/parent.html) page and the [Iframe Embedding](src/README.md#iframe-embedding) documentation of the loader library. -### Npm Install and Vue Component Use -You can use the [npm](https://docs.npmjs.com/) package manager to -install this project. The npm installation provides a library that you -can import as a module into your JavaScript code. The component is built -as a reusable [Vue](https://vuejs.org/) plugin. This approach is geared -to be used in a [webpack](https://webpack.github.io) based project. - -Package installation using `npm`: - -```shell -# install npm package from github repo -npm install --save awslabs/aws-lex-web-ui -# you may need to install co-dependencies: -npm install --save vue vuex vuetify material-design-icons roboto-fontface -``` - -This is a quick example showing how to import the library in your project: - -```JavaScript -// assumes that a bundler like webpack will handle import/require -// using es6 module -import LexWebUi from 'aws-lex-web-ui'; -// or using require -var LexWebUi = require('aws-lex-web-ui'); -// import the debug non-minimized version -import LexWebUi from 'aws-lex-web-ui/dist/lex-web-ui'; -``` - -The source of the chatbot UI component resides under the -[lex-web-ui](lex-web-ui) directory. For further details about the chatbot -UI component see its [README](lex-web-ui/README.md) file. - ### Sample Site This repository provides a sample site that you can use as a base for development. The site is a couple of HTML pages can be found diff --git a/lex-web-ui/src/store/getters.js b/lex-web-ui/src/store/getters.js index 3eaaaf53..20b77277 100644 --- a/lex-web-ui/src/store/getters.js +++ b/lex-web-ui/src/store/getters.js @@ -72,9 +72,15 @@ export default { const regex = redactionEnabled ? new RegExp(`${state.config.connect.transcriptRedactRegex}`, "g") : undefined; state.messages.forEach((message) => { var nextMessage = message.date.toLocaleTimeString() + ' ' + (message.type === 'bot' ? 'Bot' : 'Human') + ': ' + message.text + '\n'; + + if (redactionEnabled && regex) { + shouldRedactNextMessage = regex.test(nextMessage); + } + if (redactionEnabled && shouldRedactNextMessage) { nextMessage = message.date.toLocaleTimeString() + ' ' + (message.type === 'bot' ? 'Bot' : 'Human') + ': ' + '###' + '\n'; } + if((text + nextMessage).length > 400) { messageTextArray.push(text); //this is over 1k chars by itself, so we must break it up. @@ -83,15 +89,7 @@ export default { messageTextArray.push(subMsg); }); text = ""; - if (redactionEnabled && regex) { - shouldRedactNextMessage = regex.test(nextMessage); - } nextMessage = ""; - } else { - if (redactionEnabled && regex) { - // if we are redacting, check if the next message should be redacted - shouldRedactNextMessage = regex.test(nextMessage); - } } text = text + nextMessage; }); From 4154310ab0b12aebe07877a3e1a74a58f450391f Mon Sep 17 00:00:00 2001 From: bobpskier Date: Wed, 28 May 2025 13:23:49 -0600 Subject: [PATCH 3/9] index.html Page does not have a language set. Set lang to "en". User cannot pinch zoom on the screen. Remove user-scalable="no". InputContainer.vue User input label disappears when the user types. Remove "single-line" from Audio play buttons are unlabeled. Add aria-label "Use Voice" Message.vue Audio play buttons are unlabeled. Add aria-label "replay request" Message date should not be aria-hidden. Remove aria-hidden. MessageText.vue Live agent messages are misidentified for screen reader users. During connect live chat, the "bot says:" message should be "agent says:" to indicate the agent provided the text. RecorderStatus.vue The record-status message should use the attribute aria-live="polite" ToolbarContainer.vue The toolbar has an aria-label that incorrectly labels the toolbar. Remove aria-label from the element getters.js Revise how connect transcript is redacted. --- lex-web-ui/public/index.html | 4 +- lex-web-ui/src/components/InputContainer.vue | 10 +++-- lex-web-ui/src/components/Message.vue | 22 +++++----- lex-web-ui/src/components/MessageText.vue | 11 ++++- lex-web-ui/src/components/RecorderStatus.vue | 2 +- .../src/components/ToolbarContainer.vue | 41 +++++++++---------- lex-web-ui/src/store/getters.js | 19 ++++++--- 7 files changed, 64 insertions(+), 45 deletions(-) diff --git a/lex-web-ui/public/index.html b/lex-web-ui/public/index.html index ff1b8a53..8757457e 100644 --- a/lex-web-ui/public/index.html +++ b/lex-web-ui/public/index.html @@ -1,8 +1,8 @@ - + - + <%= htmlWebpackPlugin.options.title %> diff --git a/lex-web-ui/src/components/InputContainer.vue b/lex-web-ui/src/components/InputContainer.vue index 978651ce..1dc01ec4 100644 --- a/lex-web-ui/src/components/InputContainer.vue +++ b/lex-web-ui/src/components/InputContainer.vue @@ -18,7 +18,6 @@ ref="textInput" id="text-input" name="text-input" - single-line hide-details density="compact" variant="underlined" @@ -52,6 +51,9 @@ :disabled="isMicButtonDisabled" ref="mic" class="icon-color input-button" + aria-label="Use Voice" + :aria-disabled="isMicButtonDisabled" + :aria-describedby="isMicButtonDisabled ? 'input-button-tooltip' : ''" icon > @@ -162,7 +164,7 @@ export default { return 'stop'; } return 'mic'; - }, + }, inputButtonTooltip() { if (this.shouldShowSendButton) { return 'send'; @@ -268,9 +270,9 @@ export default { if(this.$store.state.config.lex.allowStreamingResponses){ // Replace with an HTTP endpoint for the fullfilment Lambda const streamingEndpoint = this.$store.state.config.lex.streamingWebSocketEndpoint.replace('wss://', 'https://'); - this.$store.dispatch('setSessionAttribute', + this.$store.dispatch('setSessionAttribute', { key: 'streamingEndpoint', value: streamingEndpoint }); - this.$store.dispatch('setSessionAttribute', + this.$store.dispatch('setSessionAttribute', { key: 'streamingDynamoDbTable', value: this.$store.state.config.lex.streamingDynamoDbTable }); } diff --git a/lex-web-ui/src/components/Message.vue b/lex-web-ui/src/components/Message.vue index ef01d555..405bee05 100644 --- a/lex-web-ui/src/components/Message.vue +++ b/lex-web-ui/src/components/Message.vue @@ -28,7 +28,7 @@ + >
@@ -39,8 +39,8 @@
- @@ -64,8 +64,8 @@ - @@ -107,7 +107,7 @@
+ >
play_circle_outline @@ -192,7 +193,7 @@ - + play_circle_outline @@ -204,7 +205,6 @@ @@ -217,7 +217,7 @@ :key="index" /> - - + @@ -394,7 +394,7 @@ export default { quickReplyResponseCard() { if (this.interactiveMessage?.templateType == 'QuickReply') { //Create a response card format so we can leverage existing ResponseCard display template - var responseCard = { + var responseCard = { buttons: [] }; this.interactiveMessage.data.content.elements.forEach(function (button, index) { diff --git a/lex-web-ui/src/components/MessageText.vue b/lex-web-ui/src/components/MessageText.vue index 6ccf4e6c..89c0a4be 100644 --- a/lex-web-ui/src/components/MessageText.vue +++ b/lex-web-ui/src/components/MessageText.vue @@ -36,6 +36,7 @@ or in the "license" file accompanying this file. This file is distributed on an BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, express or implied. See the License for the specific language governing permissions and limitations under the License. */ +import { chatMode } from '@/store/state'; const marked = require('marked'); const renderer = {}; renderer.link = function link(href, title, text) { @@ -140,8 +141,16 @@ export default { doc.innerHTML = messageText; return doc.textContent || doc.innerText || ''; }, + isLiveChat() { + return (this.$store.state.config.ui.enableLiveChat && + this.$store.state.chatMode === chatMode.LIVECHAT); + }, prependBotScreenReader(messageText) { - return `bot says: ${messageText}`; + if (this.isLiveChat()) { + return `agent says: ${messageText}`; + } else { + return `bot says: ${messageText}`; + } }, }, }; diff --git a/lex-web-ui/src/components/RecorderStatus.vue b/lex-web-ui/src/components/RecorderStatus.vue index 72fa6a02..de4b04c4 100644 --- a/lex-web-ui/src/components/RecorderStatus.vue +++ b/lex-web-ui/src/components/RecorderStatus.vue @@ -1,6 +1,6 @@