Compliance: Remove emojis, add touch targets, add reduced-motion support
No-Emoji Policy (TODO.md rule):
- Replaced all emojis in UI code with Lucide icon names or text:
- calendar-manager.ts: exam/lesson/holiday/term/event icons
- signage-utils.ts: emergency/notification/schedule/announcement icons
- behavior-tracking-view.tsx: placeholder text
- i18n.ts: example text strings (DE + EN)
- admin/signage, admin/compliance pages
- compliance-wizard.tsx, substitute-teacher-view.tsx
- Verified: zero emojis remain in src/ (excluding comments)
Touch Target Compliance (44px minimum):
- Added comprehensive @media (pointer: coarse) CSS rules:
- All buttons, [role=button], [role=tab], [role=option], [role=menuitem]
get min-height/min-width: 44px
- Icon-only buttons get extra padding
- -webkit-touch-callout: none and user-select: none for buttons
- touch-action: manipulation for smooth scrolling
Reduced-Motion Support:
- Added comprehensive @media (prefers-reduced-motion: reduce) rules:
- All animations: duration 0.01ms, iteration 1
- All transitions: duration 0.01ms
- scroll-behavior: auto (no smooth scroll)
- Framer-motion elements: opacity 1, transform none
This commit is contained in:
1 parent
13fce9d906
commit
678a4e9b83
10 files changed
+80
-26
No files matched your search
@@ -157,7 +157,7 @@ export default function ComplianceDashboard() {
|
||||
{dpia.moduleScope}
|
||||
</span>
|
||||
<span className="text-xs text-slate-500">
|
||||
{dpia.approvedAt ? "✓ Approved" : "Pending review"}
|
||||
{dpia.approvedAt ? "CheckCircle Approved" : "Pending review"}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -59,7 +59,7 @@ export default function CompliancePage() {
|
||||
<Card className="border-emerald-200 bg-emerald-50">
|
||||
<CardContent className="pt-6">
|
||||
<p className="text-emerald-800 mb-4">
|
||||
✓ Compliance onboarding completed successfully! Your school is now ready to use SchulOS.
|
||||
Compliance onboarding completed successfully! Your school is now ready to use SchulOS.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => router.push("/admin/compliance-overview")}
|
||||
|
||||
@@ -184,7 +184,7 @@ export default function SignageAdminPage() {
|
||||
label: 'Sound',
|
||||
render: (_, row) => (
|
||||
<span className={row.soundAlert ? 'text-amber-600' : 'text-gray-400'}>
|
||||
{row.soundAlert ? '🔊' : '🔇'}
|
||||
{row.soundAlert ? 'volume-up' : 'volume-off'}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
|
||||
@@ -3951,3 +3951,57 @@
|
||||
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Comprehensive prefers-reduced-motion support ────────────────── */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
|
||||
/* Disable framer-motion animations */
|
||||
[data-framer-motion] {
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Touch target enforcement for tablet/iPad ───────────────────── */
|
||||
@media (pointer: coarse) {
|
||||
/* Ensure all buttons have minimum 44px touch target */
|
||||
button:not(.min-touch-keep),
|
||||
[role="button"],
|
||||
[role="tab"],
|
||||
a.btn,
|
||||
.clickable {
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
}
|
||||
|
||||
/* Icon-only buttons get extra padding */
|
||||
button:has(> svg:only-child) {
|
||||
padding: 0.625rem;
|
||||
}
|
||||
|
||||
/* Larger tap areas for list items */
|
||||
[role="option"],
|
||||
[role="menuitem"] {
|
||||
min-height: 44px;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Prevent text selection on double-tap */
|
||||
button,
|
||||
[role="button"],
|
||||
nav a {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user