Skip to content

Commit fa77780

Browse files
compulimcompulim
authored
Modify localization strings for carousel flippers (#4646)
* Change left/right to next/previous * Rename loc string ID and add tests * Fix tests
1 parent 30b6b3c commit fa77780

12 files changed

+163
-18
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
2626

2727
- Resolved [#4643](https://github.com/microsoft/BotFramework-WebChat/issues/4643). Decoupling `botframework-directlinejs` from business logic of Web Chat for better tree-shaking, by [@compulim](https://github.com/compulim), in PR [#4645](https://github.com/microsoft/BotFramework-WebChat/pull/4645)
2828

29+
### Fixed
30+
31+
- Fixes [#4557](https://github.com/microsoft/BotFramework-WebChat/issues/4557). Flipper buttons in carousels and suggested actions is now renamed to "next/previous" from "left/right", by [@compulim](https://github.com/compulim), in PR [#4646](https://github.com/microsoft/BotFramework-WebChat/pull/4646)
32+
2933
## [4.15.7] - 2023-02-15
3034

3135
### Added

‎__tests__/carousel.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ describe('carousel without avatar initials', () => {
2323

2424
expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
2525

26-
const rightFlipper = await driver.findElement(By.css('button[aria-label="Right"]'));
26+
const rightFlipper = await driver.findElement(By.css('button[aria-label="Next"]'));
2727

2828
await rightFlipper.click();
2929
await rightFlipper.click();
@@ -46,7 +46,7 @@ describe('carousel without avatar initials', () => {
4646

4747
expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
4848

49-
const rightFlipper = await driver.findElement(By.css('button[aria-label="Right"]'));
49+
const rightFlipper = await driver.findElement(By.css('button[aria-label="Next"]'));
5050

5151
await rightFlipper.click();
5252
await rightFlipper.click();
@@ -121,7 +121,7 @@ describe('carousel with avatar initials', () => {
121121

122122
expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
123123

124-
const rightFlipper = await driver.findElement(By.css('button[aria-label="Right"]'));
124+
const rightFlipper = await driver.findElement(By.css('button[aria-label="Next"]'));
125125

126126
await rightFlipper.click();
127127
await rightFlipper.click();
@@ -144,7 +144,7 @@ describe('carousel with avatar initials', () => {
144144

145145
expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
146146

147-
const rightFlipper = await driver.findElement(By.css('button[aria-label="Right"]'));
147+
const rightFlipper = await driver.findElement(By.css('button[aria-label="Next"]'));
148148

149149
await rightFlipper.click();
150150
await rightFlipper.click();

‎__tests__/html/carousel.flipperButton.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
expect(carouselFilmstrip.scrollLeft).toBe(0);
3030

3131
// WHEN: Right flipper is clicked.
32-
const rightFlipper = carouselLayout.querySelector('[aria-label="Right"]');
32+
const rightFlipper = carouselLayout.querySelector('[aria-label="Next"]');
3333

3434
// Improve test reliability by hover before click on flipper button.
3535
await host.hover(rightFlipper);
@@ -43,7 +43,7 @@
4343
await host.snapshot();
4444

4545
// WHEN: Left flipper is clicked.
46-
const leftFlipper = carouselLayout.querySelector('[aria-label="Left"]');
46+
const leftFlipper = carouselLayout.querySelector('[aria-label="Previous"]');
4747

4848
// Improve test reliability by hover before click on flipper button.
4949
await host.hover(leftFlipper);

‎__tests__/html/carousel.flipperButton.rtl.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@
2929

3030
expect(carouselFilmstrip.scrollLeft).toBe(0);
3131

32-
// WHEN: Left flipper is clicked.
33-
const leftFlipper = carouselLayout.querySelector('[aria-label="Left"]');
32+
// WHEN: Left flipper is clicked. In RTL, the left flipper goes next.
33+
const leftFlipper = carouselLayout.querySelector('[aria-label="Next"]');
3434

3535
// Improve test reliability by hover before click on flipper button.
3636
await host.hover(leftFlipper);
@@ -43,8 +43,8 @@
4343
await testHelpers.sleep(500); // Wait both flippers to fade in.
4444
await host.snapshot();
4545

46-
// WHEN: Right flipper is clicked.
47-
const rightFlipper = carouselLayout.querySelector('[aria-label="Right"]');
46+
// WHEN: Right flipper is clicked. In RTL, the right flipper goes back.
47+
const rightFlipper = carouselLayout.querySelector('[aria-label="Previous"]');
4848

4949
// Improve test reliability by hover before click on flipper button.
5050
await host.hover(rightFlipper);

‎__tests__/html/suggestedActions.scroll.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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+
WebChat.renderWebChat(
14+
{
15+
directLine: WebChat.createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() }),
16+
store: testHelpers.createStore()
17+
},
18+
document.getElementById('webchat')
19+
);
20+
21+
await pageConditions.uiConnected();
22+
23+
// GIVEN: Show the suggested actions.
24+
await pageObjects.sendMessageViaSendBox('suggested-actions');
25+
await pageConditions.numActivitiesShown(2);
26+
27+
// WHEN: The right flipper button is clicked.
28+
document.querySelector('[aria-label="Suggested actions"] [aria-label="right"]').click();
29+
30+
// TODO: This will be updated from "left/right" to "next/previous" when the carousel support customizing the aria-label. Commented out for now.
31+
// document.querySelector('[aria-label="Suggested actions"] [aria-label="next"]').click();
32+
33+
// THEN: It should scroll to the right.
34+
await pageConditions.became(
35+
'suggested actions scrolled to the right',
36+
() => document.querySelector('.react-film__filmstrip').scrollLeft > 0,
37+
1000
38+
);
39+
40+
// WHEN: The left flipper button is clicked.
41+
document.querySelector('[aria-label="Suggested actions"] [aria-label="left"]').click();
42+
43+
// TODO: This will be updated from "left/right" to "next/previous" when the carousel support customizing the aria-label. Commented out for now.
44+
// document.querySelector('[aria-label="Suggested actions"] [aria-label="previous"]').click();
45+
46+
// THEN: It should scroll back to the origin.
47+
await pageConditions.became(
48+
'suggested actions scrolled back to the origin',
49+
() => document.querySelector('.react-film__filmstrip').scrollLeft === 0,
50+
1000
51+
);
52+
});
53+
</script>
54+
</body>
55+
</html>

‎__tests__/html/suggestedActions.scroll.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
2+
3+
describe('suggested actions', () => {
4+
test('should scroll when flipper buttons are clicked', () => runHTML('suggestedActions.scroll.html'));
5+
});

‎__tests__/html/suggestedActions.scroll.rtl.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+
WebChat.renderWebChat(
14+
{
15+
dir: 'rtl',
16+
directLine: WebChat.createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() }),
17+
store: testHelpers.createStore()
18+
},
19+
document.getElementById('webchat')
20+
);
21+
22+
await pageConditions.uiConnected();
23+
24+
// GIVEN: Show the suggested actions.
25+
await pageObjects.sendMessageViaSendBox('suggested-actions');
26+
await pageConditions.numActivitiesShown(2);
27+
28+
// WHEN: The right flipper button is clicked.
29+
document.querySelector('[aria-label="Suggested actions"] [aria-label="left"]').click();
30+
31+
// TODO: This will be updated from "left/right" to "next/previous" when the carousel support customizing the aria-label. Commented out for now.
32+
// document.querySelector('[aria-label="Suggested actions"] [aria-label="next"]').click();
33+
34+
// THEN: It should scroll to the right.
35+
await pageConditions.became(
36+
'suggested actions scrolled to the left',
37+
() => document.querySelector('.react-film__filmstrip').scrollLeft < 0,
38+
1000
39+
);
40+
41+
// WHEN: The left flipper button is clicked.
42+
document.querySelector('[aria-label="Suggested actions"] [aria-label="right"]').click();
43+
44+
// TODO: This will be updated from "left/right" to "next/previous" when the carousel support customizing the aria-label. Commented out for now.
45+
// document.querySelector('[aria-label="Suggested actions"] [aria-label="previous"]').click();
46+
47+
// THEN: It should scroll back to the origin.
48+
await pageConditions.became(
49+
'suggested actions scrolled back to the origin',
50+
() => document.querySelector('.react-film__filmstrip').scrollLeft === 0,
51+
1000
52+
);
53+
});
54+
</script>
55+
</body>
56+
</html>

‎__tests__/html/suggestedActions.scroll.rtl.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('In RTL', () =>
4+
describe('suggested actions', () => {
5+
test('should scroll when flipper buttons are clicked', () => runHTML('suggestedActions.scroll.rtl.html'));
6+
}));

‎packages/api/src/localization/en-US.json

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,10 @@
5252
"ATTACHMENT_TEXT": "A text: $1",
5353
"_ATTACHMENT_TEXT.comment": "$1 is the content.",
5454
"ATTACHMENT_VIDEO": "A video clip",
55-
"CAROUSEL_FLIPPER_LEFT_ALT": "Left",
56-
"_CAROUSEL_FLIPPER_LEFT_ALT.comment": "This is for screen reader for the label of the left flipper button for carousels.",
57-
"CAROUSEL_FLIPPER_RIGHT_ALT": "Right",
58-
"_CAROUSEL_FLIPPER_RIGHT_ALT.comment": "This is for screen reader for the label of the right flipper button for carousels.",
55+
"CAROUSEL_FLIPPER_NEXT_ALT": "Next",
56+
"_CAROUSEL_FLIPPER_NEXT_ALT.comment": "This is for screen reader for the label of the right flipper button for carousels for left-to-right language or left flipper button for right-to-left (RTL) languages. To support RTL, the language used in this text should be less directional.",
57+
"CAROUSEL_FLIPPER_PREVIOUS_ALT": "Previous",
58+
"_CAROUSEL_FLIPPER_PREVIOUS_ALT.comment": "This is for screen reader for the label of the left flipper button for carousels for left-to-right language or right flipper button for right-to-left (RTL) languages. To support RTL, the language used in this text should be less directional.",
5959
"CONNECTIVITY_STATUS_ALT_CONNECTED": "Connected",
6060
"CONNECTIVITY_STATUS_ALT_CONNECTING": "Connecting…",
6161
"CONNECTIVITY_STATUS_ALT_FATAL": "Unable to connect.",
@@ -99,6 +99,10 @@
9999
"SPEECH_INPUT_MICROPHONE_BUTTON_OPEN_ALT": "Microphone on",
100100
"_SPEECH_INPUT_MICROPHONE_BUTTON_OPEN_ALT.comment": "This is for screen reader and is the label of the microphone button, when clicked, will open microphone.",
101101
"SPEECH_INPUT_STARTING": "Starting…",
102+
"SUGGESTED_ACTIONS_FLIPPER_NEXT_ALT": "Next",
103+
"_SUGGESTED_ACTIONS_FLIPPER_NEXT_ALT.comment": "This is for screen reader for the label of the right flipper button for suggested actions. Probably can re-use the value from CAROUSEL_FLIPPER_NEXT_ALT.",
104+
"SUGGESTED_ACTIONS_FLIPPER_PREVIOUS_ALT": "Previous",
105+
"_SUGGESTED_ACTIONS_FLIPPER_PREVIOUS_ALT.comment": "This is for screen reader for the label of the left flipper button for suggested actions. Probably can re-use the value from CAROUSEL_FLIPPER_PREVIOUS_ALT.",
102106
"SUGGESTED_ACTIONS_LABEL_ALT": "Suggested actions",
103107
"_SUGGESTED_ACTIONS_LABEL_ALT.comment": "This is for screen reader. Browser will read as \"Suggested actions toolbar\", where \"toolbar\" is a role name appended by browser.",
104108
"TEXT_INPUT_ALT": "Message input box",

‎packages/api/src/localization/yue.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@
3232
"ATTACHMENT_IMAGE": "一幅圖",
3333
"ATTACHMENT_TEXT": "一段文字：$1",
3434
"ATTACHMENT_VIDEO": "一段錄像",
35-
"CAROUSEL_FLIPPER_LEFT_ALT": "左",
36-
"CAROUSEL_FLIPPER_RIGHT_ALT": "右",
35+
"CAROUSEL_FLIPPER_NEXT_ALT": "後",
36+
"CAROUSEL_FLIPPER_PREVIOUS_ALT": "前",
3737
"CONNECTIVITY_STATUS_ALT_CONNECTED": "接駁到",
3838
"CONNECTIVITY_STATUS_ALT_CONNECTING": "接駁緊…",
3939
"CONNECTIVITY_STATUS_ALT_FATAL": "接駁唔倒。",
@@ -70,6 +70,8 @@
7070
"SPEECH_INPUT_MICROPHONE_BUTTON_CLOSE_ALT": "閂咪",
7171
"SPEECH_INPUT_MICROPHONE_BUTTON_OPEN_ALT": "開咪",
7272
"SPEECH_INPUT_STARTING": "開始緊…",
73+
"SUGGESTED_ACTIONS_FLIPPER_NEXT_ALT": "後",
74+
"SUGGESTED_ACTIONS_FLIPPER_PREVIOUS_ALT": "前",
7375
"SUGGESTED_ACTIONS_LABEL_ALT": "建議㩒嘅掣",
7476
"TEXT_INPUT_ALT": "訊息輸入盒",
7577
"TEXT_INPUT_PLACEHOLDER": "輸入你嘅訊息",

0 commit comments

Comments
 (0)