From 278ca3995cc229df014a3682dae89ae06f160aad Mon Sep 17 00:00:00 2001 From: Ekhorn Date: Mon, 2 Nov 2026 15:28:27 +0100 Subject: [PATCH 1/2] Move keyboard focus ring inside the field --- .../theme/src/components/or-vaadin-menu-bar.css | 10 +++++++++- ui/component/theme/src/mixins/field-internal.css | 4 ++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/ui/component/theme/src/components/or-vaadin-menu-bar.css b/ui/component/theme/src/components/or-vaadin-menu-bar.css index d323da4c6e..2c187dd732 100644 --- a/ui/component/theme/src/components/or-vaadin-menu-bar.css +++ b/ui/component/theme/src/components/or-vaadin-menu-bar.css @@ -18,6 +18,13 @@ */ @import "@vaadin/vaadin-lumo-styles/components/menu-bar.css"; +/* The menu bar clips its buttons at its edges, so draw their focus ring inside */ +@media lumo_components_menu-bar-button-internal { + :host([focus-ring]) { + box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); + } +} + :root::before, :host::before { --_lumo-vaadin-menu-bar-inject: 1; @@ -36,5 +43,6 @@ lumo_components_item, lumo_components_context-menu-item, lumo_components_menu-bar-item; --_lumo-vaadin-menu-bar-button-inject: 1; - --_lumo-vaadin-menu-bar-button-inject-modules: lumo_components_button, lumo_components_menu-bar-button; + --_lumo-vaadin-menu-bar-button-inject-modules: + lumo_components_button, lumo_components_menu-bar-button, lumo_components_menu-bar-button-internal; } diff --git a/ui/component/theme/src/mixins/field-internal.css b/ui/component/theme/src/mixins/field-internal.css index abbad1673f..6d6e428274 100644 --- a/ui/component/theme/src/mixins/field-internal.css +++ b/ui/component/theme/src/mixins/field-internal.css @@ -30,4 +30,8 @@ [class$="container"] { width: 100%; /* Lumo sets default field container width as 12em */ } + /* Lumo draws the focus ring in the removed padding, so draw it inside the field where no ancestor can clip it */ + :host([focus-ring]) [part="input-field"] { + box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color); + } } From 9ad6140203601580722fcb73693523b9305c6a1b Mon Sep 17 00:00:00 2001 From: Ekhorn Date: Mon, 2 Nov 2026 15:39:35 +0100 Subject: [PATCH 2/2] Match button focus ring colors to error and contrast variants --- ui/component/theme/src/components/or-vaadin-button.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/ui/component/theme/src/components/or-vaadin-button.css b/ui/component/theme/src/components/or-vaadin-button.css index 7b3795a110..8ae0850d80 100644 --- a/ui/component/theme/src/components/or-vaadin-button.css +++ b/ui/component/theme/src/components/or-vaadin-button.css @@ -24,6 +24,13 @@ :host([theme~="primary"]) { min-width: var(--vaadin-button-min-width, 0); } + /* Lumo keeps the focus ring in the primary color for every color variant */ + :host([theme~="error"]) { + --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-error-color-50pct)); + } + :host([theme~="contrast"]) { + --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-contrast-50pct)); + } } :root::before,