basalt-appkit 0.0.0-rc5 → 0.2.0

package/native/appkit/main_appkit.mm

@@ -21,7 +21,7 @@
 // touches a view off the main thread.
 //
 // What this host can render is what AppKitMountingManager can mount, which today
-// is <View>. `js/demo.js` -- a surface driven straight through
+// is <View>. `e2e/demo.js` -- a surface driven straight through
 // nativeFabricUIManager, with no React and no react-native JavaScript -- is
 // therefore the bundle this runs, and is the same first light-up the GTK host
 // had. A React app needs the JavaScript platform layer to answer to a name
@@ -29,9 +29,13 @@
 
 #import "AppKitAnimationChoreographer.h"
 #import "AppKitMountingManager.h"
+#import "CoreTextLayout.h"
+
+#include "FontScaling.h"
 
 #include <react/io/ImageLoaderModule.h>
 
+#include "CrashHandler.h"
 #include "AppIdentity.h"
 #include "AppPaths.h"
 #include "DevMenu.h"
@@ -52,6 +56,7 @@
 #import "AppKitFocus.h"
 #import "AppKitTouchDispatcher.h"
 #import "AppKitSnapshot.h"
+#include "SystemLocale.h"
 #import "RnAppKitView.h"
 
 #include "AppearanceModule.h"
@@ -72,6 +77,8 @@
 #include <csignal>
 #include "ExpoModules.h"
 #include "GestureHandlerModule.h"
+#include "SafeAreaComponent.h"
+#include "ScreensComponent.h"
 #include "ReanimatedModule.h"
 #include "JsRuntimeAccess.h"
 #include "KeyEvents.h"
@@ -131,7 +138,7 @@ constexpr int kInitialHeight = 700;
 
 // The entry point for the *scriptless* mode, where the bundle is a hand-written
 // script talking to nativeFabricUIManager directly rather than a React app.
-// See js/demo.js. Only used when no module name is given.
+// See e2e/demo.js. Only used when no module name is given.
 constexpr const char *kRenderFunctionName = "basaltRender";
 
 // One window, and the surface in it.
@@ -243,7 +250,14 @@ LayoutConstraints constraintsFor(int width, int height) {
   return LayoutConstraints{
       .minimumSize = size,
       .maximumSize = size,
-      .layoutDirection = LayoutDirection::LeftToRight,
+      // The desktop's own reading direction, or whatever `I18nManager` was
+      // told. This was `LeftToRight` unconditionally until 2026-10-10, so an
+      // app in Arabic -- or one calling `forceRTL(true)` and reloading, which
+      // is what React Native's documentation says to do -- laid out
+      // left-to-right with a flag that claimed otherwise. See
+      // core/SystemLocale.h.
+      .layoutDirection = basalt::layoutIsRightToLeft() ? LayoutDirection::RightToLeft
+                                                       : LayoutDirection::LeftToRight,
   };
 }
 
