🏠 Overview › ✅ Implementation Tasks ›✅ epic-no-access-screen-ui-task-003

Implement localised access-denial message

epic-no-access-screen-ui-task-003 — Add the localised human-readable explanation string to the widget body explaining why access is denied (global admins must use the web portal). Source the string from the app's ARB/l10n localisation system. Apply the correct text style from the design token text style system with sufficient contrast ratio.

high priority low complexity frontend pending frontend specialist Tier 1

Acceptance Criteria

The denial message text is sourced from the ARB localisation file via the generated AppLocalizations class — no hardcoded strings
The correct ARB key (e.g. noAccessScreenDenialMessage) exists in all supported locale files (minimum: nb, en)
Text style is applied from the design token text style system (e.g. AppTextStyles.bodyMedium or equivalent token)
Text colour contrast ratio against the screen background meets WCAG 2.2 AA minimum (4.5:1 for normal text)
Text wraps correctly at 320dp minimum screen width with no overflow
The message is readable at system font scale 1.0 through 2.0 (large text accessibility)
The widget does not crash when the localisation delegate is missing or the key is absent
Message text is centred or left-aligned consistently with the overall screen layout defined in task-001

Technical Requirements

frameworks
Flutter
performance requirements
Text widget must be const-constructible where possible to avoid unnecessary rebuilds
security requirements
Localised string must never contain interpolated user data that could be used for injection
ui components
Text widget with TextOverflow.visible and softWrap: true
Design token TextStyle applied via Theme or direct token reference
Padding widget sourced from design token spacing values

Execution Context

Execution Tier
Tier 1

Tier 1 - 540 tasks

Can start after Tier 0 completes

Implementation Notes

Retrieve the string using context.l10n.noAccessScreenDenialMessage (generated AppLocalizations accessor). Add the ARB key to all locale files before implementing the widget. Apply the text style token by referencing the design token provider rather than using Theme.of(context).textTheme directly, to stay consistent with the rest of the codebase. Use a Flexible or Expanded ancestor if necessary to prevent overflow inside the Column.

The message should explain clearly that the global admin role is not supported in the mobile app and that the user should visit the web admin portal — keep it concise and non-technical for accessibility.

Testing Requirements

Write widget tests using flutter_test. Test 1: pump the widget with a real LocalizationsDelegate and assert the denial message string appears in the widget tree. Test 2: pump with a mock locale (en) and verify the correct English string is displayed. Test 3: wrap the widget in a MediaQuery with textScaleFactor: 2.0 and assert no RenderFlex overflow errors.

Test 4: verify the TextStyle applied matches the expected design token style. Use goldenkit or matchesGoldenFile for visual regression if the project uses golden tests.

Component
No-Access Screen
ui low
Dependencies (1)
Create the initial StatelessWidget/StatefulWidget scaffold for the no-access-screen-widget as a full-screen terminal route widget. Set up the file structure, class definition, and basic build method returning a Scaffold with a safe area wrapper. Register the widget route in the router configuration. epic-no-access-screen-ui-task-001
Epic Risks (2)
medium impact medium prob technical

Flutter's live region (SemanticsProperties.liveRegion) announcement may be delayed or swallowed by the OS accessibility engine if the Semantics tree is not fully built when the screen mounts, causing screen-reader users to miss the denial announcement.

Mitigation & Contingency

Mitigation: Trigger the live region announcement from a post-frame callback (WidgetsBinding.addPostFrameCallback) to ensure the Semantics tree is committed before the announcement fires. Test on both VoiceOver (iOS) and TalkBack (Android) physical devices.

Contingency: If live region timing is unreliable, fall back to using SemanticsService.announce() directly in the initState post-frame callback, which provides more deterministic announcement timing.

low impact low prob scope

The organisation logo may fail to load (network error, missing asset) leaving a broken image in an otherwise functional screen, degrading the professional appearance and potentially confusing users.

Mitigation & Contingency

Mitigation: Wrap the logo widget in an error builder that renders a styled fallback (organisation name text or a generic icon) when the logo asset or network image fails to load.

Contingency: If logo loading is persistently unreliable across organisations, remove the logo from the no-access screen entirely in favour of a text-only header using the organisation's display name from the design token system.

Quick Links
All Tasks Execution Plan