All rules

Sheath rule

native-icon-a11y-label

Interactive icon-only NativePHP controls need an accessible name.
Package
NativePHP
Category
Native
Default severity
warning by default
Auto-fix
Manual fix

#Why

An icon can communicate its action visually without providing a name to assistive technology. Interactive icons, icon-only pressables, and icon-only floating action buttons need a usable label.

#Examples

#Bad

{{-- The icon-only pressable has no accessible name. --}}

<native:pressable @press="send">

    <native:icon name="send" />

</native:pressable>

#Good

{{-- a11y-label names the icon-only action. --}}

<native:pressable @press="send" a11y-label="Send message">

    <native:icon name="send" />

</native:pressable>

An interactive icon needs its own label. A fab can use either a11y-label or a visible label.

#Conditional Content

Every reachable interactive path must have a non-empty static label or a dynamic value that may supply one.

For an icon-only pressable, accessible text or label content from a descendant can also provide the name.

#Options

All NativePHP rules accept nativeViewPaths. The default is ['views/native/']. See Native View Detection for path configuration.

#See Also

Related rules cover native interface content and events: