Nested Active Control

An accessibility element should not have multiple active controls embedded within it.

Supported within:

Impact

People using TalkBack are most impacted. TalkBack can not activate more than one active control within another accessibility element.

Confirmation

1. Turn on TalkBack
2. Attempt to focus the control
3. Attempt to activate the control
4. One of the following will happen:
   • Inaccessible: A different control is activated.
   • Inaccessible: The control is activated, but its focus box contains another control.
   • Inaccessible: Nothing happens.
   • Accessible: The control is activated and is the only control in its focus box.

How to Fix

Avoid nested clickable elements. Make sure each clickable item is focusable by accessibility technology.

In the example below, remove invisibleToUser to ensure views are available to anyone using assistive technology. Also, note that the parent is clickable and may result in undesired behavior rather than engaging with 'Settings' or 'Information' views directly.

Row(modifier = Modifier.clickable { ... }) {
    Text("Settings", 
        modifier = Modifier.clickable { ... }
            .semantics { 
        invisibleToUser() 
    })
    Text("Information", 
        modifier = Modifier.clickable { ... }
            .semantics { 
        invisibleToUser() 
    })
}

A passing example would have all views be visible for integration with assistive technology with a parent that is not clickable:

Row {
    Text("Settings", 
        modifier = Modifier.clickable { ... })
    Text("Information", 
        modifier = Modifier.clickable { ... })
}