Skip to main content
Corporate IdentityUniversity of Johannesburg
Settings
Appearance
Design
Menu

Navigation

Translation controls

Navigate available page translations and disclose AI-assisted translations in English.

stable@uj/design/componentsVersion 1.16.1Package 1.16.1

Production component

Live preview

This example is rendered from the same package consumed by UJ applications.

Contract

Usage and quality requirements

The contract keeps purpose, states and ownership visible before a component is reused.

usage

  • Pass only translations authorized by the owning published projection
  • Show the notice only when the published version is marked AI-assisted
  • Always link the notice to the verified English page
  • Do not translate the disclosure text
  • Keep publication and provenance decisions outside @uj/design

states

  • multiple translations
  • current translation
  • AI-assisted translation
  • human translation
  • keyboard focus
  • narrow viewport
  • dark theme
  • forced colours
  • print

purpose

Show only published page translations and clearly disclose when the current translation was generated with AI.

responsive

  • Wrapping 44px language links
  • Single-column notice at 560px
  • 320px
  • 768px
  • 1440px
  • 200% text resize

accessibility

  • Labelled translation region
  • Labelled navigation landmark
  • Current page is explicit
  • Language metadata on links
  • AI notice is a named note
  • English disclosure is marked with lang=en
  • Visible keyboard focus
  • WCAG 2.2 AA

runtime Boundary

The component performs no fetching, translation, routing, provenance inference, storage or content fallback.

source Authority

Corporate Identity presentation contract and owning CMS translation provenance