Merge pull request #150 from AcarFurkan/add-semantics

Adding Semantics Feature for Improved Accessibility
woltapp · Mar 5, 2024 · b5c5f24 · b5c5f24
2 parents 2fe5ca6 + 6b988d7
commit b5c5f24
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 28 deletions.
diff --git a/demo_ui_components/lib/src/button/wolt_modal_sheet_back_button.dart b/demo_ui_components/lib/src/button/wolt_modal_sheet_back_button.dart
@@ -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;
+  }
 }
diff --git a/demo_ui_components/lib/src/button/wolt_modal_sheet_close_button.dart b/demo_ui_components/lib/src/button/wolt_modal_sheet_close_button.dart
@@ -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;
+  }
 }
diff --git a/lib/src/modal_type/wolt_modal_type.dart b/lib/src/modal_type/wolt_modal_type.dart
@@ -1,5 +1,7 @@
 import 'dart:math';
 
+import 'package:flutter/material.dart';
+
 /// Enum representing the type of the modal.
 enum WoltModalType {
   bottomSheet,
@@ -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;
+    }
+  }
 }
diff --git a/lib/src/wolt_modal_sheet.dart b/lib/src/wolt_modal_sheet.dart
@@ -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.
@@ -285,6 +286,7 @@ class _WoltModalSheetState extends State<WoltModalSheet> {
                   LayoutId(
                     id: barrierLayoutId,
                     child: GestureDetector(
+                      excludeFromSemantics: true,
                       behavior: HitTestBehavior.opaque,
                       onTap: () {
                         if (widget.route.barrierDismissible) {
@@ -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,
+                                );
+                              },
+                            ),
                           ),
                         ),
                       ),