diff --git a/packages/main/cypress/specs/Select.cy.tsx b/packages/main/cypress/specs/Select.cy.tsx
index 0c21d1cdbe66..b35a41585239 100644
--- a/packages/main/cypress/specs/Select.cy.tsx
+++ b/packages/main/cypress/specs/Select.cy.tsx
@@ -462,6 +462,25 @@ describe("Select - Popover", () => {
.should("have.text", "Custom message");
});
+ it("ResponsivePopover should not have accessible name on desktop", () => {
+ cy.mount(
+
+ Option 1
+ Option 2
+ Option 3
+
+ );
+
+ // Open the popover
+ cy.get("#desktopSelect").realClick();
+
+ // Check that the ResponsivePopover does not have an accessible name on desktop
+ cy.get("#desktopSelect")
+ .shadow()
+ .find("[ui5-responsive-popover]")
+ .should("not.have.attr", "accessible-name");
+ });
+
it("Value state message popover can extend beyond select width", () => {
cy.mount(
diff --git a/packages/main/cypress/specs/Select.mobile.cy.tsx b/packages/main/cypress/specs/Select.mobile.cy.tsx
index 32b46afaa80a..50865ee08c27 100644
--- a/packages/main/cypress/specs/Select.mobile.cy.tsx
+++ b/packages/main/cypress/specs/Select.mobile.cy.tsx
@@ -2,9 +2,48 @@ import Select from "../../src/Select.js";
import Option from "../../src/Option.js";
describe("Select mobile general interaction", () => {
- it("Changes selection in Dialog", () => {
- cy.get("html").viewport("iphone-x");
+ beforeEach(() => {
+ cy.ui5SimulateDevice("phone");
+ });
+
+ it("ResponsivePopover accessible name should match the expected title text", () => {
+ cy.mount(
+
+ Option 1
+ Option 2
+
+ );
+
+ // Open the popover
+ cy.get("#select").realClick();
+
+ // Check if accessible-name is equal to select._headerTitleText
+ cy.get("#select").invoke("prop", "_headerTitleText").then(_headerTitleText => {
+ cy.get("#select")
+ .shadow()
+ .find("[ui5-responsive-popover]")
+ .should("have.attr", "accessible-name")
+ .and("equal", _headerTitleText);
+ });
+ });
+ it("should focus the selected option when popover opens", () => {
+ cy.mount(
+
+ Option 1
+ Option 2
+ Option 3
+
+ );
+ cy.get("#select").realClick();
+
+ cy.get("#opt2").should("have.attr", "focused");
+ cy.get("#opt2").shadow()
+ .find(".ui5-li-root")
+ .should("be.focused");
+ });
+
+ it("Changes selection in Dialog", () => {
cy.mount(
Cozy
@@ -40,4 +79,4 @@ describe("Select mobile general interaction", () => {
cy.get("@select").should("have.prop", "value", "Cozy");
});
-});
\ No newline at end of file
+});
diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts
index 0dd8c5f73eaf..c310e5f538e9 100644
--- a/packages/main/src/Select.ts
+++ b/packages/main/src/Select.ts
@@ -869,6 +869,11 @@ class Select extends UI5Element implements IFormInputElement {
_applyFocusToSelectedItem() {
this.options.forEach(option => {
option.focused = option.selected;
+ if (option.focused && isPhone()) {
+ // on phone, the popover opens full screen (dialog)
+ // move focus to option to read out dialog header
+ option.focus();
+ }
});
}
diff --git a/packages/main/src/SelectPopoverTemplate.tsx b/packages/main/src/SelectPopoverTemplate.tsx
index 82bbb03e9418..6a7626a2ef69 100644
--- a/packages/main/src/SelectPopoverTemplate.tsx
+++ b/packages/main/src/SelectPopoverTemplate.tsx
@@ -27,6 +27,7 @@ export default function SelectPopoverTemplate(this: Select) {
onBeforeOpen={this._beforeOpen}
onClose={this._afterClose}
onKeyDown={this._onkeydown}
+ accessibleName={this._isPhone ? this._headerTitleText : undefined}
>
{this._isPhone &&