@@ -327,9 +341,26 @@ facebook::react::TurboModuleProviders makeTurboModuleProviders(
         if (name == facebook::react::ImageLoaderModule::kModuleName) {
           return std::make_shared<facebook::react::ImageLoaderModule>(jsInvoker, imageLoader);
         }
+        // `Dimensions` and `PixelRatio`, which ReactCxxPlatform answers with a
+        // hardcoded 1280x720 and a zero scale. Ours answers with the window
+        // this host actually made; see core/DeviceMetrics.h.
+        // `AppState`, whose every method upstream leaves empty. See
+        // core/AppStateHost.h.
+        if (name == basalt::DesktopAppStateModule::kModuleName) {
+          return std::make_shared<basalt::DesktopAppStateModule>(jsInvoker);
+        }
+        if (name == basalt::DesktopDeviceInfoModule::kModuleName) {
+          return std::make_shared<basalt::DesktopDeviceInfoModule>(jsInvoker);
+        }
         if (name == basalt::DesktopAppModule::kModuleName) {
           return std::make_shared<basalt::DesktopAppModule>(jsInvoker);
         }
+        if (name == basalt::DesktopSafeAreaModule::kModuleName) {
+          return std::make_shared<basalt::DesktopSafeAreaModule>(jsInvoker);
+        }
+        if (name == basalt::DesktopScreensModule::kModuleName) {
+          return std::make_shared<basalt::DesktopScreensModule>(jsInvoker);
+        }
         if (name == basalt::DesktopAppearanceModule::kModuleName) {
           return std::make_shared<basalt::DesktopAppearanceModule>(jsInvoker);
         }
@@ -354,6 +385,15 @@ facebook::react::TurboModuleProviders makeTurboModuleProviders(
         if (name == basalt::DesktopShareModule::kModuleName) {
           return std::make_shared<basalt::DesktopShareModule>(jsInvoker);
         }
+        // `Settings`, kept in a file beside the app's identity rather than in
+        // this desktop's own settings store; see core/SettingsStore.h.
+        if (name == basalt::DesktopSettingsManagerModule::kModuleName) {
+          return std::make_shared<basalt::DesktopSettingsManagerModule>(jsInvoker);
+        }
+        // `ActionSheetIOS`, which is a popup menu here; see core/ActionSheet.h.
+        if (name == basalt::DesktopActionSheetModule::kModuleName) {
+          return std::make_shared<basalt::DesktopActionSheetModule>(jsInvoker);
+        }
         // The native file dialogs, which React Native has no API for and which
         // are the first thing a desktop app reaches for. See core/DialogModule.h.
         if (name == basalt::DesktopDialogModule::kModuleName) {
@@ -516,6 +556,65 @@ void dumpMenuIfRequested() {
   }
 }
 
+// BASALT_SNAPSHOT: write the window as a PNG on the way out.
+//
+// The tree dump below says a view *has* a colour, a frame and a transform. It
+// cannot say that the right pixels reached the screen, and the two bugs found
+// on 2026-10-10 were both of that kind: `padding` on a `<Text>` laid the box out
+// and drew the text in the corner, and an inline `<View>` stayed where the words
+// used to be. Both were found by looking at a picture of React Native's own
+// LogBox, which is an argument for being able to take one without a camera.
+//
+// One file per surface, the way the dump writes one section per surface: the
+// app's window at the path given, and a second window or the error inspector
+// beside it as `<name>.window<n>.png` and `<name>.logbox.png`. LogBox is a root
+// of its own, and it is the screen most worth looking at -- React Native's own
+// interface, drawn by this platform's text and layout.
+//
+// `RnAppKitWriteSnapshot` is the renderer the demo and the mount harness
+// already use, and it needs no window server: a mounted tree is rendered
+// through its own layer tree, a detached one gets an offscreen window.
+// `/tmp/out.png` and "logbox" become `/tmp/out.logbox.png`. The suffix goes
+// before the extension so the file is still a PNG to everything that looks at
+// its name.
+NSString *snapshotSibling(NSString *path, NSString *suffix) {
+  NSString *extension = path.pathExtension;
+  if (extension.length == 0) {
+    return [path stringByAppendingFormat:@".%@", suffix];
+  }
+  return [[path.stringByDeletingPathExtension stringByAppendingFormat:@".%@", suffix]
+      stringByAppendingPathExtension:extension];
+}
+
+void writeSnapshotOf(RnAppKitView *root, NSString *path) {
+  if (root == nil) {
+    return;
+  }
+  if (RnAppKitWriteSnapshot(root, path)) {
+    NSLog(@"wrote a snapshot to %@", path);
+  } else {
+    NSLog(@"could not write %@", path);
+  }
+}
+
+void snapshotIfRequested() {
+  const char *path = getenv("BASALT_SNAPSHOT");
+  if (path == nullptr) {
+    return;
+  }
+  NSString *base = [NSString stringWithUTF8String:path];
+  writeSnapshotOf(gHost.main().root, base);
+  for (const auto &other : gHost.windows) {
+    if (other->surfaceId == kSurfaceId || other->root == nil) {
+      continue;
+    }
+    writeSnapshotOf(other->root,
+                    snapshotSibling(base, [NSString stringWithFormat:@"window%d",
+                                                                     (int)other->surfaceId]));
+  }
+  writeSnapshotOf(gHost.logBoxRoot, snapshotSibling(base, @"logbox"));
+}
+
 void dumpTreeIfRequested() {
   const char *path = getenv("BASALT_DUMP_TREE");
   if (path == nullptr || gHost.main().root == nil) {
@@ -616,6 +715,7 @@ void endAnyOpenSheets() {
 void shutdown() {
   // Before the surface stops, which tears the tree down.
   dumpTreeIfRequested();
+  snapshotIfRequested();
   dumpMenuIfRequested();
 
   if (gHost.choreographer != nullptr) {
@@ -685,6 +785,49 @@ void shutdown() {
 // Every window, including the app's own. What this does *not* cover is Cmd-Q:
 // terminating goes through applicationShouldTerminate:, which never asks a
 // window whether it minds -- that is the handler further down.
+// `AppState`, from the two facts AppKit keeps: whether this application is
+// frontmost, and whether any of it is on screen. Hiding the app (Cmd-H) and
+// miniaturising every window are both "background"; losing focus to another
+// application while still visible is "inactive". See core/AppStateHost.h.
+- (void)rnReportAppState {
+  const bool focused = NSApp.isActive;
+  bool visible = !NSApp.isHidden;
+  if (visible) {
+    visible = NO;
+    for (NSWindow *window in NSApp.windows) {
+      if (window.isVisible && !window.isMiniaturized) {
+        visible = YES;
+        break;
+      }
+    }
+  }
+  basalt::notifyAppState(basalt::appStateFor(focused, visible));
+}
+
+- (void)applicationDidBecomeActive:(NSNotification *)notification {
+  [self rnReportAppState];
+}
+
+- (void)applicationDidResignActive:(NSNotification *)notification {
+  [self rnReportAppState];
+}
+
+- (void)applicationDidHide:(NSNotification *)notification {
+  [self rnReportAppState];
+}
+
+- (void)applicationDidUnhide:(NSNotification *)notification {
+  [self rnReportAppState];
+}
+
+- (void)windowDidMiniaturize:(NSNotification *)notification {
+  [self rnReportAppState];
+}
+
+- (void)windowDidDeminiaturize:(NSNotification *)notification {
+  [self rnReportAppState];
+}
+
 - (BOOL)windowShouldClose:(NSWindow *)sender {
   for (const auto &candidate : gHost.windows) {
     if (candidate->window != sender) {
@@ -753,6 +896,13 @@ void shutdown() {
   // and React Native's C++ platform answers "what size is the screen" with
   // zero. Told here, where the window's size is already being handed to Fabric.
   gHost.mountingManager->setSurfaceSize((float)width, (float)height);
+  // And `Dimensions.get('window')`, which is the area React lays out in rather
+  // than the window's frame -- the two differ by this host's title bar. The
+  // main surface only: a second window has a surface of its own and
+  // `Dimensions` is singular.
+  if (resized->surfaceId == kSurfaceId) {
+    basalt::notifySurfaceSize(width, height);
+  }
   // The window moved or was resized, which `useWindow()` hands an app as live
   // bounds. Here rather than in a watcher of its own: this is already the one
   // place that learns it.
@@ -1021,6 +1171,11 @@ std::vector<facebook::react::SurfaceId> hostWindows() {
 } // namespace basalt
 
 int main(int argc, const char *argv[]) {
+
+  // What `initialWindowMetrics` answers, before any JavaScript asks. The window
+  // is this size until something resizes it, and the provider's own layout
+  // corrects it after that. See core/SafeAreaComponent.h.
+  basalt::setInitialWindowFrame(kInitialWidth, kInitialHeight);
   // glog, before anything logs through it.
   //
   // Without this every run opens with "WARNING: Logging before
@@ -1031,6 +1186,9 @@ int main(int argc, const char *argv[]) {
   // arrives before anything this project writes.
   FLAGS_logtostderr = true;
   google::InitGoogleLogging(argv[0]);
+  // Straight after, so a crash between here and the first window still
+  // says where. See core/CrashHandler.h.
+  basalt::installCrashHandler();
 
   @autoreleasepool {
     gHost.bundlePath = argc > 1 ? argv[1] : "build/main.jsbundle.js";
@@ -1085,6 +1243,15 @@ int main(int argc, const char *argv[]) {
     // Expo app is during its first import.
     basalt::startObservingColorScheme();
 
+    // The platform's text scale, which on macOS is 1: appKitTextScale() is
+    // where that is explained. Handed over the same way GTK hands over the one
+    // it reads from GtkSettings, so core/FontScaling.h is the only thing that
+    // decides what `allowFontScaling` means.
+    // Which language this desktop is in and which way it reads, asked once and
+    // on this thread. See core/SystemLocale.h.
+    basalt::setSystemLocale(basalt::systemLocale());
+    basalt::setSystemFontScale(basalt::appKitTextScale());
+
     // Before ReactHost, so the beat is being induced from the first event on.
     gHost.runLoopObserver = basalt::installRunLoopObserver(gHost.runLoopObserverManager);
 
@@ -1226,6 +1393,10 @@ int main(int argc, const char *argv[]) {
     // SurfaceHandler::start calls AppRegistry.runApplication. Empty: the
     // surface is registered without JS being called at all, leaving it for a
     // script to commit into through nativeFabricUIManager by hand.
+    // Before the surface starts, so that an app reading `Dimensions` while its
+    // first render runs is told the size it is being laid out at rather than a
+    // zero. See core/DeviceMetrics.h.
+    basalt::notifySurfaceSize(kInitialWidth, kInitialHeight);
     gHost.reactHost->startSurface(kSurfaceId,
                                   gHost.moduleName,
                                   folly::dynamic::object(),

package/native/tests/test_appkit_accessibility.mm

@@ -168,3 +168,292 @@ TEST(accessibility_role_is_reported_in_the_tree) {
     EXPECT(std::string([plain describeTree].UTF8String).find("role=") == std::string::npos);
   }
 }
+
+// accessibilityValue: a range, a position in it, and a text form a screen reader
+// prefers over the number. The parts are independent in React Native, which is
+// the difficulty: an absent one must stay absent rather than become zero.
+
+TEST(accessibility_value_reaches_appkit) {
+  @autoreleasepool {
+    RnAppKitView *view = viewWithRole(@"adjustable");
+
+    [view setRnAccessibleValueMin:@0 max:@10 now:@7 text:nil];
+
+    EXPECT([view.accessibilityMinValue isEqual:@0]);
+    EXPECT([view.accessibilityMaxValue isEqual:@10]);
+    EXPECT([view.accessibilityValue isEqual:@7]);
+    EXPECT(view.isAccessibilityElement);
+  }
+}
+
+TEST(an_accessibility_value_without_a_range_does_not_invent_one) {
+  @autoreleasepool {
+    RnAppKitView *view = viewWithRole(@"adjustable");
+
+    // `now` alone. A view that never said what its range is must not be
+    // announced as sitting at the bottom of one.
+    [view setRnAccessibleValueMin:nil max:nil now:@3 text:nil];
+
+    EXPECT(view.accessibilityMinValue == nil);
+    EXPECT(view.accessibilityMaxValue == nil);
+    EXPECT([view.accessibilityValue isEqual:@3]);
+  }
+}
+
+TEST(a_text_accessibility_value_is_preferred_over_the_number) {
+  @autoreleasepool {
+    RnAppKitView *view = viewWithRole(@"adjustable");
+
+    // "Tuesday" reads better than "3", which is why React Native carries both.
+    [view setRnAccessibleValueMin:@0 max:@6 now:@3 text:@"Tuesday"];
+
+    EXPECT([view.accessibilityValue isEqual:@"Tuesday"]);
+    // The range still stands: a screen reader may announce position as well.
+    EXPECT([view.accessibilityMaxValue isEqual:@6]);
+  }
+}
+
+TEST(an_explicit_accessibility_value_wins_over_a_checked_state) {
+  @autoreleasepool {
+    RnAppKitView *view = viewWithRole(@"checkbox");
+
+    // AppKit carries both in one property, so the order matters and this is the
+    // assertion that pins it: the app's own value is not overwritten by a value
+    // derived from a checkbox.
+    [view setRnAccessibleStateDisabled:RnAppKitAccessibleUnset
+                               checked:RnAppKitAccessibleTrue
+                              selected:RnAppKitAccessibleUnset
+                              expanded:RnAppKitAccessibleUnset
+                                  busy:RnAppKitAccessibleUnset];
+    EXPECT([view.accessibilityValue isEqual:@YES]);
+
+    [view setRnAccessibleValueMin:nil max:nil now:nil text:@"Mixed"];
+    EXPECT([view.accessibilityValue isEqual:@"Mixed"]);
+  }
+}
+
+TEST(a_view_with_no_accessibility_value_keeps_none) {
+  @autoreleasepool {
+    RnAppKitView *view = viewWithRole(@"adjustable");
+
+    [view setRnAccessibleValueMin:nil max:nil now:nil text:nil];
+
+    EXPECT(view.accessibilityMinValue == nil);
+    EXPECT(view.accessibilityMaxValue == nil);
+    EXPECT(view.accessibilityValue == nil);
+  }
+}
+
+TEST(a_role_can_change_after_the_view_is_mounted) {
+  @autoreleasepool {
+    RnAppKitView *view = viewWithRole(@"button");
+    EXPECT([view.accessibilityRole isEqual:NSAccessibilityButtonRole]);
+
+    // AppKit's role is a settable property, so unlike GTK, where it is
+    // construct-only and the backlog records the limitation, the role itself
+    // follows. This pins that rather than assuming it: the mounting manager
+    // applies the role on every props update, and a change to apply it only at
+    // creation would be invisible without this.
+    [view setRnAccessibleRole:@"checkbox"];
+    EXPECT([view.accessibilityRole isEqual:NSAccessibilityCheckBoxRole]);
+  }
+}
+
+// `accessibilityLabelledBy`: another view, named by its `nativeID`, whose text
+// names this one.
+//
+// The first half is the mapping, which is this file's business and is one
+// property: AppKit's `accessibilityTitleUIElement` is a single element where the
+// prop and GTK's relation are both lists, so the first is used.
+//
+// The second half -- resolving a `nativeID` to a view, and resolving it *late*,
+// since Fabric mounts a field before the label that follows it -- is in
+// core/LabelRegistry.h with its own tests, and the mounting manager's use of it
+// is checked through a real transaction in test_appkit_mounting.mm.
+TEST(accessibility_labelled_by_points_at_the_labelling_view) {
+  @autoreleasepool {
+    RnAppKitView *field = [RnAppKitView viewWithTag:10];
+    RnAppKitView *label = [RnAppKitView viewWithTag:20];
+
+    EXPECT(field.accessibilityTitleUIElement == nil);
+    [field setRnLabelledBy:@[label]];
+    EXPECT(field.accessibilityTitleUIElement == label);
+    // And it is worth announcing now: its name lives on another view, so a field
+    // left out of the tree would be unreachable with the label read out beside
+    // nothing.
+    EXPECT(field.isAccessibilityElement);
+
+    // Taken off again, which is what an unmounted label leaves behind.
+    [field setRnLabelledBy:@[]];
+    EXPECT(field.accessibilityTitleUIElement == nil);
+  }
+}
+
+// Several labels: AppKit takes the first and the rest are still reported, so the
+// two hosts' dumps match and the difference stays in what each platform does.
+TEST(accessibility_labelled_by_takes_the_first_of_several) {
+  @autoreleasepool {
+    RnAppKitView *field = [RnAppKitView viewWithTag:10];
+    RnAppKitView *heading = [RnAppKitView viewWithTag:20];
+    RnAppKitView *hint = [RnAppKitView viewWithTag:30];
+
+    [field setRnLabelledBy:@[heading, hint]];
+    EXPECT(field.accessibilityTitleUIElement == heading);
+
+    const std::string described = [field describeTree].UTF8String;
+    EXPECT(described.find("labelled-by=20,30") != std::string::npos);
+  }
+}
+
+// `testID`, which on this platform is `accessibilityIdentifier`: what XCTest,
+// Appium and the Accessibility Inspector look a view up by, and the nearest
+// thing macOS has to UIA's automation id.
+TEST(a_test_id_becomes_the_accessibility_identifier) {
+  @autoreleasepool {
+    RnAppKitView *view = [RnAppKitView viewWithTag:1];
+    EXPECT(view.accessibilityIdentifier == nil || view.accessibilityIdentifier.length == 0);
+
+    view.rnTestId = @"save-button";
+    // Through a nil-safe read, because the sabotage that proves this test --
+    // taking the identifier away -- would otherwise make `std::string(nullptr)`
+    // crash the whole suite instead of failing this one test. A test that dies
+    // reports nothing about the other 543.
+    const char *identifier = view.accessibilityIdentifier.UTF8String;
+    EXPECT_EQ(std::string(identifier != nullptr ? identifier : ""), std::string("save-button"));
+    // And React Native's spelling in the dump, which is what the cross-platform
+    // diff compares.
+    EXPECT(std::string([view describeTree].UTF8String).find("testid=save-button")
+           != std::string::npos);
+
+    // Taken away again: nil rather than an empty identifier, because a runner
+    // searching for "" would otherwise match the first view it saw.
+    view.rnTestId = @"";
+    EXPECT(view.accessibilityIdentifier == nil);
+    EXPECT(std::string([view describeTree].UTF8String).find("testid=") == std::string::npos);
+  }
+}
+
+// `accessibilityViewIsModal`, which AppKit spells `accessibilityModal`: inside
+// a modal element VoiceOver stops offering the siblings behind it.
+TEST(a_modal_view_sets_accessibility_modal) {
+  @autoreleasepool {
+    RnAppKitView *view = [RnAppKitView viewWithTag:1];
+    EXPECT(!view.isAccessibilityModal);
+    EXPECT(std::string([view describeTree].UTF8String).find(" modal") == std::string::npos);
+
+    view.rnAccessibleModal = YES;
+    EXPECT(view.isAccessibilityModal);
+    EXPECT(std::string([view describeTree].UTF8String).find(" modal") != std::string::npos);
+
+    // And back, because a <Modal> that closes has to stop trapping the reader.
+    view.rnAccessibleModal = NO;
+    EXPECT(!view.isAccessibilityModal);
+    EXPECT(std::string([view describeTree].UTF8String).find(" modal") == std::string::npos);
+  }
+}
+
+// `experimental_accessibilityOrder`: the children a view wants read, in the
+// order it gave rather than the order they mounted.
+//
+// AppKit expresses it by replacing `accessibilityChildren`, which is what
+// VoiceOver walks in place of the view hierarchy. GTK says the same thing as an
+// `aria-flowto` relation, its accessible tree following the widget tree with no
+// equivalent override; both print the resolved tags, so the dumps compare.
+TEST(an_accessibility_order_replaces_the_accessibility_children) {
+  @autoreleasepool {
+    RnAppKitView *parent = [RnAppKitView viewWithTag:10];
+    RnAppKitView *first = [RnAppKitView viewWithTag:20];
+    RnAppKitView *second = [RnAppKitView viewWithTag:30];
+
+    // What AppKit answers for itself, which is not nil: `accessibilityChildren`
+    // is computed from the view hierarchy when nothing overrides it, so the
+    // assertion below is about the content and not about the property being
+    // unset. Measured rather than assumed -- the first version of this test
+    // expected nil and failed on the line before the feature was exercised.
+    const NSUInteger byHierarchy = parent.accessibilityChildren.count;
+
+    // Deliberately not the tag order: the prop exists to override it.
+    [parent setRnAccessibilityOrder:@[second, first]];
+    EXPECT(parent.accessibilityChildren.count == 2);
+    EXPECT(parent.accessibilityChildren.firstObject == second);
+    EXPECT(parent.accessibilityChildren.lastObject == first);
+    EXPECT(std::string([parent describeTree].UTF8String).find("a11y-order=30,20")
+           != std::string::npos);
+
+    // Taken away again puts the view hierarchy back, which is what a view that
+    // stopped asking means. The setter passes nil rather than an empty array:
+    // an empty array is a claim that the view has no accessible children at
+    // all, where nil is "ask the hierarchy", which is what this reads back.
+    [parent setRnAccessibilityOrder:@[]];
+    EXPECT_EQ(parent.accessibilityChildren.count, byHierarchy);
+    EXPECT(std::string([parent describeTree].UTF8String).find("a11y-order=")
+           == std::string::npos);
+  }
+}
+
+// Subroles, which are how macOS says the four things a role cannot.
+//
+// The role maps a search field to a text field, a switch and a toggle button to
+// check boxes, and a tab to a radio button -- each losing the part that says
+// what it is. GTK needs none of this, those being roles of their own there,
+// which is why it was a macOS entry.
+TEST(a_role_that_macos_says_with_a_subrole_gets_one) {
+  @autoreleasepool {
+    RnAppKitView *search = viewWithRole(@"search");
+    EXPECT_EQ(search.accessibilityRole, NSAccessibilityTextFieldRole);
+    EXPECT_EQ(search.accessibilitySubrole, NSAccessibilitySearchFieldSubrole);
+
+    RnAppKitView *switched = viewWithRole(@"switch");
+    EXPECT_EQ(switched.accessibilityRole, NSAccessibilityCheckBoxRole);
+    EXPECT_EQ(switched.accessibilitySubrole, NSAccessibilitySwitchSubrole);
+
+    RnAppKitView *toggle = viewWithRole(@"togglebutton");
+    EXPECT_EQ(toggle.accessibilityRole, NSAccessibilityCheckBoxRole);
+    EXPECT_EQ(toggle.accessibilitySubrole, NSAccessibilityToggleSubrole);
+
+    RnAppKitView *tab = viewWithRole(@"tab");
+    EXPECT_EQ(tab.accessibilityRole, NSAccessibilityRadioButtonRole);
+    EXPECT_EQ(tab.accessibilitySubrole, NSAccessibilityTabButtonSubrole);
+  }
+}
+
+// And nothing else gets one: a subrole AppKit does not know tells VoiceOver
+// less than none, and a view with no subrole is read by its role.
+TEST(an_ordinary_role_gets_no_subrole) {
+  @autoreleasepool {
+    RnAppKitView *button = viewWithRole(@"button");
+    EXPECT(button.accessibilitySubrole == nil);
+
+    RnAppKitView *text = viewWithRole(@"text");
+    EXPECT(text.accessibilitySubrole == nil);
+  }
+}
+
+// A role that goes away takes its subrole with it. Without that a view whose
+// prop was removed would keep announcing itself as a switch.
+TEST(a_role_taken_away_takes_its_subrole) {
+  @autoreleasepool {
+    RnAppKitView *view = viewWithRole(@"switch");
+    EXPECT_EQ(view.accessibilitySubrole, NSAccessibilitySwitchSubrole);
+
+    [view setRnAccessibleRole:nil];
+    EXPECT(view.accessibilitySubrole == nil);
+    EXPECT(!view.isAccessibilityElement);
+  }
+}
+
+// And a role *changing* replaces the subrole rather than keeping the old one,
+// which is the case AppKit allows and GTK cannot: a GtkAccessible's role is
+// construct-only.
+TEST(a_role_change_replaces_the_subrole) {
+  @autoreleasepool {
+    RnAppKitView *view = viewWithRole(@"switch");
+    EXPECT_EQ(view.accessibilitySubrole, NSAccessibilitySwitchSubrole);
+
+    [view setRnAccessibleRole:@"search"];
+    EXPECT_EQ(view.accessibilitySubrole, NSAccessibilitySearchFieldSubrole);
+
+    [view setRnAccessibleRole:@"button"];
+    EXPECT(view.accessibilitySubrole == nil);
+  }
+}