Skip to content

Commit 2924010

Browse files
dobrinyonkovdobrinyonkov
authored
fix(ui5-li): add "Selected" text to item's accessible name (#3853)
1 parent e3134ee commit 2924010

File tree

4 files changed

+33
-12
lines changed

4 files changed

+33
-12
lines changed

‎packages/fiori/test/specs/ViewSettingsDialog.spec.js

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ describe("ViewSettingsDialog general interaction", () => {
1111
const viewSettingsDialog = browser.$("#vsd");
1212
btnOpenDialog.click();
1313

14-
assert.strictEqual(viewSettingsDialog.shadow$("ui5-list").$("ui5-li[selected]").getText(), "Ascending", "initially sortOrder has correct value");
14+
assert.ok(viewSettingsDialog.shadow$("ui5-list").$("ui5-li[selected]").getText().includes("Ascending"), "initially sortOrder has correct value");
1515
assert.notOk(viewSettingsDialog.$("ui5-li[selected]").isExisting(), "initially sortBy should not have an option selected");
1616

1717
browser.keys("Escape");
@@ -28,7 +28,7 @@ describe("ViewSettingsDialog general interaction", () => {
2828

2929
btnOpenDialog.click();
3030

31-
assert.strictEqual(viewSettingsDialog.shadow$("ui5-list").$("ui5-li[selected]").getText(), "Descending", "SortOrder should properly change value");
31+
assert.ok(viewSettingsDialog.shadow$("ui5-list").$("ui5-li[selected]").getText().includes("Descending"), "SortOrder should properly change value");
3232

3333
browser.keys("Escape");
3434
});
@@ -45,7 +45,7 @@ describe("ViewSettingsDialog general interaction", () => {
4545

4646
btnOpenDialog.click();
4747

48-
assert.strictEqual(viewSettingsDialog.$("ui5-li[selected]").getText(), "Name", "sortBy should have an option selected");
48+
assert.ok(viewSettingsDialog.$("ui5-li[selected]").getText().includes("Name"), "sortBy should have an option selected");
4949

5050
browser.keys("Escape");
5151
});
@@ -55,13 +55,13 @@ describe("ViewSettingsDialog general interaction", () => {
5555
const viewSettingsDialog = browser.$("#vsd");
5656
btnOpenDialog.click();
5757

58-
assert.strictEqual(viewSettingsDialog.$("ui5-li[selected]").getText(), "Name", "sortBy should have an option selected");
58+
assert.ok(viewSettingsDialog.$("ui5-li[selected]").getText().includes("Name"), "sortBy should have an option selected");
5959

6060
viewSettingsDialog.$$("ui5-li")[1].click();
6161
viewSettingsDialog.shadow$("ui5-dialog").$(".ui5-vsd-footer").$("ui5-button").click();
6262
btnOpenDialog.click();
6363

64-
assert.strictEqual(viewSettingsDialog.$("ui5-li[selected]").getText(), "Position", "sortBy should change selected option");
64+
assert.ok(viewSettingsDialog.$("ui5-li[selected]").getText().includes("Position"), "sortBy should change selected option");
6565

6666
browser.keys("Escape");
6767
})
@@ -71,17 +71,17 @@ describe("ViewSettingsDialog general interaction", () => {
7171
const viewSettingsDialog = browser.$("#vsd");
7272
btnOpenDialog.click();
7373

74-
assert.strictEqual(viewSettingsDialog.$("ui5-li[selected]").getText(),"Position", "sortBy should have an option selected");
75-
assert.strictEqual(viewSettingsDialog.shadow$("ui5-list").$("ui5-li[selected]").getText(), "Descending", "sortOrder should have correct option selected");
74+
assert.ok(viewSettingsDialog.$("ui5-li[selected]").getText().includes("Position"), "sortBy should have an option selected");
75+
assert.ok(viewSettingsDialog.shadow$("ui5-list").$("ui5-li[selected]").getText().includes("Descending"), "sortOrder should have correct option selected");
7676

7777
viewSettingsDialog.shadow$("ui5-list").$$("ui5-li")[0].click();
7878
viewSettingsDialog.$$("ui5-li")[0].click();
7979

8080
viewSettingsDialog.shadow$("ui5-dialog").$(".ui5-vsd-footer").$$("ui5-button")[1].click();
8181
btnOpenDialog.click();
8282

83-
assert.strictEqual(viewSettingsDialog.$("ui5-li[selected]").getText(),"Position", "sortBy should not have a change in the selected option");
84-
assert.strictEqual(viewSettingsDialog.shadow$("ui5-list").$("ui5-li[selected]").getText(), "Descending", "sortOrder should not have a change in the selected option");
83+
assert.ok(viewSettingsDialog.$("ui5-li[selected]").getText().includes("Position"), "sortBy should not have a change in the selected option");
84+
assert.ok(viewSettingsDialog.shadow$("ui5-list").$("ui5-li[selected]").getText().includes("Descending"), "sortOrder should not have a change in the selected option");
8585

8686
browser.keys("Escape");
8787
})
@@ -93,7 +93,7 @@ describe("ViewSettingsDialog general interaction", () => {
9393

9494
viewSettingsDialog.shadow$("ui5-dialog").$(".ui5-vsd-header").$("ui5-button").click();
9595

96-
assert.strictEqual(viewSettingsDialog.shadow$("ui5-list").$("ui5-li[selected]").getText(), "Ascending", "sortOrder has returned to the initial state");
96+
assert.ok(viewSettingsDialog.shadow$("ui5-list").$("ui5-li[selected]").getText().includes("Ascending"), "sortOrder has returned to the initial state");
9797
assert.notOk(viewSettingsDialog.$("ui5-li[selected]").isExisting(), "sortBy has returned to the initial state");
9898

9999
viewSettingsDialog.shadow$("ui5-dialog").$(".ui5-vsd-footer").$$("ui5-button")[1].click();

‎packages/main/src/ListItem.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,12 @@ import ListItemBase from "./ListItemBase.js";
88
import RadioButton from "./RadioButton.js";
99
import CheckBox from "./CheckBox.js";
1010
import Button from "./Button.js";
11-
import { DELETE, ARIA_LABEL_LIST_ITEM_CHECKBOX, ARIA_LABEL_LIST_ITEM_RADIO_BUTTON } from "./generated/i18n/i18n-defaults.js";
11+
import {
12+
DELETE,
13+
ARIA_LABEL_LIST_ITEM_CHECKBOX,
14+
ARIA_LABEL_LIST_ITEM_RADIO_BUTTON,
15+
LIST_ITEM_SELECTED,
16+
} from "./generated/i18n/i18n-defaults.js";
1217

1318
// Styles
1419
import styles from "./generated/themes/ListItem.css.js";
@@ -341,7 +346,7 @@ class ListItem extends ListItemBase {
341346
ariaLevel: undefined,
342347
ariaLabel: this.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX),
343348
ariaLabelRadioButton: this.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_RADIO_BUTTON),
344-
listItemAriaLabel: undefined,
349+
listItemAriaLabel: this.ariaSelected ? this.i18nBundle.getText(LIST_ITEM_SELECTED) : undefined,
345350
};
346351
}
347352

‎packages/main/test/pages/List_test_page.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,11 @@
6060
<ui5-input id="selectionChangeResultField" placeholder="selectionChange result"></ui5-input>
6161
<ui5-input id="selectionChangeResultPreviousItemsParameter" placeholder="selectionChange previousSelection result"></ui5-input>
6262

63+
<br><br><br>
64+
<ui5-list id="listSelectedItem" mode="MultiSelect">
65+
<ui5-li id="not-selected-country">Argentina</ui5-li>
66+
<ui5-li id="selected-country" selected >Bulgaria</ui5-li>
67+
</ui5-list>
6368
<br><br><br>
6469
<ui5-list id="listEvents2" mode="MultiSelect">
6570
<ui5-li id="country11">Argentina</ui5-li>

‎packages/main/test/specs/List.spec.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -377,4 +377,15 @@ describe("List Tests", () => {
377377

378378
assert.strictEqual(nextInteractiveElement.isFocused(), true, "Focus is moved to next interactive element.");
379379
});
380+
381+
it('should include selected state text in accInfo', () => {
382+
const notSelectedItem = $("#listSelectedItem #not-selected-country");
383+
const selectedItem = $("#listSelectedItem #selected-country");
384+
385+
let accInfo = notSelectedItem.getProperty("_accInfo")
386+
assert.strictEqual(accInfo.listItemAriaLabel, null, "Item label is empty");
387+
388+
accInfo = selectedItem.getProperty("_accInfo");
389+
assert.strictEqual(accInfo.listItemAriaLabel, "Selected", "Selected text is part of the label");
390+
});
380391
});

0 commit comments

Comments
 (0)