fix(deps): update internal dependencies

cypress/support/step_definitions/login/login.steps.ts

@@ -19,10 +19,10 @@ When("the user enters invalid username and password", () => {
 });
 
 When("the user provides correct username and password", () => {
-  cy.get("input[name='username']").type(Cypress.env("username"));
+  cy.findByRole("textbox", { name: /Username/ }).type(Cypress.env("username"));
   cy.findByRole("button", { name: /Next/ }).click();
-  cy.get("input[name='password']").type(Cypress.env("password"));
-  cy.get("button[type='submit']").click();
+  cy.findByLabelText(/Password/).type(Cypress.env("password"));
+  cy.findByRole("button", { name: /Login/ }).click();
 });
 
 When("the user clicks on the {string} button", (buttonText: string) => {

cypress/support/step_definitions/settings/configuration/settingsConfigurationGeneral.steps.ts

@@ -4,7 +4,7 @@ Given("the default theme is applied", () => {
   cy.findByRole("radio", { name: "Default" }).click();
 
   cy.findByRole("button", { name: "Save" }).then(($button) => {
-    if ($button.is(":disabled")) {
+    if ($button.is("[aria-disabled='true']")) {
       return;
     }
 
@@ -28,7 +28,11 @@ Then(
 );
 
 Then("the {string} button should be disabled", (buttonName: string) => {
-  cy.findByRole("button", { name: buttonName }).should("be.disabled");
+  cy.findByRole("button", { name: buttonName }).should(
+    "have.attr",
+    "aria-disabled",
+    "true"
+  );
 });
 
 Then("the {string} checkbox should be checked", (label: string) => {

cypress/support/step_definitions/settings/configuration/settingsConfigurationKernelParameters.steps.ts

@@ -10,7 +10,7 @@ const getKernelParamsInput = () =>
 After({ tags: "@kernel-parameters-cleanup" }, () => {
   getKernelParamsInput().clear();
   getSaveButton().click();
-  getSaveButton().should("be.disabled");
+  getSaveButton().should("have.attr", "aria-disabled", "true");
 });
 
 When("the user clears the kernel parameters field", () => {
@@ -27,7 +27,7 @@ When("the user saves the kernel parameters", () => {
 });
 
 Then("the save button should be disabled", () => {
-  getSaveButton().should("be.disabled");
+  getSaveButton().should("have.attr", "aria-disabled", "true");
 });
 
 Then("the kernel parameters field should have the updated value", () => {

package.json

@@ -52,7 +52,7 @@
   "dependencies": {
     "@canonical/maas-react-components": "2.0.4",
     "@canonical/macaroon-bakery": "1.3.2",
-    "@canonical/react-components": "3.6.0",
+    "@canonical/react-components": "3.12.4",
     "@redux-devtools/extension": "3.3.0",
     "@reduxjs/toolkit": "2.11.2",
     "@sentry/browser": "7.119.2",
@@ -90,7 +90,7 @@
     "redux-saga": "1.4.3",
     "typed-redux-saga": "1.5.0",
     "typescript": "5.9.3",
-    "vanilla-framework": "4.37.2",
+    "vanilla-framework": "4.51.0",
     "vite": "6.4.2",
     "vite-plugin-svgr": "4.5.0",
     "vite-tsconfig-paths": "5.1.4",
@@ -99,7 +99,7 @@
   "devDependencies": {
     "@badeball/cypress-cucumber-preprocessor": "23.2.1",
     "@bahmutov/cypress-esbuild-preprocessor": "2.2.8",
-    "@canonical/typescript-config-react": "0.9.0",
+    "@canonical/typescript-config-react": "0.27.0",
     "@eslint/compat": "1.4.1",
     "@eslint/eslintrc": "3.3.5",
     "@eslint/js": "9.39.4",

src/app/base/components/ActionForm/ActionForm.test.tsx

@@ -75,7 +75,7 @@ describe("ActionForm", () => {
     expect(screen.getByTestId(TestIds.SavingLabel).textContent).toBe(
       "Processing 1 of 2 machines..."
     );
-    expect(screen.getByRole("button")).toBeDisabled();
+    expect(screen.getByRole("button")).toBeAriaDisabled();
   });
 
   it("disables the submit button when selectedCount equals 0", async () => {
@@ -89,7 +89,7 @@ describe("ActionForm", () => {
       />
     );
 
-    expect(screen.getByRole("button")).toBeDisabled();
+    expect(screen.getByRole("button")).toBeAriaDisabled();
   });
 
   it("can override showing the processing count", async () => {

src/app/base/components/FormikFormContent/FormikFormContent.test.tsx

@@ -80,7 +80,7 @@ describe("FormikFormContent", () => {
       { state }
     );
 
-    expect(screen.getByRole("button", { name: "Save" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Save" })).toBeAriaDisabled();
   });
 
   it("can override disabling cancel button while saving", () => {
@@ -93,7 +93,7 @@ describe("FormikFormContent", () => {
       { state }
     );
 
-    expect(screen.getByTestId(TestIds.CancelButton)).not.toBeDisabled();
+    expect(screen.getByTestId(TestIds.CancelButton)).not.toBeAriaDisabled();
   });
 
   it("can display non-field errors from a string", () => {

src/app/domains/components/DomainDetailsHeader/DeleteDomainForm/DeleteDomainForm.test.tsx

@@ -90,6 +90,6 @@ describe("DeleteDomainForm", () => {
 
     expect(
       screen.getByRole("button", { name: DeleteDomainFormLabels.DeleteLabel })
-    ).toBeDisabled();
+    ).toBeAriaDisabled();
   });
 });

src/app/images/components/UploadCustomImage/UploadCustomImage.test.tsx

@@ -184,7 +184,7 @@ describe("UploadCustomImage", () => {
 
     // Submit button should be disabled without file
     const submitButton = screen.getByRole("button", { name: "Upload" });
-    expect(submitButton).toBeDisabled();
+    expect(submitButton).toBeAriaDisabled();
   });
 
   it("should show errors for all required fields when empty", async () => {
@@ -244,7 +244,7 @@ describe("UploadCustomImage", () => {
 
     // Submit button should be disabled without file
     const submitButton = screen.getByRole("button", { name: "Upload" });
-    expect(submitButton).toBeDisabled();
+    expect(submitButton).toBeAriaDisabled();
 
     // Upload a valid file
     const file = new File(["dummy content"], "test-image.tgz");
@@ -255,7 +255,7 @@ describe("UploadCustomImage", () => {
 
     // Submit button should now be enabled
     await waitFor(() => {
-      expect(submitButton).not.toBeDisabled();
+      expect(submitButton).not.toBeAriaDisabled();
     });
   });
 

src/app/intro/views/UserIntro/UserIntro.test.tsx

@@ -79,7 +79,7 @@ describe("UserIntro", () => {
 
     expect(
       screen.getByRole("button", { name: UserIntroLabels.Continue })
-    ).toBeDisabled();
+    ).toBeAriaDisabled();
   });
 
   it("hides the SSH list if there are no ssh keys", async () => {

src/app/kvm/components/ComposeForm/InterfacesTable/InterfacesTable.test.tsx

@@ -17,6 +17,7 @@ import {
 
 setupMockServer(
   zoneResolvers.listZones.handler(),
+  zoneResolvers.listZonesWithStatistics.handler(),
   poolsResolvers.listPools.handler()
 );
 
@@ -210,7 +211,7 @@ describe("InterfacesTable", () => {
     // Choose the subnet in state from the dropdown
     // Fabric and VLAN nams should display, PXE should be true
     await userEvent.click(
-      within(screen.getByLabelText("submenu")).getByRole("button")
+      within(screen.getByLabelText("sub")).getByRole("button")
     );
     expect(screen.getByText(fabric.name)).toHaveAccessibleName("Fabric");
     expect(screen.getByText(vlan.name)).toHaveAccessibleName("VLAN");

src/app/kvm/components/ComposeForm/InterfacesTable/SubnetSelect/SubnetSelect.test.tsx

@@ -16,6 +16,7 @@ import {
 
 setupMockServer(
   zoneResolvers.listZones.handler(),
+  zoneResolvers.listZonesWithStatistics.handler(),
   poolsResolvers.listPools.handler()
 );
 
@@ -104,7 +105,7 @@ describe("SubnetSelect", () => {
       screen.getByRole("button", { name: "Select subnet..." })
     );
 
-    const spaceGroups = screen.getByLabelText("submenu").children;
+    const spaceGroups = screen.getByLabelText("sub").children;
 
     expect(spaceGroups).toHaveLength(5);
     expect(spaceGroups[0]).toHaveTextContent("Space: Outer");
@@ -150,7 +151,7 @@ describe("SubnetSelect", () => {
       screen.getByRole("button", { name: "Select subnet..." })
     );
 
-    let spaceGroups = screen.getByLabelText("submenu").children;
+    let spaceGroups = screen.getByLabelText("sub").children;
 
     expect(spaceGroups[0]).toHaveTextContent("Space: Outer");
     expect(spaceGroups[1]).toHaveTextContent("sub1");
@@ -169,7 +170,7 @@ describe("SubnetSelect", () => {
       screen.getByRole("button", { name: "Select subnet..." })
     );
 
-    spaceGroups = screen.getByLabelText("submenu").children;
+    spaceGroups = screen.getByLabelText("sub").children;
 
     expect(spaceGroups).toHaveLength(1);
     expect(spaceGroups[0]).toHaveTextContent("sub1");
@@ -227,7 +228,7 @@ describe("SubnetSelect", () => {
       screen.getAllByRole("button", { name: "Select subnet..." })[0]
     );
     await userEvent.click(
-      within(screen.getByLabelText("submenu")).getByRole("button", {
+      within(screen.getByLabelText("sub")).getByRole("button", {
         name: /non-pxe/i,
       })
     );
@@ -241,7 +242,7 @@ describe("SubnetSelect", () => {
       screen.getAllByRole("button", { name: "Select subnet..." })[0]
     );
     await userEvent.click(
-      within(screen.getByLabelText("submenu")).getByRole("button", {
+      within(screen.getByLabelText("sub")).getByRole("button", {
         name: /non-pxe/i,
       })
     );
@@ -252,7 +253,7 @@ describe("SubnetSelect", () => {
     // Select PXE network for the second interface - error should be removed.
     await userEvent.click(screen.getAllByText("non-pxe")[1]);
     await userEvent.click(
-      within(screen.getByLabelText("submenu")).getByRole("button", {
+      within(screen.getByLabelText("sub")).getByRole("button", {
         name: /pxe test-vlan-1/i,
       })
     );

src/app/kvm/components/KVMConfigurationCard/KVMConfigurationCard.test.tsx

@@ -167,7 +167,9 @@ describe("KVMConfigurationCard", () => {
     );
 
     // Submit should be disabled by default.
-    expect(screen.getByRole("button", { name: "Save changes" })).toBeDisabled();
+    expect(
+      screen.getByRole("button", { name: "Save changes" })
+    ).toBeAriaDisabled();
 
     // Change value to something other than the initial.
     fireEvent.change(screen.getByRole("slider", { name: "CPU overcommit" }), {
@@ -178,7 +180,7 @@ describe("KVMConfigurationCard", () => {
     await waitFor(() => {
       expect(
         screen.getByRole("button", { name: "Save changes" })
-      ).not.toBeDisabled();
+      ).not.toBeAriaDisabled();
     });
 
     // Update the pod with a new value.
@@ -189,6 +191,8 @@ describe("KVMConfigurationCard", () => {
     rerender(<KVMConfigurationCard pod={updatedPod} />);
 
     // Submit should be disabled again.
-    expect(screen.getByRole("button", { name: "Save changes" })).toBeDisabled();
+    expect(
+      screen.getByRole("button", { name: "Save changes" })
+    ).toBeAriaDisabled();
   });
 });

src/app/machines/components/MachineForms/MachineActionFormWrapper/CloneForm/CloneForm.test.tsx

@@ -71,10 +71,10 @@ describe("CloneForm", () => {
     // Checkboxes and submit should be disabled at first.
     expect(
       screen.getByRole("button", { name: "Clone to machine" })
-    ).toBeDisabled();
+    ).toBeAriaDisabled();
     expect(
       screen.getByRole("checkbox", { name: "Clone network configuration" })
-    ).toBeDisabled();
+    ).toBeAriaDisabled();
 
     // Select a source machine - form should update
     await userEvent.click(
@@ -83,7 +83,7 @@ describe("CloneForm", () => {
 
     expect(
       screen.getByRole("button", { name: "Clone to machine" })
-    ).toBeDisabled();
+    ).toBeAriaDisabled();
 
     await waitFor(() => {
       expect(

src/app/machines/views/MachineDetails/MachineNetwork/EditBondForm/EditBondForm.test.tsx

@@ -238,7 +238,7 @@ describe("EditBondForm", () => {
     );
     expect(
       screen.getByRole("button", { name: "Save interface" })
-    ).not.toBeDisabled();
+    ).not.toBeAriaDisabled();
     // Deselect eth0 and eth1, leaving only eth2 → fewer than two selected → disabled.
     await userEvent.click(
       screen.getByRole("checkbox", { name: "select eth0" })
@@ -248,7 +248,7 @@ describe("EditBondForm", () => {
     );
     expect(
       screen.getByRole("button", { name: "Save interface" })
-    ).toBeDisabled();
+    ).toBeAriaDisabled();
   });
 
   it("enables the submit button if only the members have changed", async () => {
@@ -285,7 +285,7 @@ describe("EditBondForm", () => {
     );
     expect(
       screen.getByRole("button", { name: "Save interface" })
-    ).toBeDisabled();
+    ).toBeAriaDisabled();
     await userEvent.click(
       screen.getByRole("button", { name: "Edit bond members" })
     );
@@ -295,7 +295,7 @@ describe("EditBondForm", () => {
     );
     expect(
       screen.getByRole("button", { name: "Save interface" })
-    ).not.toBeDisabled();
+    ).not.toBeAriaDisabled();
   });
 
   it("fetches the necessary data on load", async () => {

src/app/machines/views/MachineDetails/MachineStorage/MachineStorage.test.tsx

@@ -51,7 +51,7 @@ it("renders storage layout dropdown if machine's storage can be edited", async (
   await userEvent.click(
     screen.getByRole("button", { name: "Change storage layout" })
   );
-  expect(screen.getByLabelText("submenu")).toBeInTheDocument();
+  expect(screen.getByLabelText("sub")).toBeInTheDocument();
   storageLayoutOptions.forEach((group) => {
     group.forEach((option) => {
       expect(

src/app/machines/views/MachineList/MachineListTable/StatusColumn/StatusColumn.test.tsx

@@ -212,11 +212,11 @@ describe("StatusColumn", () => {
         screen.getByRole("button", { name: /take action/i })
       );
       expect(
-        within(screen.getByLabelText("submenu")).getAllByRole("button")
+        within(screen.getByLabelText("sub")).getAllByRole("button")
       ).toHaveLength(machine.actions.length);
       machine.actions.forEach((action) => {
         expect(
-          within(screen.getByLabelText("submenu")).getByRole("button", {
+          within(screen.getByLabelText("sub")).getByRole("button", {
             name: action,
           })
         ).toBeInTheDocument();

src/app/networks/views/Subnets/views/SubnetDetails/components/MapSubnet/MapSubnet.test.tsx

@@ -29,7 +29,9 @@ describe("MapSubnet", () => {
     expect(
       screen.getByText("Only IPv4 subnets can be scanned.")
     ).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Map subnet" })).toBeDisabled();
+    expect(
+      screen.getByRole("button", { name: "Map subnet" })
+    ).toBeAriaDisabled();
   });
 
   it("can map an IPv4 subnet", async () => {