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

Render organisation logo from design tokens

epic-no-access-screen-ui-task-002 — Integrate the organisation logo display into the no-access-screen-widget using the design token system. Source the logo asset reference from the design token provider, apply correct sizing, and ensure the logo is displayed at the top of the screen. Include a semantic label for screen-reader accessibility.

high priority low complexity frontend pending frontend specialist Tier 1

Acceptance Criteria

Organisation logo is displayed at the top of the no-access screen, vertically above all other content
Logo asset reference is sourced exclusively from the design token provider (not hardcoded)
Logo renders at the correct size defined in design tokens (e.g. sizing token for logo height/width)
Logo is wrapped in a Semantics widget with a meaningful label (e.g. '[Organisation name] logo') for screen readers
Logo does not overflow or distort on small screens (320dp width minimum)
Logo is visible in both light and dark mode if the app supports theme switching
When no logo token is defined, a safe fallback (empty SizedBox or placeholder) is rendered without crashing
Widget tree contains exactly one logo widget at the correct position in the column hierarchy

Technical Requirements

frameworks
Flutter
Riverpod
performance requirements
Logo image must load synchronously from bundled assets (no network fetch)
Widget rebuild must not re-read asset path on every frame — use const or cache token value
security requirements
Logo asset path must originate from the design token system, never from user-supplied input
ui components
Image.asset or SvgPicture.asset widget for logo rendering
Semantics widget wrapping the logo with a descriptive label
SizedBox or ConstrainedBox for size constraints sourced from design tokens

Execution Context

Execution Tier
Tier 1

Tier 1 - 540 tasks

Can start after Tier 0 completes

Implementation Notes

Read the design token provider (likely a Riverpod Provider or InheritedWidget) to obtain the logo asset path and size token values. Use Image.asset with a BoxFit.contain so the logo scales correctly inside its constrained box. Wrap with Semantics(label: context.l10n.organisationLogoLabel, child: ...) rather than using ExcludeSemantics, because this logo communicates brand identity to screen-reader users. Place the logo at index 0 in the main Column children.

If the project uses SVG logos, use flutter_svg's SvgPicture.asset. Do not hardcode any asset path strings in this file.

Testing Requirements

Write widget tests using flutter_test. Test 1: verify logo widget is present in the tree and positioned above other content. Test 2: verify the Semantics node carries the correct label string. Test 3: mock the design token provider to return a different logo path and assert the widget reflects the new value.

Test 4: verify no overflow errors are thrown on a 320dp-wide screen using a constrained test surface. Aim for 100% branch coverage on the logo rendering logic.

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