Skip to content

Commit

Permalink
docs: lumo pointer focus ring
Browse files Browse the repository at this point in the history
  • Loading branch information
@sissbruecker
sissbruecker committed Jan 17, 2025
1 parent b4177d9 commit 7890794
Showing 1 changed file with 6 additions and 0 deletions.
6 changes: 6 additions & 0 deletions articles/styling/lumo/lumo-style-properties/interaction.adoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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:[email protected]"]
== 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.

Check warning on line 36 in articles/styling/lumo/lumo-style-properties/interaction.adoc

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Vaadin.NoteThat] Avoid using 'note that'.

Raw Output:
{"message": "[Vaadin.NoteThat] Avoid using 'note that'.", "location": {"path": "articles/styling/lumo/lumo-style-properties/interaction.adoc", "range": {"start": {"line": 36, "column": 228}}}, "severity": "WARNING"}

[discussion-id]`4D15B095-CBCB-4E82-A82B-E5B2DA00EDE5`

0 comments on commit 7890794

Please sign in to comment.