From 5be7b6186ebdac0ba12730c611214e5e16983582 Mon Sep 17 00:00:00 2001 From: SimpleTest Date: Mon, 3 Aug 2026 16:07:11 +0300 Subject: [PATCH] Improve mobile staff accessibility --- e2e/tests/accessibility-resilience.spec.ts | 38 ++++++++++++++++++- .../live/admin_audit_live.ex | 8 ++-- lib/who_need_help_web/live/admin_user_live.ex | 4 +- .../live/admin_users_live.ex | 6 +-- .../live/category_proposal_live.ex | 2 +- lib/who_need_help_web/live/moderation_live.ex | 10 +++-- .../live/notification_live.ex | 6 +-- .../live/product_analytics_live.ex | 8 ++-- lib/who_need_help_web/live/report_live.ex | 2 +- .../live/support_operation_live.ex | 8 ++-- .../live/support_operations_live.ex | 8 ++-- priv/gettext/default.pot | 26 ++++++++----- 12 files changed, 87 insertions(+), 39 deletions(-) diff --git a/e2e/tests/accessibility-resilience.spec.ts b/e2e/tests/accessibility-resilience.spec.ts index 7d68b6a..c2ff9a2 100644 --- a/e2e/tests/accessibility-resilience.spec.ts +++ b/e2e/tests/accessibility-resilience.spec.ts @@ -1,6 +1,11 @@ import AxeBuilder from "@axe-core/playwright"; import { expect, test } from "@playwright/test"; -import { newIsolatedContext, projectEmail, registerAndConfirm } from "./helpers"; +import { + loginWithMagicLink, + newIsolatedContext, + projectEmail, + registerAndConfirm, +} from "./helpers"; const publicAccessibilityPaths = [ "/", @@ -154,3 +159,34 @@ test("authenticated core workflows remain accessible on a phone viewport", async await user.context.close(); }); + +test("staff workspaces remain accessible without horizontal overflow on a phone viewport", async ({ + browser, + request, +}) => { + const admin = await loginWithMagicLink(browser, request, "e2e-admin@example.invalid"); + await admin.page.setViewportSize({ width: 390, height: 844 }); + + for (const path of [ + "/admin", + "/admin/users", + "/support/operations", + "/moderation", + "/analytics", + "/admin/audit", + ]) { + await admin.page.goto(path); + await expectAccessible(admin.page); + + const dimensions = await admin.page.evaluate(() => ({ + clientWidth: document.documentElement.clientWidth, + scrollWidth: document.documentElement.scrollWidth, + })); + + expect(dimensions.scrollWidth, `${path} overflowed at 390px`).toBeLessThanOrEqual( + dimensions.clientWidth, + ); + } + + await admin.context.close(); +}); diff --git a/lib/who_need_help_web/live/admin_audit_live.ex b/lib/who_need_help_web/live/admin_audit_live.ex index bbf159e..9f26c70 100644 --- a/lib/who_need_help_web/live/admin_audit_live.ex +++ b/lib/who_need_help_web/live/admin_audit_live.ex @@ -188,7 +188,7 @@ defmodule WhoNeedHelpWeb.AdminAuditLive do

{gettext("Recorded events")}

-

+

{gettext( "Actor, action, and target remain visible; technical metadata opens on demand." )} @@ -209,14 +209,14 @@ defmodule WhoNeedHelpWeb.AdminAuditLive do

{actor_label(event)}

-

+

{event.actor_id}

{event.action}

{event.target_type}

-

{event.target_id}

+

{event.target_id}

{gettext("Details")} @@ -246,6 +246,7 @@ defmodule WhoNeedHelpWeb.AdminAuditLive do

{@user.email}

-

{@user.id}

+

{@user.id}

@@ -241,7 +241,7 @@ defmodule WhoNeedHelpWeb.AdminUserLive do /> {role_label(role)} - + {role_description(role)} diff --git a/lib/who_need_help_web/live/admin_users_live.ex b/lib/who_need_help_web/live/admin_users_live.ex index c17de6d..65d8998 100644 --- a/lib/who_need_help_web/live/admin_users_live.ex +++ b/lib/who_need_help_web/live/admin_users_live.ex @@ -245,7 +245,7 @@ defmodule WhoNeedHelpWeb.AdminUsersLive do

{account_name(user)}

-

+

{user.email}

@@ -293,7 +293,7 @@ defmodule WhoNeedHelpWeb.AdminUsersLive do

{account_name(user)}

-

{user.email}

+

{user.email}

{status_label(user.moderation_status)} @@ -311,7 +311,7 @@ defmodule WhoNeedHelpWeb.AdminUsersLive do
- + {gettext("Joined %{date}", date: joined_on(user.inserted_at))} <.link navigate={~p"/admin/users/#{user.id}"} class="btn btn-outline btn-sm"> diff --git a/lib/who_need_help_web/live/category_proposal_live.ex b/lib/who_need_help_web/live/category_proposal_live.ex index c57c843..55eb090 100644 --- a/lib/who_need_help_web/live/category_proposal_live.ex +++ b/lib/who_need_help_web/live/category_proposal_live.ex @@ -248,7 +248,7 @@ defmodule WhoNeedHelpWeb.CategoryProposalLive do else: gettext("Main category")}

{proposal.reason}

-

+

{gettext("by %{name}", name: proposal.proposer.display_name)}

diff --git a/lib/who_need_help_web/live/moderation_live.ex b/lib/who_need_help_web/live/moderation_live.ex index 9d03041..33f5598 100644 --- a/lib/who_need_help_web/live/moderation_live.ex +++ b/lib/who_need_help_web/live/moderation_live.ex @@ -671,7 +671,7 @@ defmodule WhoNeedHelpWeb.ModerationLive do

{report.details}

-

+

{report.reporter.display_name || report.reporter.email}

@@ -847,7 +847,7 @@ defmodule WhoNeedHelpWeb.ModerationLive do >
-

{signal.subject.display_name || signal.subject.email}

+

{signal.subject.display_name || signal.subject.email}

{signal.subject.email}

@@ -968,7 +968,7 @@ defmodule WhoNeedHelpWeb.ModerationLive do >
-

{proposal.proposed_name}

+

{proposal.proposed_name}

{proposal.reason}

@@ -1119,6 +1119,7 @@ defmodule WhoNeedHelpWeb.ModerationLive do

{gettext("Page %{page}", page: @page_number)}

-

+

{gettext("Showing %{first}–%{last}", first: elem(@range, 0), last: elem(@range, 1))}

- <.icon name="hero-bell-slash" class="mx-auto size-8 text-base-content/45" /> + <.icon name="hero-bell-slash" class="mx-auto size-8 text-base-content/70" />

{gettext("No notifications yet")}

{gettext("Request, message, and nearby-alert updates will appear here.")} @@ -306,7 +306,7 @@ defmodule WhoNeedHelpWeb.NotificationLive do value={notification.inserted_at} date_style="short" time_style="short" - class="mt-2 block text-xs font-normal text-base-content/45" + class="mt-2 block text-xs font-normal text-base-content/70" /> <.icon name="hero-chevron-right" class="mt-2 size-4 shrink-0 opacity-45" /> @@ -401,7 +401,7 @@ defmodule WhoNeedHelpWeb.NotificationLive do value={device.last_seen_at} date_style="short" time_style="short" - class="text-xs text-base-content/55" + class="text-xs text-base-content/70" />