diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts index 66b101f4f004..5cb94ca756a2 100644 --- a/packages/main/src/MultiComboBox.ts +++ b/packages/main/src/MultiComboBox.ts @@ -83,6 +83,7 @@ import { VALUE_STATE_TYPE_WARNING, INPUT_SUGGESTIONS_TITLE, SELECT_OPTIONS, + SHOW_SELECTED_BUTTON, MULTICOMBOBOX_DIALOG_OK_BUTTON, VALUE_STATE_ERROR_ALREADY_SELECTED, } from "./generated/i18n/i18n-defaults.js"; @@ -1712,6 +1713,10 @@ class MultiComboBox extends UI5Element { return MultiComboBox.i18nBundle.getText(SELECT_OPTIONS); } + get _showSelectedButtonAccessibleNameText() { + return MultiComboBox.i18nBundle.getText(SHOW_SELECTED_BUTTON); + } + get _dialogOkButton() { return MultiComboBox.i18nBundle.getText(MULTICOMBOBOX_DIALOG_OK_BUTTON); } diff --git a/packages/main/src/MultiComboBoxPopover.hbs b/packages/main/src/MultiComboBoxPopover.hbs index 927dfb37b45f..a957dfed2bc7 100644 --- a/packages/main/src/MultiComboBoxPopover.hbs +++ b/packages/main/src/MultiComboBoxPopover.hbs @@ -45,7 +45,8 @@ icon="multiselect-all" design="Transparent" ?pressed={{_showAllItemsButtonPressed}} - @click="{{filterSelectedItems}}"> + @click="{{filterSelectedItems}}" + accessible-name="{{_showSelectedButtonAccessibleNameText}}"> diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties index 08d4f3540f50..74555ec5c948 100644 --- a/packages/main/src/i18n/messagebundle.properties +++ b/packages/main/src/i18n/messagebundle.properties @@ -157,6 +157,9 @@ SELECT_ROLE_DESCRIPTION=Listbox #XTXT: MultiComboBox and ComboBox icon accessible name SELECT_OPTIONS=Select Options +#XTXT: MultiComboBox show selected items button accessible name +SHOW_SELECTED_BUTTON=Show Selected Items Only + #XBUT: A link that can be clicked to display more/all items INPUT_SUGGESTIONS=Suggestions available diff --git a/packages/main/test/specs/MultiComboBox.mobile.spec.js b/packages/main/test/specs/MultiComboBox.mobile.spec.js index 0ac635b7b6e0..dee0dc90dbe8 100644 --- a/packages/main/test/specs/MultiComboBox.mobile.spec.js +++ b/packages/main/test/specs/MultiComboBox.mobile.spec.js @@ -393,4 +393,32 @@ describe("Validation", () => { assert.strictEqual(await dialogInput.getValue(), "com", "Additional input was not allowed"); }); +}); + +describe("Accessibility", () => { + before(async () => { + await browser.url("test/pages/MultiComboBox.html"); + await browser.emulateDevice('iPhone X'); + }); + + it("Show selected toggle button should has accessibleName attribute", async () => { + const multiCombo = await browser.$("#multi1"); + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#multi1"); + let resourceBundleText = null; + + await multiCombo.scrollIntoView(); + await multiCombo.shadow$('input').click(); + + const toggleSelectedButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("ui5-toggle-button"); + + resourceBundleText = await browser.executeAsync(done => { + const mcb = document.getElementById("multi1"); + done(mcb.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.SHOW_SELECTED_BUTTON)); + }); + + assert.ok(await toggleSelectedButton.isDisplayed(), "Toggle selected items button is displayed"); + assert.strictEqual(await toggleSelectedButton.getAttribute("accessible-name"), "Show Selected Items Only", "Correct value is applied") + + }); + }); \ No newline at end of file