+ (
getDefaultPreferences
);
+ const [error, setError] = useState(false);
useEffect(() => {
getTrackerPreferences().then(setPreferences);
@@ -18,14 +19,17 @@ export function useTrackerPreferences() {
const toggle = (id: TrackerId) => {
const enabled = !preferences[id];
+ setError(false);
setPreferences((current) => ({ ...current, [id]: enabled }));
setTrackerPreference(id, enabled).catch(() => {
setPreferences((current) => ({ ...current, [id]: !enabled }));
+ setError(true);
});
};
const setAll = (enabled: boolean) => {
const previous = preferences;
+ setError(false);
setPreferences(
Object.fromEntries(
Object.keys(preferences).map((id) => [id, enabled])
@@ -33,8 +37,9 @@ export function useTrackerPreferences() {
);
setAllTrackerPreferences(enabled).catch(() => {
setPreferences(previous);
+ setError(true);
});
};
- return { preferences, toggle, setAll };
+ return { error, preferences, toggle, setAll };
}
{tabs.map((tab) => {
const selected = active === tab;
return (
);
diff --git a/src/tracker-menu/elements.test.ts b/src/tracker-menu/elements.test.ts
index f2cf89a..d1913e7 100644
--- a/src/tracker-menu/elements.test.ts
+++ b/src/tracker-menu/elements.test.ts
@@ -60,11 +60,17 @@ describe("createDropdownTrigger", () => {
const trigger = createDropdownTrigger(2);
expect(trigger.getAttribute("role")).toBe("button");
+ expect(trigger.getAttribute("aria-label")).toBe("trackersWithCount:2");
expect(trigger.getAttribute("aria-haspopup")).toBe("true");
expect(trigger.getAttribute("aria-expanded")).toBe("false");
expect(trigger.querySelector(".count_link_label")?.textContent).toBe(
"trackersWithCount:2"
);
+ expect(
+ trigger
+ .querySelector(".profile_count_link_total")
+ ?.getAttribute("aria-hidden")
+ ).toBe("true");
});
it("omits the count when no trackers are enabled", () => {
@@ -98,5 +104,8 @@ describe("createEmptyState", () => {
expect(empty.querySelector(".count_link_label")?.textContent).toBe(
"noTrackersEnabled"
);
+ expect(empty.querySelector(".trackeroo-empty-help")?.textContent).toBe(
+ "emptyStateTitle"
+ );
});
});
diff --git a/src/tracker-menu/elements.ts b/src/tracker-menu/elements.ts
index d952f64..bb7a7bc 100644
--- a/src/tracker-menu/elements.ts
+++ b/src/tracker-menu/elements.ts
@@ -46,6 +46,9 @@ export function createDropdownMenu(
export function createDropdownTrigger(count: number): HTMLDivElement {
const trigger = document.createElement("div");
trigger.className = "profile_count_link ellipsis trackeroo-trigger";
+ const label =
+ count > 0 ? t("trackersWithCount", String(count)) : t("trackers");
+ trigger.setAttribute("aria-label", label);
trigger.setAttribute("role", "button");
trigger.setAttribute("tabindex", "0");
trigger.setAttribute("aria-expanded", "false");
@@ -56,10 +59,9 @@ export function createDropdownTrigger(count: number): HTMLDivElement {
link.className = "trackeroo-trigger-link";
link.tabIndex = -1;
- const label =
- count > 0 ? t("trackersWithCount", String(count)) : t("trackers");
const caret = document.createElement("span");
caret.className = "profile_count_link_total";
+ caret.setAttribute("aria-hidden", "true");
caret.textContent = "▾";
link.append(createCountLabel(label), "\u00a0", caret);
@@ -87,6 +89,9 @@ export function createEmptyState(): HTMLDivElement {
const el = document.createElement("div");
el.className = "profile_count_link ellipsis trackeroo-empty";
el.title = t("emptyStateTitle");
- el.append(createCountLabel(t("noTrackersEnabled")));
+ const help = document.createElement("span");
+ help.className = "trackeroo-empty-help";
+ help.textContent = t("emptyStateTitle");
+ el.append(createCountLabel(t("noTrackersEnabled")), help);
return el;
}
diff --git a/src/tracker-menu/mount.test.ts b/src/tracker-menu/mount.test.ts
index da73ca7..cab3179 100644
--- a/src/tracker-menu/mount.test.ts
+++ b/src/tracker-menu/mount.test.ts
@@ -33,10 +33,13 @@ const ctx = {
},
} as unknown as ContentScriptContext;
-function mount(enabledTrackers: Tracker[]): HTMLElement {
+function mount(
+ enabledTrackers: Tracker[],
+ pageUrl: string = PROFILE_URL
+): HTMLElement {
const container = document.createElement("div");
document.body.append(container);
- mountTrackerUi(ctx, container, enabledTrackers, PROFILE_URL);
+ mountTrackerUi(ctx, container, enabledTrackers, pageUrl);
return container;
}
@@ -62,6 +65,13 @@ describe("mountTrackerUi", () => {
expect(link?.href).toBe("https://xsteamcommunity.com/id/gaben");
});
+ it("shows the empty state when a single enabled tracker cannot link", () => {
+ const container = mount([trackers[0]], "https://example.com");
+
+ expect(container.className).toContain("trackeroo-root--empty");
+ expect(container.querySelector(".trackeroo-empty")).not.toBeNull();
+ });
+
it("renders a dropdown for multiple enabled trackers", () => {
const container = mount(trackers);
diff --git a/src/tracker-menu/mount.ts b/src/tracker-menu/mount.ts
index ba09f71..42e59d6 100644
--- a/src/tracker-menu/mount.ts
+++ b/src/tracker-menu/mount.ts
@@ -20,6 +20,8 @@ export function mountTrackerUi(
if (enabledTrackers.length === 1) {
const link = createDirectLink(enabledTrackers[0], pageUrl);
if (!link) {
+ container.className = "trackeroo-root trackeroo-root--empty";
+ container.append(createEmptyState());
return;
}
diff --git a/src/trackers/use-tracker-preferences.ts b/src/trackers/use-tracker-preferences.ts
index f49c33e..595e726 100644
--- a/src/trackers/use-tracker-preferences.ts
+++ b/src/trackers/use-tracker-preferences.ts
@@ -11,6 +11,7 @@ export function useTrackerPreferences() {
const [preferences, setPreferences] = useState