chore(web): update to PatternFly 6.2

web/package.json

@@ -100,9 +100,9 @@
   "dependencies": {
     "@date-fns/tz": "^1.1.2",
     "@material-symbols/svg-400": "^0.29.2",
-    "@patternfly/patternfly": "^6.1.0",
-    "@patternfly/react-core": "^6.1.0",
-    "@patternfly/react-table": "^6.1.0",
+    "@patternfly/patternfly": "^6.2.3",
+    "@patternfly/react-core": "^6.2.2",
+    "@patternfly/react-table": "^6.2.2",
     "@tanstack/react-query": "^5.49.2",
     "axios": "^1.7.3",
     "fast-sort": "^3.4.0",

web/src/components/network/WifiNetworksList.test.tsx

@@ -20,7 +20,7 @@
  */
 
 import React from "react";
-import { screen, within } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 import { installerRender } from "~/test-utils";
 import WifiNetworksList from "~/components/network/WifiNetworksList";
 import {
@@ -120,41 +120,35 @@ describe("WifiNetworksList", () => {
     it("renders a list of available wifi networks", () => {
       // @ts-expect-error: you need to specify the aria-label
       installerRender(<WifiNetworksList />);
-      screen.getByRole("listitem", { name: "Secured network Network 1 Weak signal" });
-      screen.getByRole("listitem", { name: "Secured network Network 2 Excellent signal" });
-      screen.getByRole("listitem", { name: "Public network Network 3 Good signal" });
+      screen.getByLabelText("Secured network Network 1 Weak signal");
+      screen.getByLabelText("Secured network Network 2 Excellent signal");
+      screen.getByLabelText("Public network Network 3 Good signal");
     });
 
-    it("renders a spinner in network in connecting state", () => {
+    it("renders a spinner for network in connecting state", () => {
       // @ts-expect-error: you need to specify the aria-label
       installerRender(<WifiNetworksList />);
-      const network2 = screen.getByRole("listitem", {
-        name: "Secured network Network 2 Excellent signal",
-      });
-      within(network2).getByRole("progressbar", { name: "Connecting to Network 2" });
+      screen.getByLabelText("Secured network Network 2 Excellent signal");
+      screen.getByRole("progressbar", { name: "Connecting to Network 2" });
     });
 
     describe.skip("and user selects a connected network", () => {
       it("renders basic network information and actions instead of the connection form", async () => {
         // @ts-expect-error: you need to specify the aria-label
         const { user } = installerRender(<WifiNetworksList />);
-        const network1 = screen.getByRole("listitem", {
-          name: "Secured network Network 1 Weak signal",
-        });
+        const network1 = screen.getByLabelText("Secured network Network 1 Weak signal");
         await user.click(network1);
         screen.getByRole("heading", { name: "Connection details" });
         expect(screen.queryByRole("form", { name: "Wi-Fi connection form" })).toBeNull();
-        screen.getByText("192.168.69.201/24");
+        screen.getByLabelText("192.168.69.201/24");
       });
     });
 
     describe.skip("and user selects a configured network", () => {
       it("renders the connection form", async () => {
         // @ts-expect-error: you need to specify the aria-label
         const { user } = installerRender(<WifiNetworksList />);
-        const network2 = screen.getByRole("listitem", {
-          name: "Secured network Network 2 Excellent signal",
-        });
+        const network2 = screen.getByLabelText("Secured network Network 2 Excellent signal");
         await user.click(network2);
         screen.getByRole("heading", { name: "Connect to Network 2" });
         screen.queryByRole("form", { name: "Wi-Fi connection form" });
@@ -167,9 +161,7 @@ describe("WifiNetworksList", () => {
       it("renders the connection form", async () => {
         // @ts-expect-error: you need to specify the aria-label
         const { user } = installerRender(<WifiNetworksList />);
-        const network3 = screen.getByRole("listitem", {
-          name: "Public network Network 3 Good signal",
-        });
+        const network3 = screen.getByLabelText("Public network Network 3 Good signal");
         await user.click(network3);
         screen.getByRole("heading", { name: "Connect to Network 3" });
         screen.queryByRole("form", { name: "Wi-Fi connection form" });

web/src/components/network/WifiNetworksList.tsx

@@ -113,18 +113,19 @@ const NetworkListItem = ({ network, connection, showIp }: NetworkListItemProps)
   const ipId = useId();
 
   return (
-    <DataListItem
-      id={network.ssid}
-      aria-labelledby={`${securityId} ${nameId} ${signalId}`}
-      aria-describedby={ipId}
-    >
+    <DataListItem>
       <DataListItemRow>
         <DataListItemCells
           dataListCells={[
             <DataListCell key="ssid-status-and-ip">
               <Flex gap={{ default: "gapXs" }} direction={{ default: "column" }}>
                 <Flex columnGap={{ default: "columnGapXs" }}>
-                  <Content id={nameId} isEditorial>
+                  <Content
+                    id={nameId}
+                    isEditorial
+                    aria-labelledby={`${securityId} ${nameId} ${signalId}`}
+                    aria-describedby={ipId}
+                  >
                     {network.ssid}
                   </Content>
                   {connection?.state === ConnectionState.activated && (

web/src/components/software/SoftwarePatternsSelection.test.tsx

@@ -69,12 +69,8 @@ describe("SoftwarePatternsSelection", () => {
     expect(headingsText).toEqual(["Desktop Functions"]);
 
     const desktopGroup = screen.getByRole("list", { name: "Desktop Functions" });
-    expect(
-      within(desktopGroup).queryByRole("listitem", { name: /Multimedia/ }),
-    ).toBeInTheDocument();
-    expect(
-      within(desktopGroup).queryByRole("listitem", { name: /Office Software/ }),
-    ).not.toBeInTheDocument();
+    expect(within(desktopGroup).queryByText(/Multimedia$/)).toBeInTheDocument();
+    expect(within(desktopGroup).queryByText(/Office Software/)).not.toBeInTheDocument();
   });
 
   it("displays the checkbox reflecting the current pattern selection status", async () => {
@@ -83,21 +79,24 @@ describe("SoftwarePatternsSelection", () => {
     // the "Base Technologies" pattern group
     const baseGroup = await screen.findByRole("list", { name: "Base Technologies" });
 
-    const basisItem = within(baseGroup).getByRole("listitem", { name: /YaST Base/ });
-    const basisCheckbox = await within(basisItem).findByRole("checkbox");
+    const basisCheckbox = await within(baseGroup).findByRole("checkbox", {
+      name: /Unselect YaST Base/,
+    });
     expect(basisCheckbox).toBeChecked();
 
-    const serverItem = within(baseGroup).getByRole("listitem", { name: /YaST Server/ });
-    const serverCheckbox = await within(serverItem).findByRole("checkbox");
+    const serverCheckbox = await within(baseGroup).findByRole("checkbox", {
+      name: /Select YaST Server/,
+    });
     expect(serverCheckbox).not.toBeChecked();
   });
 
   it("allows changing the selection", async () => {
     const { user } = installerRender(<SoftwarePatternsSelection />);
     const y2BasisPattern = testingPatterns.find((p) => p.name === "yast2_basis");
 
-    const basisItem = screen.getByRole("listitem", { name: y2BasisPattern.summary });
-    const basisCheckbox = await within(basisItem).findByRole("checkbox");
+    const basisCheckbox = await screen.findByRole("checkbox", {
+      name: `Unselect ${y2BasisPattern.summary}`,
+    });
     expect(basisCheckbox).toBeChecked();
 
     await user.click(basisCheckbox);

web/src/components/software/SoftwarePatternsSelection.tsx

@@ -146,7 +146,7 @@ function SoftwarePatternsSelection(): React.ReactNode {
             const nextActionId = `${option.name}-next-action`;
 
             return (
-              <DataListItem key={option.name} aria-labelledby={titleId} aria-describedby={descId}>
+              <DataListItem key={option.name}>
                 <DataListItemRow>
                   <DataListCheck
                     onChange={() => onToggle(option.name)}