merge: upstream v0.25.0 into lotus

Merge upstream element-hq/element-call tag v0.25.0 into the Lotus fork (previous base: v0.20.1; actual merge-base v0.20.1-rc.1). Every Lotus feature and all six io.lotus.* widget actions are preserved. Version bumped to 0.25.0-lotus.1. Conflict files and how each Lotus hunk was re-expressed: * src/state/CallViewModel/remoteMembers/ConnectionFactory.ts Upstream moved echoCancellation/noiseSuppression/autoGainControl from constructor params (fed by URL params) to persisted Settings (settings.ts) with a developer-settings UI. The cinny host still drives these per call via URL params (noiseSuppression=false / autoGainControl=false when the in-source ML denoiser is active, so the model gets a raw mic) - taking upstream verbatim would silently break the ML denoise tier. Re-wired as AND semantics in generateRoomOption(): a constraint is enabled only if BOTH the Setting and the URL param allow it. Params default to true, so with no params this is byte-for-byte upstream behaviour. Upstream's own echoCancellation / noiseSuppression URL params (still parsed but dead in v0.25.0) work again as a side effect. Lotus autoGainControl URL param kept in UrlParams.ts (auto-merged, unchanged). * src/state/CallViewModel/remoteMembers/ECConnectionFactory.test.ts Took upstream (tests now drive via Settings). The lost Lotus coverage is restored in a NEW colocated file src/lotus/lotusAudioConstraints.test.ts (3 tests) so the upstream test file stays pristine. Verified the new test fails against pure-upstream ConnectionFactory and passes with the re-wiring. * src/state/CallViewModel/CallViewModel.ts Three small hunks: kept both the Lotus `userMedia$` interface member and upstream's new `keyRotationSuppressed$`; dropped the three Lotus audio constructor args (mechanism removed upstream, see above); kept both in the returned object. The [lotus #4] overrideSpotlight$ routing, manualSpotlightUserId$ and setManualSpotlight auto-merged; verified against upstream's changed ringingMedia$ (now single-or-null instead of array) - the merge correctly took upstream's outer branch and the inner screenShares$/spotlightSpeaker$ logic that lotusSpotlight.ts mirrors is unchanged upstream. * src/index.css Kept both: Lotus lotus-transparent / lotus-theme blocks and upstream's new body[data-background="gradient"]::before full-viewport gradient. The naive merge swallowed the closing brace of body.lotus-theme - restored. Added a rule hiding the new gradient pseudo-element under body.lotus-transparent, since it would otherwise paint over the transparent body and hide the host wallpaper. * src/components/CallFooterViewModel.tsx, src/components/CallFooter.stories.tsx No Lotus content - pure upstream-vs-upstream conflicts caused by the merge base being v0.20.1-rc.1. Took upstream (layoutMode -> layoutSwitchVm; setLayoutMode removed). No Lotus code uses setGridMode/layoutMode. Non-conflicting but reviewed: * src/widget.ts auto-merged cleanly. Upstream's removal of .well-known transport advertisement and the new RTC-transport capability request did not touch the action registration loop the LOTUS_TO_WIDGET_ACTIONS spread and widget.lazyActions ride on - nothing to re-wire. * src/room/InCallView.tsx, src/useAudioContext.tsx, src/useTheme.ts, src/tile/MediaView.tsx(+.module.css), src/UrlParams.ts(+test), all *.module.css and .gitea/workflows/ci.yml auto-merged; each diff against v0.25.0 was checked to equal the original Lotus hunk. * src/button/Button.module.css: the merge appended an exact duplicate of upstream's `.rotate`/`@keyframes spin` block (rc.1 merge-base artefact) - reset to upstream verbatim. * src/grid/OneOnOnePortraitLayout.module.css was renamed upstream to OneOnOneMobileLayout.module.css; git followed the rename and the Lotus safe-area PiP inset fix applies there (the --content-inset-* vars it uses still exist upstream). Tooling changes inherited from upstream that affect the fork: * eslint + prettier were replaced by oxlint + oxfmt (`pnpm lint:oxlint`, `pnpm format:check`). oxlint flagged 10 issues, all in src/lotus/*: 8x no-meaningless-void-operator (dropped the `void` before void-typed widget transport.reply / callbacks - no behaviour change), 1x consistent-type-imports (lotusWidget.ts: `import type`), and 2x unicorn/no-useless-spread in lotusAudioInject.ts which are FALSE POSITIVES - `[...activeClips]` is a required defensive copy because abort() deletes from the Set during iteration; suppressed with an explanatory eslint-disable-next-line. oxfmt reformatted 7 Lotus touched files (whitespace only). * packageManager bumped by upstream to pnpm@11.21.0, which requires Node >= 22.13 (uses node:sqlite). Node 20 cannot run it; pnpm 10.33 cannot read the new lockfile either (matrix-js-sdk is now a git dependency on develop, using a version-union pnpm 10 rejects). Fork CI already uses Node 24 (.node-version), so CI is unaffected. * matrix-js-sdk is now github:matrix-org/matrix-js-sdk#develop (pinned by commit in pnpm-lock.yaml). Lotus behaviour NOT preserved: none found. Verification (Node 24.11.1, pnpm 11.21.0): pnpm install --frozen-lockfile OK (lockfile taken from upstream unchanged, no regeneration needed); tsc clean; oxlint clean; oxfmt --check clean; knip exit 0 (2 config hints in upstream knip.ts only); vitest unit 84 files / 627 passed / 9 skipped; build:embedded OK, staged to embedded/web/dist (44M), all six io.lotus.* action strings present in the bundle. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
2026-09-12 11:35:57 -04:00
parent e36aef8aa3 efde51b8c1
commit c6f9727870
243 changed files with 13311 additions and 10280 deletions
@@ -19,11 +19,6 @@ Please see LICENSE in the repository root for full details.
  padding-right: calc(env(safe-area-inset-right) + var(--cpd-space-6x));
  padding-block: var(--cpd-space-10x)
    calc(env(safe-area-inset-bottom) + var(--cpd-space-10x));
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0) 0%,
-    var(--cpd-color-bg-canvas-default) 100%
-  );
 }

 .footer.hidden {
@@ -16,10 +16,12 @@ import inCallViewStyles from "../room/InCallView.module.css";
 import { useStaticViewModel } from "../state/ViewModel";
 import { ReactionsSenderContext } from "../reactions/useReactionsSender";
 import { type ReactionOption } from "../reactions";
-import { type GridMode } from "../state/CallViewModel/CallViewModel";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { MediaDevices } from "../state/MediaDevices";
 import { globalScope } from "../state/ObservableScope";
+import { constant } from "../state/Behavior";
+import { type LayoutMode } from "../state/LayoutSwitchViewModel";
+
 // consts for tests
 const reactionIdentifier = "@user:example.com:DEVICE";
 const reactionData = {
@@ -32,6 +34,7 @@ const mediaDevices = new MediaDevices(globalScope);
 /**
 * A wrapper component that is used for:
 *  - exposing the snapshot via props so the storybook documents the snapshot properties (basically unpack them form the vm)
+ *  - constructing the layout switch view model
 *  - Add additional react context
 * The paraeters are all params from the FooterSnapshot,
 * the Snapshot of the vm, the wrapper will create a mocked vm from it and pass it to the CallFooter.
@@ -40,11 +43,18 @@ const mediaDevices = new MediaDevices(globalScope);
 */
 function CallFooterStoryWrapper({
  children,
+  layout,
+  setLayout,
  ...vmSnapshot
-}: FooterSnapshot & {
+}: Omit<FooterSnapshot, "layoutSwitchVm"> & {
  children?: false | JSX.Element | JSX.Element[] | undefined;
+  layout: LayoutMode | null;
+  setLayout: (value: LayoutMode) => void;
 }): ReactNode {
-  const vm = useStaticViewModel(vmSnapshot);
+  const vm = useStaticViewModel({
+    ...vmSnapshot,
+    layoutSwitchVm: layout && { layout$: constant(layout), setLayout },
+  });
  return (
    <MediaDevicesContext value={mediaDevices}>
      <div className={inCallViewStyles.inRoom}>
@@ -62,28 +72,50 @@ function CallFooterStoryWrapper({
  );
 }

-const meta = {
-  component: CallFooterStoryWrapper,
-} satisfies Meta<typeof CallFooterStoryWrapper>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
 const fnArgType = {
  control: { type: "select" as const },
  options: ["MockedCallback", "undefined"],
  mapping: { MockedCallback: fn(), undefined: undefined },
 };

+const meta = {
+  component: CallFooterStoryWrapper,
+  argTypes: {
+    layout: {
+      control: "radio",
+      options: ["grid", "spotlight"] satisfies LayoutMode[],
+    },
+    audioOutputSwitcher: {
+      control: "select",
+      options: ["NoOutputCallback", "speaker", "earpiece"],
+      table: { defaultValue: { summary: "NoOutputCallback" } },
+      mapping: {
+        NoOutputCallback: undefined,
+        // This is inverersed (speaker<->earpice) because the switcher object stores the target output, not the current one.
+        speaker: { targetOutput: "earpiece", switch: fn() },
+        earpiece: { targetOutput: "speaker", switch: fn() },
+      },
+    },
+    toggleScreenSharing: fnArgType,
+    openSettings: fnArgType,
+    toggleAudio: fnArgType,
+    toggleVideo: fnArgType,
+    hangup: fnArgType,
+  },
+} satisfies Meta<typeof CallFooterStoryWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
 export const Default: Story = {
  args: {
    showLogo: false,
-    layoutMode: "grid",
+    layout: "grid",
+    setLayout: fn(),
    audioEnabled: true,
    audioBusy: false,
    videoEnabled: true,
    videoBusy: false,
-    setLayoutMode: fn(),
    openSettings: fn(),
    toggleAudio: fn(),
    toggleVideo: fn(),
@@ -95,6 +127,7 @@ export const Default: Story = {
    showFooter: true,
    hideControls: false,
    asOverlay: false,
+    showModals: true,
    sharingScreen: false,
    audioOutputSwitcher: undefined,
    reactionIdentifier: undefined,
@@ -111,29 +144,6 @@ export const Default: Story = {
  parameters: {
    layout: "fullscreen",
  },
-  argTypes: {
-    layoutMode: {
-      control: "radio",
-      options: ["grid", "spotlight"] satisfies GridMode[],
-    },
-    audioOutputSwitcher: {
-      control: "select",
-      options: ["NoOutputCallback", "speaker", "earpiece"],
-      table: { defaultValue: { summary: "NoOutputCallback" } },
-      mapping: {
-        NoOutputCallback: undefined,
-        // This is inverersed (speaker<->earpice) because the switcher object stores the target output, not the current one.
-        speaker: { targetOutput: "earpiece", switch: fn() },
-        earpiece: { targetOutput: "speaker", switch: fn() },
-      },
-    },
-    toggleScreenSharing: fnArgType,
-    setLayoutMode: fnArgType,
-    openSettings: fnArgType,
-    toggleAudio: fnArgType,
-    toggleVideo: fnArgType,
-    hangup: fnArgType,
-  },
 };

 export const WithAudioAndVideoOptions: Story = {
@@ -194,7 +204,7 @@ export const AudioVideoEnabled: Story = {

    const spotlightRadio = canvas.getByRole("radio", { name: "Spotlight" });
    await userEvent.click(spotlightRadio);
-    await expect(args.setLayoutMode).toHaveBeenCalledWith("spotlight");
+    await expect(args.setLayout).toHaveBeenCalledWith("spotlight");

    const micButtonMute = canvas.getByRole("switch", {
      name: "Mute microphone",
@@ -225,14 +235,14 @@ export const SpotlightMode: Story = {
  ...Default,
  args: {
    ...Default.args,
-    layoutMode: "spotlight",
+    layout: "spotlight",
  },
  play: async ({ args, canvasElement }) => {
    const canvas = within(canvasElement);

    const spotlightRadio = canvas.getByRole("radio", { name: "Grid" });
    await userEvent.click(spotlightRadio);
-    await expect(args.setLayoutMode).toHaveBeenCalledWith("grid");
+    await expect(args.setLayout).toHaveBeenCalledWith("grid");
  },
 };

@@ -264,7 +274,7 @@ export const Pip: Story = {
  args: {
    ...Default.args,
    buttonSize: "md",
-    layoutMode: undefined,
+    layout: null,
  },
  play: async ({ args, canvasElement }) => {
    const canvas = within(canvasElement);
@@ -348,7 +358,7 @@ export const Lobby: Story = {
    ...Default.args,
    showLogo: false,
    openSettings: undefined,
-    setLayoutMode: undefined,
+    layout: null,
    toggleScreenSharing: undefined,
  },
  parameters: {
@@ -362,7 +372,7 @@ export const LobbyMobile: Story = {
    ...Default.args,
    showLogo: false,

-    setLayoutMode: undefined,
+    layout: null,
    toggleScreenSharing: undefined,
  },
  globals: {
@@ -379,7 +389,7 @@ export const LobbyRecentButton: Story = {
    ...Default.args,
    children: <Link>Back To Recents</Link>,
    showLogo: false,
-    setLayoutMode: undefined,
+    layout: null,
    toggleScreenSharing: undefined,
  },
  parameters: {
@@ -393,7 +403,7 @@ export const LobbyRecentButtonMobile: Story = {
    ...Default.args,
    children: <Link>Back To Recents</Link>,
    showLogo: false,
-    setLayoutMode: undefined,
+    layout: null,
    toggleScreenSharing: undefined,
  },
  globals: {
@@ -7,12 +7,6 @@ Please see LICENSE in the repository root for full details.

 import { type FC, type JSX, type Ref, useMemo } from "react";
 import classNames from "classnames";
-import {
-  SpotlightIcon,
-  GridIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
-import { Switch } from "@vector-im/compound-web";
-import { t } from "i18next";

 import LogoMark from "../icons/LogoMark.svg?react";
 import LogoType from "../icons/LogoType.svg?react";
@@ -28,13 +22,15 @@ import {
  type ReactionData,
 } from "../button";
 import styles from "./CallFooter.module.css";
-import { type GridMode } from "../state/CallViewModel/CallViewModel";
 import {
  MediaMuteAndSwitchButton,
  type MenuOptions,
 } from "./MediaMuteAndSwitchButton";
+import { type Behavior } from "../state/Behavior";
 import { type ViewModel } from "../state/ViewModel";
 import { useBehavior } from "../useBehavior";
+import { type LayoutSwitchViewModel } from "../state/LayoutSwitchViewModel";
+import { LayoutSwitch } from "../room/LayoutSwitch";

 export interface AudioOutputSwitcher {
  targetOutput: string;
@@ -61,8 +57,6 @@ export interface FooterActions {
  /** Also controls if the videoMute button is disabled */
  toggleVideo: (() => void) | undefined;
  toggleBlur: (() => void) | undefined;
-  /** Also controls if the layout button is visible */
-  setLayoutMode: ((mode: GridMode) => void) | undefined;
  toggleScreenSharing: (() => void) | undefined;
  /** Also controls if the settings button is visible */
  openSettings: (() => void) | undefined;
@@ -83,11 +77,13 @@ export interface FooterState {
  /** The footer should be used as an overlay.
   * (Over the Call Grid) This saves spaces on small screens. */
  asOverlay: boolean;
+  showModals: boolean;

  buttonSize: "md" | "lg";
  showLogo: boolean;

-  layoutMode: GridMode | undefined;
+  /** Also controls if the layout switch is visible */
+  layoutSwitchVm: LayoutSwitchViewModel | null;

  sharingScreen: boolean;

@@ -112,16 +108,22 @@ export interface FooterState {
 }

 export interface FooterProps {
+  className?: string;
  ref?: Ref<HTMLDivElement>;
  children?: JSX.Element | JSX.Element[] | false;
  vm: ViewModel<FooterSnapshot>;
 }
-export const CallFooter: FC<FooterProps> = ({ ref, children, vm }) => {
+export const CallFooter: FC<FooterProps> = ({
+  className,
+  ref,
+  children,
+  vm,
+}) => {
  const asOverlay = useBehavior(vm.asOverlay$);
  const showFooter = useBehavior(vm.showFooter$);
  const hideControls = useBehavior(vm.hideControls$);
-  const layoutMode = useBehavior(vm.layoutMode$);
-  const setLayoutMode = useBehavior(vm.setLayoutMode$);
+  const showModals = useBehavior(vm.showModals$);
+  const layoutSwitchVm = useBehavior(vm.layoutSwitchVm$);
  const openSettings = useBehavior(vm.openSettings$);
  const audioEnabled = useBehavior(vm.audioEnabled$);
  const audioBusy = useBehavior(vm.audioBusy$);
@@ -136,7 +138,6 @@ export const CallFooter: FC<FooterProps> = ({ ref, children, vm }) => {
  const audioOutputSwitcher = useBehavior(vm.audioOutputSwitcher$);
  const hangup = useBehavior(vm.hangup$);
  const debugTileLayout = useBehavior(vm.debugTileLayout$);
-  const tileStoreGeneration = useBehavior(vm.tileStoreGeneration$);
  const videoOptions = useBehavior(vm.videoOptions$);
  const selectedVideo = useBehavior(vm.selectedVideo$);
  const audioOptions = useBehavior(vm.audioOptions$);
@@ -236,7 +237,8 @@ export const CallFooter: FC<FooterProps> = ({ ref, children, vm }) => {
    );
  }

-  if (reactionIdentifier && reactionData) {
+  // Reaction button contains a pretty large menu, so treat it like a modal
+  if (reactionIdentifier && reactionData && showModals) {
    buttons.push(
      <ReactionToggleButton
        size={buttonSize}
@@ -284,7 +286,9 @@ export const CallFooter: FC<FooterProps> = ({ ref, children, vm }) => {
          />
        </>
      )}
-      {debugTileLayout ? `Tiles generation: ${tileStoreGeneration}` : undefined}
+      {debugTileLayout ? (
+        <TilesDebugInfo generation$={vm.tileStoreGeneration$} />
+      ) : undefined}
    </div>
  );

@@ -292,7 +296,7 @@ export const CallFooter: FC<FooterProps> = ({ ref, children, vm }) => {
    <div
      ref={ref}
      data-testid="footer-container"
-      className={classNames(styles.footer, {
+      className={classNames(className, styles.footer, {
        [styles.overlay]: asOverlay,
        [styles.hidden]: !showFooter,
      })}
@@ -311,21 +315,20 @@ export const CallFooter: FC<FooterProps> = ({ ref, children, vm }) => {
        {(showLogo || debugTileLayout) && logoDebugContainer}
      </div>
      {!hideControls && <div className={styles.buttons}>{buttons}</div>}
-      {!hideControls && setLayoutMode && layoutMode && (
-        <Switch<"spotlight", "grid">
-          name="layoutMode"
-          aria-label={t("layout_switch_label")}
-          leftLabel={t("layout_spotlight_label")}
-          leftValue="spotlight"
-          leftIcon={SpotlightIcon}
-          rightLabel={t("layout_grid_label")}
-          rightValue="grid"
-          rightIcon={GridIcon}
-          className={styles.layout}
-          value={layoutMode}
-          onChange={setLayoutMode}
-        />
+      {!hideControls && layoutSwitchVm && (
+        <LayoutSwitch vm={layoutSwitchVm} className={styles.layout} />
      )}
    </div>
  );
 };
+
+interface TilesDebugInfoProps {
+  generation$: Behavior<number | undefined>;
+}
+
+// Isolated in its own component since the layout generation updates frequently
+// and we can avoid re-rendering the footer this way
+const TilesDebugInfo: FC<TilesDebugInfoProps> = ({ generation$ }) => {
+  const generation = useBehavior(generation$);
+  return `Tiles generation: ${generation}`;
+};
@@ -49,6 +49,7 @@ function buildMinimalCallViewModel(layout: Layout): CallViewModel {
    reactions$: constant({}),
    tileStoreGeneration$: constant(0),
    showFooter$: constant(true),
+    showModals$: constant(true),
    settingsOpen$: constant(false),
    setSettingsOpen$: constant(() => {}),
  } as unknown as CallViewModel;
@@ -161,6 +161,7 @@ export function createCallFooterViewModel(
    // candidat to move into the FooterViewModel
    showFooter$: callModel.showFooter$,
    hideControls$: constant(!showControls),
+    showModals$: callModel.showModals$,
    asOverlay$: callModel.edgeToEdge$,
    buttonSize$: scope.behavior(
      isPip$.pipe(map<boolean, "md" | "lg">((pip) => (pip ? "md" : "lg"))),
@@ -168,14 +169,12 @@ export function createCallFooterViewModel(

    openSettings$: scope.behavior(
      combineLatest([
-        isPip$,
+        callModel.showModals$,
        callModel.showHeader$,
        callModel.setSettingsOpen$,
      ]).pipe(
-        map(([isPip, showHeader, setSettingsOpen]) =>
-          !isPip &&
-          !(headerStyle === HeaderStyle.AppBar && showHeader) &&
-          showControls
+        map(([showModals, showHeader, setSettingsOpen]) =>
+          showModals && headerStyle !== HeaderStyle.AppBar && showControls
            ? (): void => setSettingsOpen(true)
            : undefined,
        ),
@@ -184,14 +183,7 @@ export function createCallFooterViewModel(

    showLogo$: scope.behavior(isPip$.pipe(map((isPip) => showLogo && !isPip))),

-    layoutMode$: callModel.gridMode$,
-    setLayoutMode$: scope.behavior(
-      isPip$.pipe(
-        map((isPip) =>
-          !isPip && showControls ? callModel.setGridMode : undefined,
-        ),
-      ),
-    ),
+    layoutSwitchVm$: callModel.layoutSwitchVm$,

    sharingScreen$: callModel.sharingScreen$,
    toggleScreenSharing$: constant(callModel.toggleScreenSharing ?? undefined),
@@ -248,21 +240,20 @@ export function createLobbyFooterViewModel(
      showLogo,
      hideControls: false,
      asOverlay: false,
+      showModals: true,
      buttonSize: "lg",
-      showLayoutSwitcher: false,
      openSettings,
      hangup,
      debugTileLayout: false,
      showFooter: true,
      toggleAudio: undefined,
      toggleVideo: undefined,
-      setLayoutMode: undefined,
      toggleScreenSharing: undefined,
      audioEnabled: undefined,
      audioBusy: false,
      videoEnabled: undefined,
      videoBusy: false,
-      layoutMode: undefined,
+      layoutSwitchVm: null,
      sharingScreen: false,
      audioOutputSwitcher: undefined,
      reactionIdentifier: undefined,
@@ -180,12 +180,12 @@ describe("MediaMuteAndSwitchButton", () => {
    );

    await user.click(screen.getByRole("button", { name: "Microphone" }));
-    screen.getByRole("menuitem", { name: "Microphone 1" });
-    screen.getByRole("menuitem", { name: "Microphone 2" });
+    screen.getByRole("menuitemradio", { name: "Microphone 1" });
+    screen.getByRole("menuitemradio", { name: "Microphone 2" });
    await user.keyboard("[Escape]");
    await user.click(screen.getByRole("button", { name: "Camera" }));
-    screen.getByRole("menuitem", { name: "Camera 1" });
-    screen.getByRole("menuitem", { name: "Camera 2" });
+    screen.getByRole("menuitemradio", { name: "Camera 1" });
+    screen.getByRole("menuitemradio", { name: "Camera 2" });
  });

  test("calls select callback on menu click", async () => {
@@ -206,7 +206,9 @@ describe("MediaMuteAndSwitchButton", () => {
    );

    await user.click(getByRole("button", { name: "Microphone" }));
-    await user.click(screen.getByRole("menuitem", { name: "Microphone 2" }));
+    await user.click(
+      screen.getByRole("menuitemradio", { name: "Microphone 2" }),
+    );

    expect(onSelect).toHaveBeenCalledWith("mic2");
  });
@@ -228,7 +230,9 @@ describe("MediaMuteAndSwitchButton", () => {
    );

    await user.click(getByRole("button", { name: "Microphone" }));
-    await user.click(screen.getByRole("menuitem", { name: "Microphone 1" }));
+    await user.click(
+      screen.getByRole("menuitemradio", { name: "Microphone 1" }),
+    );

    expect(onSelect).not.toHaveBeenCalled();
  });
@@ -264,18 +268,24 @@ describe("MediaMuteAndSwitchButton", () => {
    const { getByRole } = renderComponent(<Wrapper />);

    await user.click(getByRole("button", { name: "Microphone" }));
-    await user.click(screen.getByRole("menuitem", { name: "Microphone 2" }));
+    await user.click(
+      screen.getByRole("menuitemradio", { name: "Microphone 2" }),
+    );

    expect(onSelectPressed).toHaveBeenCalled();
    expect(onOptionUpdated).not.toHaveBeenCalled();
    // After clicking, plannedSelection="mic2" but selectedOption is still "mic1",
-    // so a spinner should appear on the mic2 item
-    const mic2Item = screen.getByRole("menuitem", { name: "Microphone 2" });
-    expect(mic2Item.querySelector(".rotate")).toBeTruthy();
+    // so mic2 should be in an activating state
+    screen.getByRole("menuitemradio", {
+      name: "Microphone 2 Activating…",
+      checked: false,
+    });

-    // The currently-selected mic1 item should not have a spinner
-    const mic1Item = screen.getByRole("menuitem", { name: "Microphone 1" });
-    expect(mic1Item.querySelector(".rotate")).toBeNull();
+    // The currently-selected mic1 item should not be activating
+    screen.getByRole("menuitemradio", {
+      name: "Microphone 1",
+      checked: true,
+    });
    await act(async () => {
      // resolve the promise that acutally updates the select option.
      resolve();
@@ -284,7 +294,7 @@ describe("MediaMuteAndSwitchButton", () => {

    expect(onOptionUpdated).toHaveBeenCalled();
    // Spinner should now be gone since the selection has caught up
-    const mic2ItemAfter = screen.getByRole("menuitem", {
+    const mic2ItemAfter = screen.getByRole("menuitemradio", {
      name: "Microphone 2",
    });
    expect(mic2ItemAfter.querySelector(".rotate")).toBeNull();
@@ -336,11 +346,15 @@ describe("MediaMuteAndSwitchButton", () => {
    await user.click(getByRole("button", { name: "Microphone" }));

    // The selected item (mic2) renders both an IconOptions SVG and a CheckIcon SVG
-    const mic1Item = screen.getByRole("menuitem", { name: "Microphone 2" });
+    const mic1Item = screen.getByRole("menuitemradio", {
+      name: "Microphone 2",
+    });
    expect(mic1Item.querySelectorAll("svg").length).toBe(2);

    // The unselected item (mic1) only renders its IconOptions SVG
-    const mic2Item = screen.getByRole("menuitem", { name: "Microphone 1" });
+    const mic2Item = screen.getByRole("menuitemradio", {
+      name: "Microphone 1",
+    });
    expect(mic2Item.querySelectorAll("svg").length).toBe(1);
  });
 });
@@ -191,6 +191,7 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
                    width={24}
                    height={24}
                    className={styles.itemIcon}
+                    aria-hidden
                  />
                )
              }
@@ -201,10 +202,23 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
                onSelect?.(id);
              }}
              key={id}
+              role="menuitemradio"
+              aria-checked={selectedOption === id}
            >
-              {selectedOption === id && <CheckIcon width={24} height={24} />}
+              {selectedOption === id && (
+                <CheckIcon
+                  width={24}
+                  height={24}
+                  aria-hidden // A label would be redundant to aria-checked above
+                />
+              )}
              {selectedOption !== id && plannedSelection === id && (
-                <SpinnerIcon width={24} height={24} className={styles.rotate} />
+                <SpinnerIcon
+                  width={24}
+                  height={24}
+                  className={styles.rotate}
+                  aria-label={t("settings.devices.activating")}
+                />
              )}
            </MenuItem>
          );
@@ -3,7 +3,7 @@
 exports[`MediaMuteAndSwitchButton > renders 1`] = `
 <div>
  <div
-    class="container"
+    class="_container_e649de"
  >
    <button
      aria-busy="false"
@@ -35,7 +35,7 @@ exports[`MediaMuteAndSwitchButton > renders 1`] = `
      aria-expanded="false"
      aria-haspopup="menu"
      aria-label="Microphone"
-      class="_button_1nw83_8 menuButton _has-icon_1nw83_60 _icon-only_1nw83_53"
+      class="_button_1nw83_8 _menuButton_e649de _has-icon_1nw83_60 _icon-only_1nw83_53"
      data-kind="tertiary"
      data-size="lg"
      data-state="closed"