Article 50 Kit
PATTERN 03 / 04 Article 50(3)

Emotion Recognition Notice

When an emotion-recognition or biometric-categorisation system is used, the people exposed to it must be informed of its operation. This notice does that before the system acts on them, and stays visible afterwards.

01 / 04

Playground

Acknowledge the notice, then reset it to see the full flow.

Preview

Emotion recognition is active

Bright Support uses an AI system that reads facial expression and tone of voice to estimate how you are feeling. You are being told this so you can decide how to proceed.

What is collected and why

Controls

After “I understand”, the notice collapses to a persistent indicator — the duty to inform does not end when the banner is dismissed.
02 / 04

Usage

import EmotionRecognitionNotice from './kit/EmotionRecognitionNotice';

<EmotionRecognitionNotice
  system="Bright Support"
  dataProcessed={['facial expression', 'tone of voice']}
  active={emotionAIEnabled}
  infoHref="/privacy/emotion-ai"
  onAcknowledge={() => log('notice acknowledged')}
/>
03 / 04

Props

Prop Type Notes
systemstringName of the service doing the recognition.
dataProcessedstring[]What is read, e.g. facial expression, tone of voice.
activebooleanWhen false, nothing renders.
acknowledgedbooleanOptional controlled state; otherwise managed internally.
onAcknowledge() => voidFires when the person confirms they understand.
04 / 04

Accessibility

  • Rendered as a labelled region with a real heading — not a modal, so it never traps keyboard focus.
  • Acknowledgement is a genuine <button>; on confirm it collapses to a persistent role="status" indicator.
  • The duty to inform does not end on dismissal, so the slim indicator stays visible.
  • Text carries the meaning; the eye icon is decorative.