Skip to content

Fortal Button and Toggle lose content at 200% text scaling #88

Description

@leoafarias

Summary

Fortal Button and Toggle lose content at the supported 200% accessibility text scale:

  • size-1 Button keeps a fixed 24-pixel height and clips its label;
  • size-2 Toggle overflows horizontally in a realistic constrained layout.

Found while validating #80 at b16636b017f3c8832d8f27f316cc24c0ad92ce8a.

Flutter's large-font guidance requires layouts to leave enough room at the largest platform font setting. Flutter's Android nonlinear-scaling guidance specifically recommends testing the UI at the maximum 200% font setting.

Button reproduction

fortal_button_styles.dart applies .height(metrics.height) to non-ghost variants.

At TextScaler.linear(2), a raw size-1 button keeps the 24-pixel recipe height while the Continue paragraph's natural height is greater than its laid-out render height. No overflow exception is required for this failure; the label is silently clipped.

Toggle reproduction

RemixToggle.build places the icon and label directly in a RowBox, with no flexible, wrapping, or overflow policy.

MediaQuery(
  data: const MediaQueryData(textScaler: TextScaler.linear(2)),
  child: SizedBox(
    width: 200,
    child: FortalToggle(
      selected: false,
      label: 'Workspace Write',
      onChanged: (_) {},
    ),
  ),
)

This produces a RenderFlex overflow.

Expected

At 200% text scaling, control text remains available without clipping or a render overflow. Normal-scale Radix/Fortal metrics remain unchanged.

Suggested direction

  • Treat ordinary button recipe heights as minimum heights, or derive a larger minimum from the effective text scaler.
  • Give Toggle labels an explicit constrained contract: flexible wrapping, or a documented ellipsis policy that preserves the complete accessible name.
  • Exercise the smallest size and narrow supported layouts in widget tests.

Acceptance criteria

  • Button labels are not clipped at 200% text scaling for sizes 1–4 and representative variants.
  • A labelled Toggle does not overflow at 200 logical pixels and 200% text scaling.
  • Icon-only controls preserve their intended fixed geometry.
  • Normal-scale Fortal parity snapshots/geometry remain unchanged.
  • The semantic label remains complete if visual ellipsis is selected.

Scope

This issue is about supported text accessibility. It does not require arbitrary 300% linear scaling or changing the normal-scale Radix metrics.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions