Sort fire zones alphabetically

mobile/asa-go/src/components/settings/Settings.tsx

@@ -77,7 +77,16 @@ const Settings = ({ activeTab }: SettingsProps) => {
       }
     }
 
-    return sorted;
+    const finalSorted: FireCentreInfo[] = sorted.map((fc) => {
+      return {
+        fire_centre_name: fc.fire_centre_name,
+        fire_zone_units: fc.fire_zone_units.toSorted((a, b) =>
+          a.name.localeCompare(b.name),
+        ),
+      };
+    });
+
+    return finalSorted;
   }, [fireCentreInfos, pinnedFireCentre]);
 
   const renderNotificationMessage = () => {

mobile/asa-go/src/components/settings/SubscriptionAccordion.tsx

@@ -114,13 +114,16 @@ const SubscriptionAccordion = ({
       aria-disabled={disabled ? true : undefined}
     >
       <Accordion
+        aria-label={`accordion-${fireCentreInfo.fire_centre_name}`}
         defaultExpanded={defaultExpanded}
         disableGutters
         expanded={expanded}
         onChange={handleChange}
         sx={{ ...disabledStyles }}
       >
         <AccordionSummary
+          aria-controls={`region-${fireCentreInfo.fire_centre_name}`}
+          id={`summary-${fireCentreInfo.fire_centre_name}`}
           expandIcon={<ExpandMoreIcon />}
           sx={{
             backgroundColor: "rgba(252, 186, 25, 0.30)",

mobile/asa-go/src/components/settings/settings.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, Mock } from "vitest";
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor, within } from "@testing-library/react";
 import { Provider } from "react-redux";
 import { configureStore } from "@reduxjs/toolkit";
 import Settings from "./Settings";
@@ -42,17 +42,17 @@ vi.mock("@/utils/storage", async () => {
 // Mock data
 const mockFireCentreInfos: FireCentreInfo[] = [
   {
-    fire_centre_name: "Kamloops",
+    fire_centre_name: "Prince George",
     fire_zone_units: [
-      { id: 1, name: "Kamloops Zone 1" },
-      { id: 2, name: "Kamloops Zone 2" },
+      { id: 4, name: "Prince George Zone 2" },
+      { id: 3, name: "Prince George Zone 1" },
     ],
   },
   {
-    fire_centre_name: "Prince George",
+    fire_centre_name: "Kamloops",
     fire_zone_units: [
-      { id: 3, name: "Prince George Zone 1" },
-      { id: 4, name: "Prince George Zone 2" },
+      { id: 2, name: "Kamloops Zone 2" },
+      { id: 1, name: "Kamloops Zone 1" },
     ],
   },
 ];
@@ -285,4 +285,61 @@ describe("Settings", () => {
       ),
     ).toBeInTheDocument();
   });
+  it("sorts fire centres alphabetically", async () => {
+    // Mock permission check to return granted immediately
+    const { FirebaseMessaging } = await import("@capacitor-firebase/messaging");
+    (FirebaseMessaging.checkPermissions as Mock).mockResolvedValue({
+      receive: "granted",
+    });
+    const store = createTestStore({
+      settings: {
+        ...settingsReducer(undefined, { type: "unknown" }),
+        fireCentreInfos: mockFireCentreInfos,
+      },
+      networkStatus: {
+        networkStatus: { connected: true, connectionType: "wifi" },
+      },
+    });
+    render(
+      <Provider store={store}>
+        <Settings activeTab={NavPanel.SETTINGS} />
+      </Provider>,
+    );
+
+    await waitFor(async () => {
+      const fireCentreElements = await screen.findAllByRole("heading");
+      expect(fireCentreElements[0]).toHaveTextContent(/KAMLOOPS/i);
+      expect(fireCentreElements[1]).toHaveTextContent(/PRINCE GEORGE/i);
+    });
+  });
+  it("sorts fire zone units alphabetically", async () => {
+    // Mock permission check to return granted immediately
+    const { FirebaseMessaging } = await import("@capacitor-firebase/messaging");
+    (FirebaseMessaging.checkPermissions as Mock).mockResolvedValue({
+      receive: "granted",
+    });
+    const store = createTestStore({
+      settings: {
+        ...settingsReducer(undefined, { type: "unknown" }),
+        fireCentreInfos: mockFireCentreInfos,
+      },
+      networkStatus: {
+        networkStatus: { connected: true, connectionType: "wifi" },
+      },
+    });
+    render(
+      <Provider store={store}>
+        <Settings activeTab={NavPanel.SETTINGS} />
+      </Provider>,
+    );
+    screen.debug(undefined, 30000);
+    await waitFor(async () => {
+      const panel = screen.getByRole("region", { name: /kamloops/i });
+      const items = within(panel).getAllByRole("listitem");
+
+      expect(items).toHaveLength(2);
+      expect(items[0]).toHaveTextContent("Kamloops Zone 1");
+      expect(items[1]).toHaveTextContent("Kamloops Zone 2");
+    });
+  });
 });