From 7890794d379876c0b7de60cfa74532bd496363d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Fri, 17 Jan 2025 13:43:01 +0100 Subject: [PATCH] docs: lumo pointer focus ring --- .../styling/lumo/lumo-style-properties/interaction.adoc | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/articles/styling/lumo/lumo-style-properties/interaction.adoc b/articles/styling/lumo/lumo-style-properties/interaction.adoc index 096d38f925..6160f98b3e 100644 --- a/articles/styling/lumo/lumo-style-properties/interaction.adoc +++ b/articles/styling/lumo/lumo-style-properties/interaction.adoc @@ -11,6 +11,8 @@ page-links: = Lumo Interaction +== Cursor + Lumo defines a CSS custom property that you can use to adjust the way in which your application signals clickable elements to users of pointer devices -- typically a mouse. You can either follow the _web_ approach and use the pointer (i.e., hand) cursor for clickable items, or take the _desktop_ approach and use the default (i.e., arrow) cursor. @@ -28,5 +30,9 @@ You can either follow the _web_ approach and use the pointer (i.e., hand) cursor | [custom-property]#--lumo-clickable-cursor# |=== +[role="since:com.vaadin:vaadin@V24.7"] +== Pointer Focus Ring + +By default, Vaadin components only show a focus ring when the user navigates using the keyboard. You can enable a focus ring for pointer devices by setting the `--lumo-input-field-pointer-focus-visible` custom property to `1`. Note that this only applies to components with an input field such as Text Field, Date Picker, etc. [discussion-id]`4D15B095-CBCB-4E82-A82B-E5B2DA00EDE5`