[web] Adapt storage/SpacePolicy selector to core/Selector

However, missing tests haven't been added because this selector is
subject to major changes in the short term according to
#103.

web/src/components/storage/ProposalSettingsSection.test.jsx

@@ -610,9 +610,9 @@ describe("Space policy field", () => {
 
       const popup = await screen.findByRole("dialog");
       within(popup).getByText("Space Policy");
-      within(popup).getByRole("option", { name: /Delete current content/ });
-      within(popup).getByRole("option", { name: /Shrink existing partitions/ });
-      within(popup).getByRole("option", { name: /Use available space/, selected: true });
+      within(popup).getByRole("row", { name: /Delete current content/ });
+      within(popup).getByRole("row", { name: /Shrink existing partitions/ });
+      within(popup).getByRole("row", { name: /Use available space/, selected: true });
     });
 
     it("allows to show the installation devices", async () => {
@@ -642,7 +642,7 @@ describe("Space policy field", () => {
         await user.click(button);
 
         const popup = await screen.findByRole("dialog");
-        const option = within(popup).getByRole("option", { name: /Shrink/ });
+        const option = within(popup).getByRole("row", { name: /Shrink/ });
 
         await user.click(option);
         const cancel = within(popup).getByRole("button", { name: "Cancel" });
@@ -661,7 +661,7 @@ describe("Space policy field", () => {
         await user.click(button);
 
         const popup = await screen.findByRole("dialog");
-        const option = within(popup).getByRole("option", { name: /Shrink/ });
+        const option = within(popup).getByRole("row", { name: /Shrink/ });
 
         await user.click(option);
         const accept = within(popup).getByRole("button", { name: "Accept" });

web/src/components/storage/space-policy-utils.jsx

@@ -25,23 +25,9 @@ import { _, n_ } from "~/i18n";
 import { sprintf } from "sprintf-js";
 import { noop } from "~/utils";
 import { Button, ExpandableSection, Hint, HintBody } from "@patternfly/react-core";
+import { Selector } from "~/components/core";
 import { DeviceList } from "~/components/storage";
 
-const ListBox = ({ children, ...props }) => <ul data-type="agama/list" data-of="agama/space-policies" {...props}>{children}</ul>;
-
-const ListBoxItem = ({ isSelected, children, onClick, ...props }) => {
-  if (isSelected) props['aria-selected'] = true;
-
-  return (
-    <li
-      onClick={onClick}
-      { ...props }
-    >
-      {children}
-    </li>
-  );
-};
-
 /**
  * Content for a space policy item
  * @component
@@ -91,10 +77,10 @@ Only the space that is not assigned to any partition will be used.");
   };
 
   return (
-    <>
+    <div data-items-type="agama/space-policies">
       <Title />
       <Description />
-    </>
+    </div>
   );
 };
 
@@ -108,19 +94,20 @@ Only the space that is not assigned to any partition will be used.");
  *  changes.
  */
 const SpacePolicySelector = ({ value, onChange = noop }) => {
+  const onSelectionChange = (selection) => onChange(selection[0]);
+
   return (
-    <ListBox aria-label={_("Select a mechanism to make space")} role="listbox">
+    <Selector
+      aria-label={_("Select a mechanism to make space")}
+      selectedIds={[value]}
+      onSelectionChange={onSelectionChange}
+    >
       { ["delete", "resize", "keep"].map(policy => (
-        <ListBoxItem
-          key={policy}
-          role="option"
-          onClick={() => onChange(policy)}
-          isSelected={policy === value}
-        >
+        <Selector.Option id={policy} key={policy}>
           <PolicyItem policy={policy} />
-        </ListBoxItem>
+        </Selector.Option>
       ))}
-    </ListBox>
+    </Selector>
   );
 };