Usage

Make an icon-only button accessible.

tsx
// Make an icon-only button accessible.
import { Pressable, Symbol, type AccessibilityProps } from 'kuito';

// An icon button needs words for a screen reader: callers pass them through.
function IconButton(props: AccessibilityProps & { icon: string; onPress: () => void }) {
  return (
    <Pressable role="button" label={props.label} hint={props.hint} onPress={props.onPress}>
      <Symbol name={props.icon} size={22} />
    </Pressable>
  );
}

<IconButton icon="heart" label="Like" hint="Adds the song to your likes" onPress={() => {}} />;

Type declaration

ts
export interface AccessibilityProps extends AccessibilityNativeProps {
  role?: Prop<Role>;
  /** The screen reader action taken, by `name`. */
  onAction?: (event: AccessibilityActionEvent) => void;
}

Members 17

NameTypeRequiredDescription
roleProp<Role>No—
onAction(event: AccessibilityActionEvent) => voidNoThe screen reader action taken, by name.
accessibleProp<boolean>NoMakes the view one screen reader element, read as its label or its children's text.
labelProp<string>NoWhat a screen reader says for the view.
hintProp<string>NoWhat happens when the view is activated, read after the label.
aria-hiddenProp<boolean>NoScreen readers skip the view and its subtree.
actionsProp<readonly AccessibilityAction[]>NoActions a screen reader offers; onAction receives the one taken.
liveProp<"off" | "polite" | "assertive">NoARIA's aria-live: announces changes to the view's content, on iOS too.
aria-disabledProp<boolean>No—
aria-selectedProp<boolean>No—
aria-checkedProp<boolean | "mixed">No—
aria-busyProp<boolean>No—
aria-expandedProp<boolean>No—
aria-valueminProp<number>No—
aria-valuemaxProp<number>No—
aria-valuenowProp<number>No—
aria-valuetextProp<string>No—
onAction — method signatures

Signatures

ts
(event: AccessibilityActionEvent): void

Parameters

NameTypeRequiredDescription
eventAccessibilityActionEventYes—

Returns

void

Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.