Cover the speaker section sitting above the microphone section

- Covers AC28, which `ux_design_shevron.png` settles.
- Not written in this session: it was uncommitted in the tree beforehand, and
  is committed here so it is not lost.

src/components/MediaMuteAndSwitchButton.test.tsx

@@ -532,6 +532,40 @@ describe("MediaMuteAndSwitchButton", () => {
     expect(await axe(menu as HTMLElement)).toHaveNoViolations();
   });
 
+  test("puts the speaker section above the microphone section", async () => {
+    const user = userEvent.setup();
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        title="Switcher"
+        iconsAndLabels="audio"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+        ]}
+        selectedOption="mic1"
+        onSelect={vi.fn()}
+        outputOptions={[
+          { label: { type: "name", name: "Speakers" }, id: "spk1" },
+          { label: { type: "name", name: "Headset" }, id: "spk2" },
+        ]}
+        selectedOutputOption="spk1"
+        onSelectOutput={vi.fn()}
+      />,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+
+    const speakers = screen.getByRole("menuitemradio", { name: "Speakers" });
+    const microphone = screen.getByRole("menuitemradio", {
+      name: "Microphone 1",
+    });
+    expect(
+      speakers.compareDocumentPosition(microphone) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
   test("lists speaker and microphone sections", async () => {
     const user = userEvent.setup();
     const { getByRole } = renderComponent(

src/components/MediaMuteAndSwitchButton.tsx

@@ -443,9 +443,9 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
         }
       >
         <div
+          ref={trackFocusModality}
           // Transparent to assistive technology, so the menu still sees its
           // items as its own children.
-          ref={trackFocusModality}
           role="none"
           className={styles.deviceList}
           style={