How to exclude a clickable element from the tab order

Question

With Jetpack Compose for Desktop, we can make pretty much any element clickable:

Text("I'm clickable", Modifier.clickable { onClick() })

This causes the element to be included in the tab order, and most of the time that's what you want. But in my case, the interaction that happens on click is also available in another way, so I don't want to force the user to tab through a lot of useless Texts.

How can I exclude the clickable element from the tab order?

Any element that has a click handler needs to be focusable. See also https://www.w3.org/WAI/WCAG21/Understanding/keyboard. In Web applications, if a lot of focusable elements would be cumbersome to tab through, a _composit widget_ is established, which only has one tab stop. Switching between items is then done via arrow keys. Maybe that’s an alternative approach to your issue… Otherwise, skip links might be interesting. — Andy, Jan 24 '23 at 12:43

score 1 · Accepted Answer · answered Jan 26 '23 at 10:42

1

Modifier.clickable is a high-level API, you can use a lower-level API to get more flexibility.

To detect tap you can use Modifier.pointerInput with detectTapGestures:

Modifier
    .pointerInput(Unit) {
        detectTapGestures {
            onClick()
        }
    }

Many of the things clickable does won't be added in this case. For example, see this answer on how to add a ripple effect. See Modifier.clickable source code for other things you may need to add.

answered Jan 26 '23 at 10:42

Phil Dukhov

67,741
15
184
220

Do you know which part of that code causes inclusion in the tab order? Nothing in the implementation jumps out to me, it's all about tapping and pressing, not about tab order or focusing. – Jorn Jan 27 '23 at 09:30
1

@Jorn I think my link to the source code is not very valid - when I navige to `clickable` definition in IDEA, I see the use of the `focusRequesterAndModifier` function, which probably causes this behavior, but I have not found it in android compose or in the compose-jb repositories, so I cannot provide a link. – Phil Dukhov Jan 27 '23 at 11:55

How to exclude a clickable element from the tab order

1 Answers1