Fix app title text scaling on Windows

[anuagragith]

Summary

Fix the React Native Gallery window title so it responds to the Windows Accessibility > Text size setting.

• Render the visible title using React Native with font scaling enabled.
• Preserve AppWindow.Title for accessibility, task switching, and window identity.
• Switch the native caption between standard and tall heights as text size changes.
• Keep the React title and native caption synchronized during live text-size changes.
• Preserve native caption buttons, window dragging, system colors, and inactive-window colors.
• Add regression tests for the title content and live title-bar height changes.

Root cause

The Windows App SDK native caption text does not respond to the system accessibility text-size setting and does not expose an API for changing its font size.

Additionally, RNW 0.84 updates Fabric text layout when text size changes but does not publish the updated fontScale through Dimensions. The implementation therefore uses the title’s actual rendered height to keep the React content boundary synchronized with the native caption.

Validation

• Verified live transitions at 100%, 200%, 225%, and back to 100% without restarting.
• Title height changed as expected: 24 → 48 → 54 → 24 pixels.
• Caption-to-content spacing remained consistently 8 pixels with no overlap or excess gap.
• Native minimize, maximize, and close buttons remained available.
• Window title-bar dragging remained functional.
• Full Jest suite passed: 20 tests.
• Full lint completed with 0 errors; existing warnings only.
• Debug x64 Windows build succeeded.
• Independent regression review found no remaining actionable issues.

Scope

This fixes ADO 63971606 for the main Gallery window.

Note: This is a pre-existing Gallery accessibility issue and was not introduced by React Native Windows 0.85.

[azure-pipelines]

Azure Pipelines:
There may be pipelines that require an authorized user to comment /azp run to run.

[anuagragith]

/azp run

[azure-pipelines]

Azure Pipelines:
Successfully started running 1 pipeline(s).

[Copilot]

🟡 Changes recommended

Prevent title wrapping before using its rendered height as the accessibility scaling signal.

Get a fresh assessment by requesting another Copilot review.

Pull request overview

Fixes Windows Gallery title-bar text scaling for accessibility settings while preserving native window behavior.

Changes:

• Adds a scalable React Native title bar.
• Synchronizes native caption height with text-size changes.
• Adds regression tests for title rendering and height transitions.

File summaries

File	Summary
windows/rngallery/rngallery.cpp	Configures native title-bar rendering, colors, and dynamic height.
src/components/AppTitleBar.tsx	Implements the scalable title. Moderate issue: the title can wrap without numberOfLines, causing incorrect height-based scaling detection.
src/App.tsx	Integrates the title bar on Windows.
__tests__/AppTitleBar.test.tsx	Tests title content, scaling, and height transitions.

Review details

• Files reviewed: 4/4 changed files
• Comments generated: 1
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

🔵 Needs a closer look

Wrapped titles can be misidentified as scaled, and 225% scaling can cause overflow and React/native caption desynchronization.

Review details

Suppressed comments (2)

src/components/AppTitleBar.tsx:50

• onTitleLayout treats any height above 16 as evidence of text scaling, but this <Text> is allowed to wrap when the window is resized below the title width (there is no minimum window size configured). At normal text scale that wrap will incorrectly switch the React bar to 48 px while the native caption remains Standard, and at larger scales it can overflow the 48 px bar. Keep the window title single-line (or otherwise distinguish wrapping from font scaling) before using its height as the scale signal.

      <Text
        accessibilityRole="header"
        allowFontScaling={true}
        onLayout={onTitleLayout}
        style={styles.title}>

src/components/AppTitleBar.tsx:28

• At the 225% transition described in the PR, the rendered title reaches 54 px, but every scaled case here still collapses to a 48 px container. Since this view is the React content boundary, the title can extend into the navigation area and the React/native caption heights are no longer synchronized. Keep the measured height (with the standard minimum) or otherwise derive the container height from the same caption metrics instead of reducing all scaled sizes to a boolean.

export const getAppTitleBarHeight = (isTextScaled: boolean) =>
  isTextScaled ? 48 : 32;

• Files reviewed: 4/4 changed files
• Comments generated: 0 new
• Review effort level: Lite

[anuagragith]

/azp run

[azure-pipelines]

Azure Pipelines:
Successfully started running 1 pipeline(s).