From 96d2731990b1704f16960e979dc9129e8a8b9341 Mon Sep 17 00:00:00 2001 From: Plamen Ivanov Date: Thu, 4 Jun 2026 14:45:14 +0300 Subject: [PATCH 1/2] fix(ui5-select): remove focus outline from input when dropdown is opened When the Select dropdown is activated, the focus should only be on the selected list item, not on the input element. Previously, both the input and the selected item showed focus indicators, violating accessibility standards for single focus. Hide the focus pseudo-element on the input when the popover is opened, ensuring only the selected item in the dropdown shows a focus indicator. - Modified Select.css to remove focus outline when [opened] attribute is set - Added accessibility test to verify focus behavior - All 68 Select tests pass Fixes: #13616 --- packages/main/cypress/specs/Select.cy.tsx | 20 ++++++++++++++++++++ packages/main/src/themes/Select.css | 12 ++---------- 2 files changed, 22 insertions(+), 10 deletions(-) diff --git a/packages/main/cypress/specs/Select.cy.tsx b/packages/main/cypress/specs/Select.cy.tsx index 5249a4e1dcca..066e0ecf924e 100644 --- a/packages/main/cypress/specs/Select.cy.tsx +++ b/packages/main/cypress/specs/Select.cy.tsx @@ -592,6 +592,26 @@ describe("Select - Accessibility", () => { expect(accessInfo.label).to.equal("Updated Reference"); // Updated aria label from ref }); }); + + it("should have focus only on the selected item when dropdown is opened (not on input)", () => { + cy.mount( + + ); + + cy.get("[ui5-select]").realClick(); + cy.get("[ui5-select]").should("have.attr", "opened"); + + // The selected item should have focus - we verify this by checking that + // the input label root does NOT have focus (the pseudo-element should be hidden) + cy.get("[ui5-select]") + .shadow() + .find(".ui5-select-label-root") + .should("not.have.focus"); + }); }); describe("Select - Popover", () => { diff --git a/packages/main/src/themes/Select.css b/packages/main/src/themes/Select.css index 3b1f7fe5321f..1526da40761b 100644 --- a/packages/main/src/themes/Select.css +++ b/packages/main/src/themes/Select.css @@ -8,16 +8,8 @@ } :host([opened]) .ui5-input-focusable-element::after { - content: var(--ui5_input_focus_pseudo_element_content); - position: absolute; - pointer-events: none; - z-index: 2; - border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_input_focus_outline_color); - border-radius: var(--_ui5_input_focus_border_radius); - top: var(--_ui5_input_focus_offset); - bottom: var(--_ui5_input_focus_offset); - left: var(--_ui5_input_focus_offset); - right: var(--_ui5_input_focus_offset); + content: ""; + border: none; } :host([value-state="Negative"][opened]:not([readonly])) .ui5-input-focusable-element:after { From 56687ab64bb8984f056463a41851afa32f2a4511 Mon Sep 17 00:00:00 2001 From: Plamen Ivanov Date: Fri, 5 Jun 2026 14:52:01 +0300 Subject: [PATCH 2/2] - fixed review comments --- packages/main/cypress/specs/Select.cy.tsx | 12 ++++++++---- packages/main/src/themes/Select.css | 15 +-------------- 2 files changed, 9 insertions(+), 18 deletions(-) diff --git a/packages/main/cypress/specs/Select.cy.tsx b/packages/main/cypress/specs/Select.cy.tsx index 066e0ecf924e..ef124ff55671 100644 --- a/packages/main/cypress/specs/Select.cy.tsx +++ b/packages/main/cypress/specs/Select.cy.tsx @@ -605,12 +605,16 @@ describe("Select - Accessibility", () => { cy.get("[ui5-select]").realClick(); cy.get("[ui5-select]").should("have.attr", "opened"); - // The selected item should have focus - we verify this by checking that - // the input label root does NOT have focus (the pseudo-element should be hidden) + // The input focus ring should not be rendered while opened. cy.get("[ui5-select]") .shadow() - .find(".ui5-select-label-root") - .should("not.have.focus"); + .find(".ui5-input-focusable-element") + .then(($el) => { + const style = window.getComputedStyle($el[0], "::after"); + expect(style.getPropertyValue("border-style")).to.equal("none"); + }); + + cy.focused().should("have.attr", "role", "option"); }); }); diff --git a/packages/main/src/themes/Select.css b/packages/main/src/themes/Select.css index 1526da40761b..7cca1406e2c3 100644 --- a/packages/main/src/themes/Select.css +++ b/packages/main/src/themes/Select.css @@ -8,20 +8,7 @@ } :host([opened]) .ui5-input-focusable-element::after { - content: ""; - border: none; -} - -:host([value-state="Negative"][opened]:not([readonly])) .ui5-input-focusable-element:after { - border-color: var(--_ui5_input_focused_value_state_error_focus_outline_color); -} - -:host([value-state="Critical"][opened]:not([readonly])) .ui5-input-focusable-element:after { - border-color: var(--_ui5_input_focused_value_state_warning_focus_outline_color); -} - -:host([value-state="Positive"][opened]:not([readonly])) .ui5-input-focusable-element:after { - border-color: var(--_ui5_input_focused_value_state_success_focus_outline_color); + content: none; } :host([icon]) .ui5-select-root {