Visually hidden

On the web, this component hides content visually and leaves it in the accessibility tree. That is useful for extra labels, live region text and skip link content. The trick needs two things: a way to render a node without showing it, and a way for the platform's screen reader to read it anyway.

Mob has neither. No node type in the bridge has a semantics or accessibility label prop. The single exception is Image, whose description prop becomes a contentDescription on Android. So there is no node the component could return that TalkBack or VoiceOver would announce.

That leaves two options: render the content visibly, which is not what you asked for and would change the layout, or render nothing. The component renders nothing, as a zero-size Spacer. It accepts and drops its children, and announce?/0 returns false, so your code can branch on it instead of finding the empty node at runtime.

Run this from your Mob app's root to add the component to lib/<app>/components/:

mix mishka.ui.gen.mob visually_hidden

The generator registers the tag, so you can use it in ~MOB markup. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the module is <App>.Components.MishkaVisuallyHidden and the tag is <MishkaVisuallyHidden>. Without a prefix, the tag is <VisuallyHidden>.

Call announce?/0 to find out whether hidden content can reach a screen reader on the current platform. It returns false today, so branch on it instead of assuming.

Check whether hidden text can be announced

LTR RTL

Preview

Show the whole example Show less

MishkaVisuallyHidden.announce?()  #=> false — branch on this

• Put the text in the visible label. A phone usually has room, and a visible label helps everyone.
• For an icon-only control, use an Image with a description.
• Mob.Speech can speak a string outright, which covers the live region case.

For Mob.Speech and Image, see the Mob documentation.

The component ignores every prop. Its public API is the function below.

The web component keeps its content in the accessibility tree while hiding it. The Mob component keeps nothing: it renders an empty node and drops its children.

• Headless Visually Hidden, the web component this one ports.
• Mob Nav Link, a row for navigation.
• Mob Anchor, a tappable text link.
• Mob components, the full list of native components.