Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding Semantics Feature for Improved Accessibility #150

Merged
merged 10 commits into from
Mar 5, 2024
Merged

Adding Semantics Feature for Improved Accessibility #150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a7ef08a
Draft: add semantics
AcarFurkan Feb 20, 2024
7b3401e
added close, back button semantics added
AcarFurkan Feb 21, 2024
9470396
fix: dart format
AcarFurkan Feb 21, 2024
447a6b2
refactor excludeFromSemantics added to CustomMultiChildLayout
AcarFurkan Feb 21, 2024
c1a12d3
fix dart format
AcarFurkan Feb 21, 2024
79f5d01
Refactor add just content part
AcarFurkan Feb 21, 2024
40ac569
fix dart format
AcarFurkan Feb 21, 2024
f6f53a4
Merge branch 'main' into add-semantics
AcarFurkan Mar 5, 2024
60a8209
move route label logic to WoltModalType enum
AcarFurkan Mar 5, 2024
6b988d7
convert localizations.bottomSheetLabel to localizations.dialogLabel
AcarFurkan Mar 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 16 additions & 2 deletions demo_ui_components/lib/src/button/wolt_modal_sheet_back_button.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,22 @@ class WoltModalSheetBackButton extends StatelessWidget {
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsetsDirectional.only(start: 16),
child: WoltCircularElevatedButton(
onPressed: onBackPressed, icon: Icons.arrow_back_rounded),
child: Semantics(
label: semanticsLabel(context),
container: true,
button: true,
child: ExcludeSemantics(
child: WoltCircularElevatedButton(
onPressed: onBackPressed, icon: Icons.arrow_back_rounded),
),
),
);
}

String semanticsLabel(BuildContext context) {
return Localizations.of<MaterialLocalizations>(
context, MaterialLocalizations)
?.backButtonTooltip ??
const DefaultMaterialLocalizations().backButtonTooltip;
}
}
20 changes: 17 additions & 3 deletions demo_ui_components/lib/src/button/wolt_modal_sheet_close_button.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,24 @@ class WoltModalSheetCloseButton extends StatelessWidget {
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsetsDirectional.only(end: 16),
child: WoltCircularElevatedButton(
onPressed: onClosed ?? Navigator.of(context).pop,
icon: Icons.close,
child: Semantics(
label: semanticsLabel(context),
container: true,
button: true,
child: ExcludeSemantics(
child: WoltCircularElevatedButton(
onPressed: onClosed ?? Navigator.of(context).pop,
icon: Icons.close,
),
),
),
);
}

String semanticsLabel(BuildContext context) {
return Localizations.of<MaterialLocalizations>(
context, MaterialLocalizations)
?.closeButtonLabel ??
const DefaultMaterialLocalizations().closeButtonLabel;
}
}
17 changes: 17 additions & 0 deletions lib/src/modal_type/wolt_modal_type.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import 'dart:math';

import 'package:flutter/material.dart';

/// Enum representing the type of the modal.
enum WoltModalType {
bottomSheet,
Expand Down Expand Up @@ -61,4 +63,19 @@ enum WoltModalType {
return (totalHeight - modalHeight) / 2;
}
}

/// Returns the semantic label to be used for accessibility purposes based on the modal type.
///
/// [context] is the BuildContext used to access MaterialLocalizations.
String routeLabel(BuildContext context) {
final MaterialLocalizations localizations =
MaterialLocalizations.of(context);
switch (this) {
case WoltModalType.bottomSheet:
// TODO: Add support for bottomSheetLabel once minimum supported version allows // return localizations.bottomSheetLabel;
return localizations.dialogLabel;
case WoltModalType.dialog:
return localizations.dialogLabel;
}
}
}
52 changes: 29 additions & 23 deletions lib/src/wolt_modal_sheet.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,7 @@ class _WoltModalSheetState extends State<WoltModalSheet> {
Widget build(BuildContext context) {
final themeData = Theme.of(context).extension<WoltModalSheetThemeData>();
final defaultThemeData = WoltModalSheetDefaultThemeData(context);
final String routeLabel = _modalType.routeLabel(context);
return _decorator(
// The order of the notifier builders matter because we want to use the same instance of
// the page list whenever page index is updated.
Expand Down Expand Up @@ -285,6 +286,7 @@ class _WoltModalSheetState extends State<WoltModalSheet> {
LayoutId(
id: barrierLayoutId,
child: GestureDetector(
excludeFromSemantics: true,
behavior: HitTestBehavior.opaque,
onTap: () {
if (widget.route.barrierDismissible) {
Expand All @@ -304,29 +306,33 @@ class _WoltModalSheetState extends State<WoltModalSheet> {
id: contentLayoutId,
child: KeyedSubtree(
key: _childKey,
child: GestureDetector(
onVerticalDragStart:
enableDrag ? _handleDragStart : null,
onVerticalDragUpdate:
enableDrag ? _handleDragUpdate : null,
onVerticalDragEnd: enableDrag ? _handleDragEnd : null,
child: Material(
color: pageBackgroundColor,
elevation: modalElevation,
surfaceTintColor: surfaceTintColor,
shadowColor: shadowColor,
shape: shape,
clipBehavior: clipBehavior,
child: LayoutBuilder(
builder: (_, constraints) {
return WoltModalSheetAnimatedSwitcher(
woltModalType: _modalType,
pageIndex: pageIndex,
pages: pages,
sheetWidth: constraints.maxWidth,
showDragHandle: showDragHandle,
);
},
child: Semantics(
label: routeLabel,
child: GestureDetector(
excludeFromSemantics: true,
onVerticalDragStart:
enableDrag ? _handleDragStart : null,
onVerticalDragUpdate:
enableDrag ? _handleDragUpdate : null,
onVerticalDragEnd: enableDrag ? _handleDragEnd : null,
child: Material(
color: pageBackgroundColor,
elevation: modalElevation,
surfaceTintColor: surfaceTintColor,
shadowColor: shadowColor,
shape: shape,
clipBehavior: clipBehavior,
child: LayoutBuilder(
builder: (_, constraints) {
return WoltModalSheetAnimatedSwitcher(
woltModalType: _modalType,
pageIndex: pageIndex,
pages: pages,
sheetWidth: constraints.maxWidth,
showDragHandle: showDragHandle,
);
},
),
),
),
),
Expand Down
Loading