implemented comprehensive accessibility (A11y) support across the app

This commit is contained in:
2026-07-13 23:41:47 +02:00
parent 8274dd46cd
commit 478f0ff20b
46 changed files with 590 additions and 226 deletions
@@ -107,7 +107,15 @@ class _LoadableStateErrorBarTextState extends State<LoadableStateErrorBarText> {
var bloc = context.watch<LoadableStateBloc>();
final foreground = bloc.connectionForegroundColor(context);
return Row(
// liveRegion, damit das Auftauchen des Offline-/Fehlerbanners angesagt wird;
// Row-Semantik ausgeschlossen (Icon + Text) und Text über das explizite
// Label getragen, sonst liest der Screenreader ihn doppelt.
return Semantics(
liveRegion: true,
container: true,
label: bloc.connectionText(lastUpdated: widget.lastUpdated),
child: ExcludeSemantics(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(bloc.connectionIcon(), size: 14, color: foreground),
@@ -117,6 +125,8 @@ class _LoadableStateErrorBarTextState extends State<LoadableStateErrorBarText> {
style: TextStyle(fontSize: 12, color: foreground),
),
],
),
),
);
}
+1
View File
@@ -248,6 +248,7 @@ class AppModule {
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
tooltip: isVisible ? 'Modul ausblenden' : 'Modul einblenden',
onPressed: onVisibleChange,
icon: Icon(
isVisible
+5 -2
View File
@@ -7,12 +7,15 @@ class LoginHeader extends StatelessWidget {
Widget build(BuildContext context) => Column(
children: [
const SizedBox(height: 40),
Image.asset(
'assets/logo/icon.png',
// Dekoratives Logo der Schulname steht direkt darunter als Text.
const ExcludeSemantics(
child: Image(
image: AssetImage('assets/logo/icon.png'),
height: 110,
fit: BoxFit.contain,
gaplessPlayback: true,
),
),
const SizedBox(height: 20),
const Text(
'Marianum Fulda',
@@ -33,6 +33,7 @@ class FilesSearchDelegate extends SearchDelegate<void> {
@override
Widget? buildLeading(BuildContext context) => IconButton(
icon: const Icon(Icons.arrow_back),
tooltip: 'Zurück',
onPressed: () => close(context, null),
);
@@ -239,6 +239,7 @@ class _ShareOptionsBodyState extends State<_ShareOptionsBody> {
),
trailing: IconButton(
onPressed: () => copyToClipboard(context, _share.url!),
tooltip: 'Link kopieren',
icon: const Icon(Icons.copy_outlined),
),
),
@@ -127,6 +127,7 @@ class _ShareePickerPageState extends State<ShareePickerPage> {
? null
: IconButton(
icon: const Icon(Icons.clear),
tooltip: 'Leeren',
onPressed: () {
_searchController.clear();
_query = '';
@@ -166,6 +166,7 @@ class _ElementPickerPageState extends State<ElementPickerPage> {
? null
: IconButton(
icon: const Icon(Icons.clear),
tooltip: 'Leeren',
onPressed: () {
_searchController.clear();
setState(() => _query = '');
@@ -35,6 +35,7 @@ class GradeAveragesListView extends StatelessWidget {
Text(getGradeDisplay(grade)),
const SizedBox(width: 30),
IconButton(
tooltip: 'Note entfernen',
onPressed: () {
bloc.add(DecrementGrade(grade));
},
@@ -49,6 +50,7 @@ class GradeAveragesListView extends StatelessWidget {
),
),
IconButton(
tooltip: 'Note hinzufügen',
onPressed: () {
bloc.add(IncrementGrade(grade));
},
@@ -64,6 +66,7 @@ class GradeAveragesListView extends StatelessWidget {
maintainSize: true,
visible: bloc.canDecrementOrDelete(grade),
child: IconButton(
tooltip: 'Löschen',
icon: const Icon(Icons.delete),
onPressed: () {
bloc.add(ResetGrade(grade));
@@ -24,6 +24,7 @@ class GradeAveragesView extends StatelessWidget {
Visibility(
visible: bloc.state.grades.isNotEmpty,
child: IconButton(
tooltip: 'Alle zurücksetzen',
onPressed: () => ConfirmDialog(
title: 'Zurücksetzen?',
content: 'Alle Einträge werden entfernt.',
@@ -38,6 +38,7 @@ class HolidaysView extends StatelessWidget {
title: const Text('Schulferien'),
actions: [
IconButton(
tooltip: 'Informationen',
icon: const Icon(Icons.info_outline),
onPressed: showDisclaimer,
),
@@ -68,6 +68,7 @@ class MarianumDatesView extends StatelessWidget {
onSelected: (e) => bloc.add(SetPastEventsVisible(e)),
),
IconButton(
tooltip: 'Suchen',
icon: const Icon(Icons.search),
onPressed: () {
final events = bloc.getEvents() ?? const <MarianumDate>[];
@@ -22,11 +22,16 @@ class SearchMarianumDates extends SearchDelegate<MarianumDate?> {
@override
List<Widget>? buildActions(BuildContext context) => [
if (query.isNotEmpty)
IconButton(onPressed: () => query = '', icon: const Icon(Icons.clear)),
IconButton(
tooltip: 'Leeren',
onPressed: () => query = '',
icon: const Icon(Icons.clear),
),
];
@override
Widget? buildLeading(BuildContext context) => IconButton(
tooltip: 'Zurück',
icon: const Icon(Icons.arrow_back),
onPressed: () => close(context, null),
);
@@ -22,6 +22,7 @@ class MarianumMessageListView extends StatelessWidget {
title: const Text('Marianum Message'),
actions: [
IconButton(
tooltip: 'Suchen',
icon: const Icon(Icons.search),
onPressed: () {
final list = bloc.state.data?.messageList;
@@ -23,11 +23,16 @@ class SearchMarianumMessages extends SearchDelegate<MarianumMessage?> {
@override
List<Widget>? buildActions(BuildContext context) => [
if (query.isNotEmpty)
IconButton(onPressed: () => query = '', icon: const Icon(Icons.clear)),
IconButton(
tooltip: 'Leeren',
onPressed: () => query = '',
icon: const Icon(Icons.clear),
),
];
@override
Widget? buildLeading(BuildContext context) => IconButton(
tooltip: 'Zurück',
icon: const Icon(Icons.arrow_back),
onPressed: () => close(context, null),
);
+7 -1
View File
@@ -1,13 +1,18 @@
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import '../../../../widget/a11y/a11y_labels.dart';
class Roomplan extends StatelessWidget {
const Roomplan({super.key});
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(title: const Text('Raumplan')),
body: PhotoView(
body: Semantics(
image: true,
label: A11yLabels.roomPlan,
child: PhotoView(
imageProvider: Image.asset('assets/img/raumplan.png').image,
minScale: 0.5,
maxScale: 2.0,
@@ -15,5 +20,6 @@ class Roomplan extends StatelessWidget {
color: Theme.of(context).colorScheme.surface,
),
),
),
);
}
+1
View File
@@ -23,6 +23,7 @@ class _OverhangState extends State<Overhang> {
title: const Text('Mehr'),
actions: [
IconButton(
tooltip: 'Einstellungen',
onPressed: () => AppRoutes.openSettings(context),
icon: const Icon(Icons.settings),
),
@@ -66,6 +66,7 @@ class ModuleSortBody extends StatelessWidget {
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
tooltip: 'Slot entfernen',
icon: const Icon(Icons.remove_circle_outline),
onPressed:
modulesSettings.fixedBottomBarSlots >
@@ -80,6 +81,7 @@ class ModuleSortBody extends StatelessWidget {
),
Text('${modulesSettings.fixedBottomBarSlots}'),
IconButton(
tooltip: 'Slot hinzufügen',
icon: const Icon(Icons.add_circle_outline),
onPressed:
modulesSettings.fixedBottomBarSlots <
@@ -277,13 +277,22 @@ class _PushStatusBodyState extends State<_PushStatusBody>
Widget _stateIcon(PushCheck state, ThemeData theme) {
switch (state) {
case PushCheck.ok:
return const Icon(Icons.check_circle_outline, color: Colors.green);
return const Icon(
Icons.check_circle_outline,
color: Colors.green,
semanticLabel: 'In Ordnung',
);
case PushCheck.fail:
return Icon(Icons.cancel_outlined, color: theme.colorScheme.error);
return Icon(
Icons.cancel_outlined,
color: theme.colorScheme.error,
semanticLabel: 'Fehler',
);
case PushCheck.unknown:
return Icon(
Icons.remove_circle_outline,
color: theme.colorScheme.onSurfaceVariant,
semanticLabel: 'Unbekannt',
);
}
}
@@ -76,6 +76,7 @@ class ShareChatPicker extends StatelessWidget {
actions: [
Builder(
builder: (ctx) => IconButton(
tooltip: 'Suchen',
icon: const Icon(Icons.search),
onPressed: () {
final rooms = ctx.read<ChatListBloc>().state.data?.rooms;
+1
View File
@@ -85,6 +85,7 @@ class _ChatListViewState extends State<_ChatListView> {
title: const Text('Talk'),
actions: [
IconButton(
tooltip: 'Suchen',
icon: const Icon(Icons.search),
onPressed: () {
final rooms = bloc.state.data?.rooms;
+5 -1
View File
@@ -27,7 +27,11 @@ class JoinChat extends SearchDelegate<String> {
},
),
if (query.isNotEmpty)
IconButton(onPressed: () => query = '', icon: const Icon(Icons.clear)),
IconButton(
tooltip: 'Leeren',
onPressed: () => query = '',
icon: const Icon(Icons.clear),
),
];
@override
+5 -1
View File
@@ -25,7 +25,11 @@ class SearchChat extends SearchDelegate<GetRoomResponseObject?> {
@override
List<Widget>? buildActions(BuildContext context) => [
if (query.isNotEmpty)
IconButton(onPressed: () => query = '', icon: const Icon(Icons.clear)),
IconButton(
tooltip: 'Leeren',
onPressed: () => query = '',
icon: const Icon(Icons.clear),
),
];
@override
+15 -10
View File
@@ -9,6 +9,7 @@ import '../../../../share_intent/remote_file_ref.dart';
import '../../../../state/app/modules/chat/bloc/chat_bloc.dart';
import '../../../../utils/downloads/download_job.dart';
import '../../../../utils/haptics.dart';
import '../../../../widget/a11y/a11y_labels.dart';
import '../../../../widget/demo_restricted.dart';
import '../../../../widget/downloads/download_trigger.dart';
import '../data/chat_bubble_styles.dart';
@@ -120,9 +121,7 @@ class _ChatBubbleState extends State<ChatBubble>
if (!_rendersAsCommentBubble) {
base = styles.getSystemStyle();
} else {
base = widget.isSender
? styles.getSelfStyle()
: styles.getRemoteStyle();
base = widget.isSender ? styles.getSelfStyle() : styles.getRemoteStyle();
}
switch (widget.matchHighlight) {
case SearchHighlight.none:
@@ -130,7 +129,9 @@ class _ChatBubbleState extends State<ChatBubble>
case SearchHighlight.secondary:
return base.copyWith(
borderWidth: 1.5,
borderColor: Theme.of(context).colorScheme.primary.withValues(alpha: 0.45),
borderColor: Theme.of(
context,
).colorScheme.primary.withValues(alpha: 0.45),
);
case SearchHighlight.active:
return base.copyWith(
@@ -342,7 +343,8 @@ class _BubbleContent extends StatelessWidget {
});
@override
Widget build(BuildContext context) => Container(
Widget build(BuildContext context) => MergeSemantics(
child: Container(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 0.9,
minWidth: showActorDisplayName
@@ -351,7 +353,8 @@ class _BubbleContent extends StatelessWidget {
),
child: Stack(
children: [
if (showActorDisplayName) Positioned(top: 0, left: 0, child: actorWidget),
if (showActorDisplayName)
Positioned(top: 0, left: 0, child: actorWidget),
Padding(
padding: EdgeInsets.only(
bottom: showBubbleTime ? 18 : 0,
@@ -363,10 +366,7 @@ class _BubbleContent extends StatelessWidget {
if (parent != null &&
bubbleData.messageType ==
GetRoomResponseObjectMessageType.comment) ...[
AnswerReference(
referenceMessage: parent!,
selfId: selfId,
),
AnswerReference(referenceMessage: parent!, selfId: selfId),
const SizedBox(height: 5),
],
messageWidget,
@@ -386,6 +386,9 @@ class _BubbleContent extends StatelessWidget {
isRead ? Icons.done_all_outlined : Icons.done_outlined,
size: timeIconSize,
color: timeIconColor,
semanticLabel: isRead
? A11yLabels.messageRead
: A11yLabels.messageSent,
),
],
],
@@ -397,6 +400,7 @@ class _BubbleContent extends StatelessWidget {
right: 0,
left: 0,
child: LinearProgressIndicator(
semanticsLabel: A11yLabels.downloadingFile,
value: () {
final s = downloadJob!.status.value as DownloadInProgress;
return s.percent <= 0 ? null : s.percent / 100;
@@ -405,5 +409,6 @@ class _BubbleContent extends StatelessWidget {
),
],
),
),
);
}
@@ -6,6 +6,7 @@ import '../../../../api/marianumcloud/talk/delete_react_message/delete_react_mes
import '../../../../api/marianumcloud/talk/react_message/react_message.dart';
import '../../../../api/marianumcloud/talk/react_message/react_message_params.dart';
import '../../../../api/marianumcloud/talk/room/get_room_response.dart';
import '../../../../widget/a11y/a11y_labels.dart';
import '../../../../widget/async_action_button.dart';
import '../../../../widget/demo_restricted.dart';
import '../../../../widget/emoji_text.dart';
@@ -41,26 +42,7 @@ class ChatBubbleReactions extends StatelessWidget {
children: reactions.entries.map<Widget>((e) {
final hasSelfReacted =
bubbleData.reactionsSelf?.contains(e.key) ?? false;
return Container(
margin: const EdgeInsets.only(right: 2.5, left: 2.5),
child: ActionChip(
label: Row(
mainAxisSize: MainAxisSize.min,
children: [
EmojiText(e.key, size: EmojiText.sizeInline),
const SizedBox(width: 4),
Text('${e.value}'),
],
),
visualDensity: const VisualDensity(
vertical: VisualDensity.minimumDensity,
horizontal: VisualDensity.minimumDensity,
),
padding: EdgeInsets.zero,
backgroundColor: hasSelfReacted
? Theme.of(context).primaryColor
: null,
onPressed: () {
void toggle() {
if (guardDemoAction(context)) return;
runWithErrorDialog(context, () async {
if (hasSelfReacted) {
@@ -78,7 +60,40 @@ class ChatBubbleReactions extends StatelessWidget {
}
onChanged(renew: true);
});
},
}
// Ownership (eigene Reaktion) wird visuell nur über die
// Hintergrundfarbe transportiert für den Screenreader ins Label.
final label = hasSelfReacted
? '${e.key} ${e.value}, ${A11yLabels.yourReaction}'
: '${e.key} ${e.value}';
return Container(
margin: const EdgeInsets.only(right: 2.5, left: 2.5),
child: Semantics(
button: true,
label: label,
onTap: toggle,
child: ExcludeSemantics(
child: ActionChip(
label: Row(
mainAxisSize: MainAxisSize.min,
children: [
EmojiText(e.key, size: EmojiText.sizeInline),
const SizedBox(width: 4),
Text('${e.value}'),
],
),
visualDensity: const VisualDensity(
vertical: VisualDensity.minimumDensity,
horizontal: VisualDensity.minimumDensity,
),
padding: EdgeInsets.zero,
backgroundColor: hasSelfReacted
? Theme.of(context).primaryColor
: null,
onPressed: toggle,
),
),
),
);
}).toList(),
@@ -259,6 +259,7 @@ class _ReactionsRowState extends State<_ReactionsRow> {
],
_groupDivider(context),
IconButton(
tooltip: 'Reaktion hinzufügen',
onPressed: busy ? null : () => _showEmojiPicker(context),
style: IconButton.styleFrom(
padding: EdgeInsets.zero,
@@ -30,6 +30,7 @@ class ChatSearchAppBar extends StatelessWidget implements PreferredSizeWidget {
: '${activeIndex + 1}/$matchCount';
return AppBar(
leading: IconButton(
tooltip: 'Zurück',
icon: const Icon(Icons.arrow_back),
onPressed: onClose,
),
@@ -54,10 +55,12 @@ class ChatSearchAppBar extends StatelessWidget implements PreferredSizeWidget {
),
),
IconButton(
tooltip: 'Vorheriges Ergebnis',
icon: const Icon(Icons.keyboard_arrow_up),
onPressed: onPrevious,
),
IconButton(
tooltip: 'Nächstes Ergebnis',
icon: const Icon(Icons.keyboard_arrow_down),
onPressed: onNext,
),
@@ -268,6 +268,7 @@ class _ChatTextfieldState extends State<ChatTextfield> {
),
),
IconButton(
tooltip: 'Antwort verwerfen',
onPressed: () {
chatBloc.setReferenceMessageId(null);
_setDraftReply(null);
+17 -3
View File
@@ -14,6 +14,7 @@ import '../../../../routing/app_routes.dart';
import '../../../../state/app/modules/chat/bloc/chat_bloc.dart';
import '../../../../state/app/modules/chat_list/bloc/chat_list_bloc.dart';
import '../../../../utils/haptics.dart';
import '../../../../widget/a11y/a11y_labels.dart';
import '../../../../widget/async_action_button.dart';
import '../../../../widget/confirm_dialog.dart';
import '../../../../widget/debug/debug_tile.dart';
@@ -106,6 +107,7 @@ class _ChatTileState extends State<ChatTile> {
Icons.star,
color: Colors.amberAccent,
size: 15,
semanticLabel: A11yLabels.favorite,
),
),
),
@@ -123,7 +125,11 @@ class _ChatTileState extends State<ChatTile> {
),
if (widget.hasDraft) ...[
const SizedBox(width: 5),
const Icon(Icons.edit_outlined, size: 15),
const Icon(
Icons.edit_outlined,
size: 15,
semanticLabel: A11yLabels.draft,
),
],
],
),
@@ -134,19 +140,27 @@ class _ChatTileState extends State<ChatTile> {
),
trailing: widget.data.unreadMessages <= 0
? null
: Container(
: Semantics(
label: '${widget.data.unreadMessages} ${A11yLabels.unread}',
child: ExcludeSemantics(
child: Container(
padding: const EdgeInsets.all(1),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(30),
),
constraints: const BoxConstraints(minWidth: 20, minHeight: 20),
constraints: const BoxConstraints(
minWidth: 20,
minHeight: 20,
),
child: Text(
'${widget.data.unreadMessages}',
style: const TextStyle(color: Colors.white, fontSize: 15),
textAlign: TextAlign.center,
),
),
),
),
onTap: () {
if (widget.onTapOverride != null) {
widget.onTapOverride!(widget.data);
@@ -16,8 +16,11 @@ class SplitViewPlaceholder extends StatelessWidget {
data: MediaQuery.of(
context,
).copyWith(invertColors: !AppTheme.isDarkMode(context)),
// Dekoratives Logo der „Talk"-Text darunter trägt die Aussage.
child: ExcludeSemantics(
child: Image.asset('assets/logo/icon.png', height: 200),
),
),
const SizedBox(height: 30),
const Text(
'Marianum Fulda\nTalk',
@@ -27,6 +27,7 @@ class CustomEventsView extends StatelessWidget {
actions: [
IconButton(
icon: const Icon(Icons.add),
tooltip: 'Termin erstellen',
onPressed: () => _openCreateDialog(context),
),
],
@@ -67,6 +68,7 @@ class CustomEventsView extends StatelessWidget {
children: [
IconButton(
icon: const Icon(Icons.edit_outlined),
tooltip: 'Bearbeiten',
onPressed: () => showDialog(
context: context,
builder: (_) =>
@@ -75,6 +77,7 @@ class CustomEventsView extends StatelessWidget {
),
IconButton(
icon: const Icon(Icons.delete_outline),
tooltip: 'Löschen',
onPressed: () =>
showDeleteCustomEventDialog(context, e),
),
@@ -103,6 +103,7 @@ class LessonSheet {
static Widget _roomTile(BuildContext context, McTimetableEntry lesson) {
final trailing = IconButton(
icon: const Icon(Icons.house_outlined),
tooltip: 'Raumplan öffnen',
onPressed: () => AppRoutes.openRoomplan(context),
);
@@ -14,12 +14,17 @@ class SearchSubjectColors extends SearchDelegate<void> {
@override
List<Widget>? buildActions(BuildContext context) => [
if (query.isNotEmpty)
IconButton(onPressed: () => query = '', icon: const Icon(Icons.clear)),
IconButton(
onPressed: () => query = '',
tooltip: 'Leeren',
icon: const Icon(Icons.clear),
),
];
@override
Widget? buildLeading(BuildContext context) => IconButton(
icon: const Icon(Icons.arrow_back),
tooltip: 'Zurück',
onPressed: () => close(context, null),
);
@@ -21,6 +21,7 @@ class SubjectColorsView extends StatelessWidget {
actions: [
IconButton(
icon: const Icon(Icons.search),
tooltip: 'Suchen',
onPressed: () =>
showSearch(context: context, delegate: SearchSubjectColors()),
),
+2
View File
@@ -110,6 +110,7 @@ class _TimetableState extends State<Timetable> {
actions: [
IconButton(
icon: const Icon(Icons.home_outlined),
tooltip: 'Zur aktuellen Woche',
onPressed: atToday ? null : _jumpToToday,
),
PopupMenuButton<_CalendarAction>(
@@ -179,6 +180,7 @@ class _TimetableState extends State<Timetable> {
actions: [
IconButton(
icon: const Icon(Icons.home_outlined),
tooltip: 'Zur aktuellen Woche',
onPressed: atToday ? null : _jumpToToday,
),
if (canViewForeign)
@@ -88,7 +88,7 @@ class _OutsideDayColumn extends StatelessWidget {
}
static String _subtitleFor(Appointment a) {
if (isAllDayLike(a)) return 'Ganztägig';
if (isAllDayLike(a)) return A11yLabels.allDay;
return '${a.startTime.formatHm()}${a.endTime.formatHm()}';
}
@@ -122,6 +122,7 @@ class _OutsideDayColumn extends StatelessWidget {
height: kOutsideChipHeight,
child: _OutsideChip(
appointment: visible[i],
crossedOut: isCrossedOut(visible[i]),
onTap: () => onAppointmentTap(visible[i]),
),
),
@@ -144,15 +145,28 @@ class _OutsideDayColumn extends StatelessWidget {
class _OutsideChip extends StatelessWidget {
final Appointment appointment;
final bool crossedOut;
final VoidCallback onTap;
const _OutsideChip({required this.appointment, required this.onTap});
const _OutsideChip({
required this.appointment,
required this.crossedOut,
required this.onTap,
});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final allDay = isAllDayLike(appointment);
final timeLabel = allDay ? null : appointment.startTime.formatHm();
final semanticsLabel = [
appointment.subject,
if (allDay)
A11yLabels.allDay
else
'${appointment.startTime.formatHm()}${appointment.endTime.formatHm()}',
if (crossedOut) A11yLabels.cancelled,
].join(', ');
// Past chips fade further, future/ongoing ones get a more saturated tint
// so the strip no longer reads as one uniform grey block.
@@ -163,7 +177,12 @@ class _OutsideChip extends StatelessWidget {
: theme.colorScheme.onSurface;
final subjectWeight = isPast ? FontWeight.w400 : FontWeight.w600;
return Material(
return Semantics(
button: true,
label: semanticsLabel,
onTap: onTap,
child: ExcludeSemantics(
child: Material(
color: appointment.color.withAlpha(backgroundAlpha),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(7)),
@@ -207,6 +226,8 @@ class _OutsideChip extends StatelessWidget {
),
),
),
),
),
);
}
}
@@ -220,7 +241,12 @@ class _OutsideOverflowChip extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Material(
return Semantics(
button: true,
label: A11yLabels.moreAppointments(count),
onTap: onTap,
child: ExcludeSemantics(
child: Material(
color: theme.colorScheme.secondaryContainer,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
clipBehavior: Clip.antiAlias,
@@ -236,6 +262,8 @@ class _OutsideOverflowChip extends StatelessWidget {
),
),
),
),
),
);
}
}
@@ -112,6 +112,7 @@ class _PeriodLabel extends StatelessWidget {
Icons.coffee_outlined,
size: 12,
color: secondaryTextColor.withAlpha(180),
semanticLabel: A11yLabels.breakTime,
),
);
}
@@ -328,7 +329,18 @@ class _DayColumn extends StatelessWidget {
left: cell.lane * width / cell.laneCount,
width: width / cell.laneCount,
child: switch (cell) {
LaidOutAppointment(:final appointment) => GestureDetector(
LaidOutAppointment(:final appointment) => Semantics(
button: true,
label: A11yLabels.appointmentLabel(
subject: appointment.subject,
location: appointment.location ?? '',
start: appointment.startTime,
end: appointment.endTime,
crossedOut: isCrossedOut(appointment),
),
onTap: () => onAppointmentTap(appointment),
child: ExcludeSemantics(
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () => onAppointmentTap(appointment),
child: AppointmentTile(
@@ -336,11 +348,21 @@ class _DayColumn extends StatelessWidget {
crossedOut: isCrossedOut(appointment),
),
),
LaidOutOverflow(:final appointments) => GestureDetector(
behavior: HitTestBehavior.opaque,
),
),
LaidOutOverflow(:final appointments) => Semantics(
button: true,
label: A11yLabels.moreAppointments(appointments.length),
onTap: () => _showOverflowSheet(context, appointments),
child: ExcludeSemantics(
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () =>
_showOverflowSheet(context, appointments),
child: _OverflowTile(count: appointments.length),
),
),
),
},
),
if (isToday)
@@ -14,6 +14,7 @@ import 'package:syncfusion_flutter_calendar/calendar.dart';
import '../../../../extensions/date_time.dart';
import '../../../../utils/haptics.dart';
import '../../../../widget/a11y/a11y_labels.dart';
import '../../../../widget/details_bottom_sheet.dart';
import '../data/calendar_layout.dart';
import '../data/calendar_logic.dart';
+49
View File
@@ -0,0 +1,49 @@
import '../../extensions/date_time.dart';
/// Zentrale deutschsprachige Screenreader-Labels. Single Source of Truth für
/// alle `Semantics`/`semanticLabel`/`tooltip`-Texte und der eine Punkt, an
/// dem später echtes l10n andockt (die App ist aktuell fest auf `de`).
abstract final class A11yLabels {
// Zustände
static const loading = 'Lädt';
static const downloadingFile = 'Lädt herunter';
// Chat
static const messageRead = 'Gelesen';
static const messageSent = 'Gesendet';
static const unread = 'Ungelesen';
static const favorite = 'Favorit';
static const draft = 'Entwurf';
static const yourReaction = 'deine Reaktion';
// Bilder
static const profilePicture = 'Profilbild';
static const groupPicture = 'Gruppenbild';
static const roomPlan = 'Raumplan der Schule als Grafik';
// Stundenplan
static const cancelled = 'Ausfall';
static const breakTime = 'Pause';
static const allDay = 'Ganztägig';
/// Beschreibt eine Stundenplan-Kachel für den Screenreader, z.B.
/// „Mathe, Raum 101, 08:0008:45, Ausfall". Zeilenumbrüche in [location]
/// (Raum/Lehrer stehen dort mehrzeilig) werden zu Trennern geglättet.
static String appointmentLabel({
required String subject,
required String location,
required DateTime start,
required DateTime end,
required bool crossedOut,
}) {
final parts = <String>[subject];
final loc = location.replaceAll('\n', ', ').trim();
if (loc.isNotEmpty) parts.add(loc);
parts.add('${start.formatHm()}${end.formatHm()}');
if (crossedOut) parts.add(cancelled);
return parts.join(', ');
}
/// „+3 weitere Termine" für die zusammengefasste Overflow-Kachel.
static String moreAppointments(int count) => '+$count weitere Termine';
}
+26 -6
View File
@@ -1,24 +1,43 @@
import 'package:flutter/material.dart';
import 'a11y/a11y_labels.dart';
class AppProgressIndicator extends StatelessWidget {
final double size;
final double strokeWidth;
final Color? color;
final String semanticsLabel;
const AppProgressIndicator._({
required this.size,
required this.strokeWidth,
this.color,
this.semanticsLabel = A11yLabels.loading,
});
const AppProgressIndicator.small({Color? color})
: this._(size: 16, strokeWidth: 2, color: color);
const AppProgressIndicator.small({Color? color, String? semanticsLabel})
: this._(
size: 16,
strokeWidth: 2,
color: color,
semanticsLabel: semanticsLabel ?? A11yLabels.loading,
);
const AppProgressIndicator.medium({Color? color})
: this._(size: 24, strokeWidth: 2.5, color: color);
const AppProgressIndicator.medium({Color? color, String? semanticsLabel})
: this._(
size: 24,
strokeWidth: 2.5,
color: color,
semanticsLabel: semanticsLabel ?? A11yLabels.loading,
);
const AppProgressIndicator.large({Color? color})
: this._(size: 40, strokeWidth: 3, color: color);
const AppProgressIndicator.large({Color? color, String? semanticsLabel})
: this._(
size: 40,
strokeWidth: 3,
color: color,
semanticsLabel: semanticsLabel ?? A11yLabels.loading,
);
@override
Widget build(BuildContext context) {
@@ -29,6 +48,7 @@ class AppProgressIndicator extends StatelessWidget {
child: CircularProgressIndicator(
strokeWidth: strokeWidth,
valueColor: AlwaysStoppedAnimation<Color>(resolved),
semanticsLabel: semanticsLabel,
),
);
}
+5 -1
View File
@@ -105,11 +105,15 @@ class _InlineErrorWrapper extends StatelessWidget {
child,
if (err != null) ...[
const SizedBox(height: 8),
Text(
Semantics(
liveRegion: true,
container: true,
child: Text(
err,
textAlign: TextAlign.center,
style: _asyncErrorTextStyle(context),
),
),
],
],
);
+1
View File
@@ -20,6 +20,7 @@ Future<String?> showEmojiPicker(
title: Row(
children: [
IconButton(
tooltip: 'Zurück',
onPressed: () => Navigator.of(pickerCtx).pop(),
icon: const Icon(Icons.arrow_back),
),
+1
View File
@@ -249,6 +249,7 @@ class _FileViewerState extends State<FileViewer> {
photoViewController.rotation += pi / 2;
});
},
tooltip: 'Drehen',
icon: const Icon(Icons.rotate_right),
),
],
+11 -3
View File
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import '../model/account_data.dart';
import 'a11y/a11y_labels.dart';
import 'user_avatar.dart';
class LargeProfilePictureView extends StatelessWidget {
@@ -15,9 +16,14 @@ class LargeProfilePictureView extends StatelessWidget {
});
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(title: Text(isGroup ? 'Gruppenbild' : 'Profilbild')),
body: PhotoView(
Widget build(BuildContext context) {
final label = isGroup ? A11yLabels.groupPicture : A11yLabels.profilePicture;
return Scaffold(
appBar: AppBar(title: Text(label)),
body: Semantics(
image: true,
label: label,
child: PhotoView(
minScale: 0.5,
maxScale: 3.0,
imageProvider: Image.network(
@@ -28,5 +34,7 @@ class LargeProfilePictureView extends StatelessWidget {
color: Theme.of(context).colorScheme.surface,
),
),
),
);
}
}
+23 -3
View File
@@ -10,6 +10,7 @@ import 'package:http/http.dart' as http;
import '../model/account_data.dart';
import '../model/endpoint_data.dart';
import '../push/push_avatar.dart';
import 'a11y/a11y_labels.dart';
import 'avatar_disk_cache.dart';
class UserAvatar extends StatefulWidget {
@@ -17,6 +18,10 @@ class UserAvatar extends StatefulWidget {
final bool isGroup;
final int size;
/// Screenreader-Beschreibung. Aufrufer, die den Namen kennen, sollten ihn
/// mitgeben; sonst greift ein generisches „Profilbild"/„Gruppenbild".
final String? semanticLabel;
/// Server-side pixel size requested for user avatars. `null` lets the
/// widget pick `(size * 4).clamp(64, 1024)` — enough headroom for typical
/// device pixel ratios. Group avatars ignore this (Spreed serves one
@@ -28,6 +33,7 @@ class UserAvatar extends StatefulWidget {
this.isGroup = false,
this.size = 20,
this.requestSize,
this.semanticLabel,
super.key,
});
@@ -225,7 +231,9 @@ class _UserAvatarState extends State<UserAvatar> {
final pending = _pendingAvatars.putIfAbsent(url, () {
final future = _fetch(url);
future.whenComplete(() {
if (identical(_pendingAvatars[url], future)) _pendingAvatars.remove(url);
if (identical(_pendingAvatars[url], future)) {
_pendingAvatars.remove(url);
}
});
return future;
});
@@ -345,12 +353,24 @@ class _UserAvatarState extends State<UserAvatar> {
);
}
return CircleAvatar(
return Semantics(
image: true,
label:
widget.semanticLabel ??
(widget.isGroup
? A11yLabels.groupPicture
: A11yLabels.profilePicture),
child: CircleAvatar(
radius: radius,
backgroundColor: theme.primaryColor,
foregroundColor: Colors.white,
child: ClipOval(
child: SizedBox(width: radius * 2, height: radius * 2, child: content),
child: SizedBox(
width: radius * 2,
height: radius * 2,
child: content,
),
),
),
);
}
+63
View File
@@ -0,0 +1,63 @@
import 'package:flutter_test/flutter_test.dart';
import 'package:jiffy/jiffy.dart';
import 'package:marianum_mobile/widget/a11y/a11y_labels.dart';
void main() {
setUpAll(() async {
// appointmentLabel formatiert über formatHm() (Jiffy) Locale einmal laden.
await Jiffy.setLocale('de');
});
group('A11yLabels.appointmentLabel', () {
test('setzt Fach, Ort und Zeitspanne zusammen', () {
final label = A11yLabels.appointmentLabel(
subject: 'Mathe',
location: 'Raum 101',
start: DateTime(2026, 5, 8, 8, 0),
end: DateTime(2026, 5, 8, 8, 45),
crossedOut: false,
);
expect(label, 'Mathe, Raum 101, 08:0008:45');
});
test('hängt bei Ausfall den Ausfall-Hinweis an', () {
final label = A11yLabels.appointmentLabel(
subject: 'Deutsch',
location: 'Raum 5',
start: DateTime(2026, 5, 8, 9, 0),
end: DateTime(2026, 5, 8, 9, 45),
crossedOut: true,
);
expect(label, endsWith(A11yLabels.cancelled));
expect(label, 'Deutsch, Raum 5, 09:0009:45, Ausfall');
});
test('glättet Zeilenumbrüche im Ort zu Trennern', () {
final label = A11yLabels.appointmentLabel(
subject: 'Sport',
location: 'Halle\nHr. Müller',
start: DateTime(2026, 5, 8, 10, 0),
end: DateTime(2026, 5, 8, 10, 45),
crossedOut: false,
);
expect(label, 'Sport, Halle, Hr. Müller, 10:0010:45');
});
test('lässt einen leeren Ort weg', () {
final label = A11yLabels.appointmentLabel(
subject: 'Pause',
location: '',
start: DateTime(2026, 5, 8, 11, 0),
end: DateTime(2026, 5, 8, 11, 15),
crossedOut: false,
);
expect(label, 'Pause, 11:0011:15');
});
});
group('A11yLabels.moreAppointments', () {
test('pluralisiert die Overflow-Beschriftung', () {
expect(A11yLabels.moreAppointments(3), '+3 weitere Termine');
});
});
}
@@ -0,0 +1,30 @@
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:marianum_mobile/widget/a11y/a11y_labels.dart';
import 'package:marianum_mobile/widget/app_progress_indicator.dart';
void main() {
Widget wrap(Widget child) => MaterialApp(home: Scaffold(body: child));
testWidgets('trägt standardmäßig das Lade-Label an den Screenreader', (
tester,
) async {
await tester.pumpWidget(wrap(const AppProgressIndicator.large()));
final indicator = tester.widget<CircularProgressIndicator>(
find.byType(CircularProgressIndicator),
);
expect(indicator.semanticsLabel, A11yLabels.loading);
});
testWidgets('reicht ein spezifisches Label durch', (tester) async {
await tester.pumpWidget(
wrap(const AppProgressIndicator.small(semanticsLabel: 'Wird gesendet')),
);
final indicator = tester.widget<CircularProgressIndicator>(
find.byType(CircularProgressIndicator),
);
expect(indicator.semanticsLabel, 'Wird gesendet');
});
}