test the "Do not use" (remove proposed drive) menu item

Imitated the partition test, but new fun!

test fails with:
    A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.

web/src/components/storage/DriveEditor.test.tsx

@@ -63,12 +63,14 @@ const mockDrive: ConfigModel.Drive = {
   ],
 };
 
+const mockDeleteDrive = jest.fn();
 const mockDeletePartition = jest.fn();
+
 // TODO: why does "~/queries/storage" work elsewhere??
 jest.mock("~/queries/storage/config-model", () => ({
   ...jest.requireActual("~/queries/storage/config-model"),
   useConfigModel: () => ({ drives: [mockDrive] }),
-  useDrive: () => mockDrive,
+  useDrive: () => ({ delete: mockDeleteDrive }),
   usePartition: () => ({ delete: mockDeletePartition }),
 }));
 
@@ -78,7 +80,7 @@ const props: DriveEditorProps = {
 };
 
 describe("PartitionMenuItem", () => {
-  it("allows users delete a the partition", async () => {
+  it("allows users to delete the partition", async () => {
     const { user } = plainRender(<DriveEditor {...props} />);
 
     const partitionsButton = screen.getByRole("button", { name: "Partitions" });
@@ -91,3 +93,18 @@ describe("PartitionMenuItem", () => {
     expect(mockDeletePartition).toHaveBeenCalled();
   });
 });
+
+describe("RemoveDriveOption", () => {
+  it("allows users to delete the drive", async () => {
+    const { user } = plainRender(<DriveEditor {...props} />);
+
+    const driveButton = screen.getByRole("button", { name: "Drive" });
+    await user.click(driveButton);
+    const drivesMenu = screen.getByRole("menu");
+    const deleteDriveButton = within(drivesMenu).getByRole("menuitem", {
+      name: "Do not use",
+    });
+    await user.click(deleteDriveButton);
+    expect(mockDeleteDrive).toHaveBeenCalled();
+  });
+});

web/src/components/storage/DriveEditor.tsx

@@ -403,14 +403,19 @@ const RemoveDriveOption = ({ drive }) => {
   return (
     <>
       <Divider component="hr" />
-      <MenuItem description={_("REMOVE the configuration for this device")} onClick={deleteDrive}>
+      <MenuItem
+        isDanger
+        description={_("Remove the configuration for this device")}
+        onClick={deleteDrive}
+      >
         {_("Do not use")}
       </MenuItem>
     </>
   );
 };
 
-const DriveSelector = ({ drive, selected }) => {
+const DriveSelector = ({ drive, selected, toggleAriaLabel }) => {
+  const menuId = useId();
   const menuRef = useRef();
   const toggleMenuRef = useRef();
   const [isOpen, setIsOpen] = useState(false);
@@ -427,8 +432,14 @@ const DriveSelector = ({ drive, selected }) => {
       onOpenChange={setIsOpen}
       toggleRef={toggleMenuRef}
       toggle={
-        <InlineMenuToggle ref={toggleMenuRef} onClick={onToggle} isExpanded={isOpen}>
-          <b>{deviceLabel(selected)}</b>
+        <InlineMenuToggle
+          ref={toggleMenuRef}
+          onClick={onToggle}
+          isExpanded={isOpen}
+          aria-label={toggleAriaLabel}
+          aria-controls={menuId}
+        >
+          <b aria-hidden>{deviceLabel(selected)}</b>
         </InlineMenuToggle>
       }
       menuRef={menuRef}
@@ -510,7 +521,12 @@ const DriveHeader = ({ drive, driveDevice }: DriveEditorProps) => {
   return (
     <h4>
       <span>{txt1}</span>
-      <DriveSelector drive={drive} selected={driveDevice} />
+      {
+        // how do I even make a translator comment in the syntactic context of a JSX component?
+        // FIXME: what label makes sense?
+        // TRANSLATORS: ...
+      }
+      <DriveSelector drive={drive} selected={driveDevice} toggleAriaLabel={_("Drive")} />
       <span>{txt2}</span>
     </h4>
   );