diff options
| author | Christian Mollekopf <chrigi_1@fastmail.fm> | 2017-07-24 16:40:58 +0200 |
|---|---|---|
| committer | Christian Mollekopf <chrigi_1@fastmail.fm> | 2017-07-24 16:40:58 +0200 |
| commit | 63f170eb2eb3e29570f0e6969f5c69a05053518b (patch) | |
| tree | c404105936914d7dbf749afbcf9364ad8cf55075 /docs/design.md | |
| parent | d6857b76ca0bf9888ee0012c680fffb5aeb7ace6 (diff) | |
| download | kube-63f170eb2eb3e29570f0e6969f5c69a05053518b.tar.gz kube-63f170eb2eb3e29570f0e6969f5c69a05053518b.zip | |
Focus documentation
Diffstat (limited to 'docs/design.md')
| -rw-r--r-- | docs/design.md | 8 |
1 files changed, 4 insertions, 4 deletions
diff --git a/docs/design.md b/docs/design.md index b0b8839f..38909998 100644 --- a/docs/design.md +++ b/docs/design.md | |||
| @@ -282,8 +282,8 @@ There are the following different focus states: | |||
| 282 | With touch input only the selected state is relevant. | 282 | With touch input only the selected state is relevant. |
| 283 | 283 | ||
| 284 | The following indicators are available to visualize selection: | 284 | The following indicators are available to visualize selection: |
| 285 | * Highlight: A blue overlay over the item. | 285 | * Highlight: A overlay over the item in the highlight color. |
| 286 | * Glow: A blue glow around the borders. | 286 | * Border: A border around the item in highlight color. |
| 287 | * Underlined text | 287 | * Underlined text |
| 288 | 288 | ||
| 289 | It is important that a selected element can still show focus, otherwise the focus during keyboard navigation simply disappears if it moves to the selected element. | 289 | It is important that a selected element can still show focus, otherwise the focus during keyboard navigation simply disappears if it moves to the selected element. |
| @@ -295,9 +295,9 @@ The following controls need to deal with focus: | |||
| 295 | * Copyable elements | 295 | * Copyable elements |
| 296 | 296 | ||
| 297 | We're indicating focus as follows: | 297 | We're indicating focus as follows: |
| 298 | * Active focus is indicated with a glow. This is used for both hovering and keyboard focus. | 298 | * Active focus is indicated with a border. This is used for both hovering and keyboard focus. |
| 299 | * A selected element is highlighted. | 299 | * A selected element is highlighted. |
| 300 | * Keyboard focus is additionally to the glow indicated with underlined text. | 300 | * Keyboard focus is additionally to the border indicated with underlined text. |
| 301 | 301 | ||
| 302 | ### FocusScope | 302 | ### FocusScope |
| 303 | In order to be able to deal with focus on a local scope (which is important for reusable components), a FocusScope is required to establish a border for focus handling. Internally you can set the focus as required within the focus scope, and externally you can just give focus to the FocusScope, ignoring what's going to happen internally. The FocusScope will automatically forward focus (when it receives it), to whatever element requested focus internally. | 303 | In order to be able to deal with focus on a local scope (which is important for reusable components), a FocusScope is required to establish a border for focus handling. Internally you can set the focus as required within the focus scope, and externally you can just give focus to the FocusScope, ignoring what's going to happen internally. The FocusScope will automatically forward focus (when it receives it), to whatever element requested focus internally. |