Skip to content

Commit f856b83

Browse files
compulimbeyackle2
compulim
and
beyackle2
authored
Screen reader should read alert when sending empty message or offline (#4637)
* Alert when sending empty message * Add offline error * Fix tests * Cosmetics * Apply suggestions from code review Co-authored-by: Benjamin Yackley <[email protected]> --------- Co-authored-by: Benjamin Yackley <[email protected]>
1 parent 041a6dd commit f856b83

28 files changed

+575
-159
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
2525
### Added
2626

2727
- Added function to emit status change telemetry event for activities, by [@Erli-ms](https://github.com/Erli-ms), in PR [#4631](https://github.com/microsoft/BotFramework-WebChat/pull/4631)
28-
2928
- Added ability for developers to customize Web Chat by extending the default UI without having to re-implement existing components, by [@dawolff-ms](https://github.com/dawolff-ms), in PR [#4539](https://github.com/microsoft/BotFramework-WebChat/pull/4539)
3029

3130
### Fixed
@@ -34,6 +33,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
3433
- Fixes [#4566](https://github.com/microsoft/BotFramework-WebChat/issues/4566). For YouTube and Vimeo `<iframe>`, add `sandbox="allow-same-origin allow-scripts"`, by [@compulim](https://github.com/compulim) in PR [#4567](https://github.com/microsoft/BotFramework-WebChat/pull/4567)
3534
- Fixes [#4561](https://github.com/microsoft/BotFramework-WebChat/issues/4561). Header title of keyboard help dialog should be the `aria-labelledby` of the dialog and close button should be the first element of the header, by [@compulim](https://github.com/compulim) in PR [#4609](https://github.com/microsoft/BotFramework-WebChat/pull/4609)
3635
- Fixes [#4559](https://github.com/microsoft/BotFramework-WebChat/issues/4559). Keyboard help screen should be scrollable and its close button should appear correctly in light-themed high contrast mode, by [@compulim](https://github.com/compulim) in PR [#4619](https://github.com/microsoft/BotFramework-WebChat/pull/4619)
36+
- Fixes [#4623](https://github.com/microsoft/BotFramework-WebChat/issues/4623). Screen reader should read error when failed to send an empty message or offline, by [@compulim](https://github.com/compulim) in PR [#4637](https://github.com/microsoft/BotFramework-WebChat/pull/4637)
3737

3838
### Changed
3939

‎__tests__/html/accessibility.sendBox.alertEmptyMessage.multilineTextBox.enter.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
5+
<script crossorigin="anonymous" src="/test-harness.js"></script>
6+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
7+
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
8+
</head>
9+
<body>
10+
<div id="webchat"></div>
11+
<script>
12+
run(async function () {
13+
const clock = lolex.install();
14+
15+
const store = testHelpers.createStore();
16+
17+
const directLine = testHelpers.createDirectLineEmulator(store);
18+
19+
// GIVEN: With a multiline text area.
20+
WebChat.renderWebChat(
21+
{
22+
directLine,
23+
store,
24+
styleOptions: {
25+
sendBoxTextWrap: true
26+
}
27+
},
28+
document.getElementById('webchat')
29+
);
30+
31+
await pageConditions.webChatRendered();
32+
33+
clock.tick(600);
34+
35+
await pageConditions.uiConnected();
36+
37+
const [errorMessage] = document.getElementsByClassName('webchat__submit-error-message');
38+
39+
// GIVEN: The send box is empty.
40+
await host.click(pageElements.sendBoxTextBox());
41+
await host.sendKeys('ENTER');
42+
43+
// THEN: The alert message should be empty.
44+
expect(errorMessage.innerText).toBe('');
45+
clock.tick(50);
46+
47+
// THEN: After 50 ms, the alert message should read "Cannot send empty message."
48+
expect(errorMessage.innerText).toBe('Cannot send empty message.');
49+
50+
// THEN: After 500 ms, the alert message should be empty.
51+
clock.tick(500);
52+
expect(errorMessage.innerText).toBe('');
53+
});
54+
</script>
55+
</body>
56+
</html>

‎__tests__/html/accessibility.sendBox.alertEmptyMessage.multilineTextBox.enter.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
2+
3+
describe('accessibility requirement', () => {
4+
describe('when pressing ENTER on an empty multiline send box', () =>
5+
test('should alert about empty message', () => runHTML('accessibility.sendBox.alertEmptyMessage.multilineTextBox.enter.html')));
6+
});

‎__tests__/html/accessibility.sendBox.alertEmptyMessage.sendButton.html

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
5+
<script crossorigin="anonymous" src="/test-harness.js"></script>
6+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
7+
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
8+
</head>
9+
<body>
10+
<div id="webchat"></div>
11+
<script>
12+
run(async function () {
13+
const clock = lolex.install();
14+
15+
const store = testHelpers.createStore();
16+
17+
const directLine = testHelpers.createDirectLineEmulator(store);
18+
19+
WebChat.renderWebChat(
20+
{
21+
directLine,
22+
store
23+
},
24+
document.getElementById('webchat')
25+
);
26+
27+
await pageConditions.webChatRendered();
28+
29+
clock.tick(600);
30+
31+
await pageConditions.uiConnected();
32+
33+
const [errorMessage] = document.getElementsByClassName('webchat__submit-error-message');
34+
35+
// GIVEN: The send box is empty.
36+
37+
// WHEN: Send button is clicked.
38+
await pageObjects.clickSendButton();
39+
40+
// THEN: The alert message should be empty.
41+
expect(errorMessage.innerText).toBe('');
42+
43+
// THEN: After 50 ms, the alert message should read "Cannot send empty message."
44+
clock.tick(50);
45+
expect(errorMessage.innerText).toBe('Cannot send empty message.');
46+
47+
// THEN: After 500 ms, the alert message should be empty.
48+
clock.tick(500);
49+
expect(errorMessage.innerText).toBe('');
50+
51+
// WHEN: Send button is clicked again.
52+
await pageObjects.clickSendButton();
53+
54+
// THEN: The alert message should be empty.
55+
expect(errorMessage.innerText).toBe('');
56+
57+
// THEN: After 50 ms, the alert message should read "Cannot send empty message."
58+
clock.tick(50);
59+
expect(errorMessage.innerText).toBe('Cannot send empty message.');
60+
61+
// THEN: After 500 ms, the alert message should be empty.
62+
clock.tick(500);
63+
expect(errorMessage.innerText).toBe('');
64+
});
65+
</script>
66+
</body>
67+
</html>

‎__tests__/html/accessibility.sendBox.alertEmptyMessage.sendButton.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
2+
3+
describe('accessibility requirement', () => {
4+
describe('when clicking on send box with an empty send box', () =>
5+
test('should alert about empty message', () => runHTML('accessibility.sendBox.alertEmptyMessage.sendButton.html')));
6+
});

‎__tests__/html/accessibility.sendBox.alertEmptyMessage.singleLineTextBox.enter.html

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
5+
<script crossorigin="anonymous" src="/test-harness.js"></script>
6+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
7+
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
8+
</head>
9+
<body>
10+
<div id="webchat"></div>
11+
<script>
12+
run(async function () {
13+
const clock = lolex.install();
14+
15+
const store = testHelpers.createStore();
16+
17+
const directLine = testHelpers.createDirectLineEmulator(store);
18+
19+
// GIVEN: With a single line text box.
20+
WebChat.renderWebChat(
21+
{
22+
directLine,
23+
store
24+
},
25+
document.getElementById('webchat')
26+
);
27+
28+
await pageConditions.webChatRendered();
29+
30+
clock.tick(600);
31+
32+
await pageConditions.uiConnected();
33+
34+
const [errorMessage] = document.getElementsByClassName('webchat__submit-error-message');
35+
36+
// GIVEN: The send box is empty.
37+
await host.click(pageElements.sendBoxTextBox());
38+
await host.sendKeys('ENTER');
39+
40+
// THEN: The alert message should be empty.
41+
expect(errorMessage.innerText).toBe('');
42+
43+
// THEN: After 50 ms, the alert message should read "Cannot send empty message."
44+
clock.tick(50);
45+
expect(errorMessage.innerText).toBe('Cannot send empty message.');
46+
47+
// THEN: After 500 ms, the alert message should be empty.
48+
clock.tick(500);
49+
expect(errorMessage.innerText).toBe('');
50+
});
51+
</script>
52+
</body>
53+
</html>

‎__tests__/html/accessibility.sendBox.alertEmptyMessage.singleLineTextBox.enter.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
2+
3+
describe('accessibility requirement', () => {
4+
describe('when pressing ENTER on an empty single line send box', () =>
5+
test('should alert about empty message', () => runHTML('accessibility.sendBox.alertEmptyMessage.singleLineTextBox.enter.html')));
6+
});

‎__tests__/html/accessibility.sendBox.alertOffline.sendButton.html

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
5+
<script crossorigin="anonymous" src="/test-harness.js"></script>
6+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
7+
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
8+
</head>
9+
<body>
10+
<div id="webchat"></div>
11+
<script>
12+
run(async function () {
13+
const clock = lolex.install();
14+
15+
const store = testHelpers.createStore();
16+
17+
const directLine = testHelpers.createDirectLineEmulator(store, { autoConnect: false });
18+
19+
WebChat.renderWebChat(
20+
{
21+
directLine,
22+
store
23+
},
24+
document.getElementById('webchat')
25+
);
26+
27+
await pageConditions.webChatRendered();
28+
29+
// GIVEN: Connection is still establishing.
30+
expect(pageElements.connectivityStatus().innerText).toBe('Connecting…');
31+
32+
const [errorMessage] = document.getElementsByClassName('webchat__submit-error-message');
33+
34+
// GIVEN: "Hello, World!" is in the send box.
35+
await pageObjects.typeInSendBox('Hello, World!');
36+
37+
// WHEN: Send button is clicked.
38+
await pageObjects.clickSendButton();
39+
40+
// THEN: The alert message should be empty.
41+
expect(errorMessage.innerText).toBe('');
42+
43+
// THEN: After 50 ms, the alert message should read "Unable to connect."
44+
clock.tick(50);
45+
expect(errorMessage.innerText).toBe('Unable to connect.');
46+
47+
// THEN: After 500 ms, the alert message should be empty.
48+
clock.tick(500);
49+
expect(errorMessage.innerText).toBe('');
50+
});
51+
</script>
52+
</body>
53+
</html>

‎__tests__/html/accessibility.sendBox.alertOffline.sendButton.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
2+
3+
describe('accessibility requirement', () => {
4+
describe('when clicking on send button while offline', () =>
5+
test('should alert about offline', () => runHTML('accessibility.sendBox.alertOffline.sendButton.html')));
6+
});

‎__tests__/html/useTextBoxSubmit.true.html

Lines changed: 0 additions & 46 deletions
This file was deleted.

0 commit comments

Comments
 (0)