feat: ✨ Enhance tooltip accessibility using Semantics live region (#604)

Author: vasu-nageshri

CHANGELOG.md

@@ -4,7 +4,8 @@
 - Fixed [#587](https://github.com/SimformSolutionsPvtLtd/showcaseview/issues/587) - Fixed ShowcaseView.withWidget container positioning issues on web
 - Fixed [#588](https://github.com/SimformSolutionsPvtLtd/showcaseview/issues/588) & [#593](https://github.com/SimformSolutionsPvtLtd/showcaseview/issues/593) - Fixed incorrect ShowcaseView callback scope by adding optional scope parameter
 - Feature [#600](https://github.com/SimformSolutionsPvtLtd/showcaseview/issues/600) - Added dynamic onComplete callback registration with `addOnCompleteCallback` and `removeOnCompleteCallback` methods
-- Fixed [#577](https://github.com/SimformSolutionsPvtLtd/showcaseview/issues/577) - Resolve issue where long tooltip text was rendered outside the screen bounds 
+- Fixed [#577](https://github.com/SimformSolutionsPvtLtd/showcaseview/issues/577) - Resolve issue where long tooltip text was rendered outside the screen bounds
+- Feature [#586](https://github.com/SimformSolutionsPvtLtd/showcaseview/issues/586): Enhance tooltip accessibility using Semantics live region
 
 ## [5.0.1]
 

doc/documentation.md

@@ -129,6 +129,7 @@ Reference](https://pub.dev/documentation/showcaseview/latest/showcaseview/).
 ```dart
 ShowcaseView.register(
   autoPlayDelay: const Duration(seconds: 3),
+  semanticEnable: true, // Enable accessibility support globally
   globalFloatingActionWidget: (showcaseContext) => FloatingActionWidget(
     left: 16,
     bottom: 16,

lib/src/showcase/showcase_controller.dart

@@ -350,6 +350,7 @@ class ShowcaseController {
               targetPadding: config.targetPadding,
               targetTooltipGap: config.targetTooltipGap,
               showcaseController: this,
+              semanticEnable: showcaseView.semanticEnable,
             ),
             if (_getFloatingActionWidget case final floatAction?) floatAction,
           ];

lib/src/showcase/showcase_view.dart

@@ -80,6 +80,7 @@ class ShowcaseView {
     this.globalTooltipActions,
     this.globalFloatingActionWidget,
     this.hideFloatingActionWidgetForShowcase = const [],
+    this.semanticEnable = false,
   }) {
     ShowcaseService.instance.register(this, scope: scope);
     _hideFloatingWidgetKeys = {
@@ -145,6 +146,15 @@ class ShowcaseView {
   /// Enable/disable showcase globally.
   bool enableShowcase;
 
+  /// Whether to enable semantic properties for accessibility.
+  ///
+  /// When set to true, semantic widgets will be added to improve
+  /// screen reader support throughout the showcase. When false,
+  /// semantic properties will not be applied.
+  ///
+  /// Defaults to false.
+  final bool semanticEnable;
+
   /// Custom static floating action widget to show a static non-animating
   /// widget anywhere on the screen for all the showcase widget.
   FloatingActionBuilderCallback? globalFloatingActionWidget;

lib/src/tooltip/tooltip_wrapper.dart

@@ -66,6 +66,7 @@ class ToolTipWrapper extends StatefulWidget {
     required this.tooltipPadding,
     required this.toolTipSlideEndDistance,
     required this.targetTooltipGap,
+    this.semanticEnable = false,
     this.scaleAnimationAlignment,
     this.tooltipPosition,
     this.titlePadding,
@@ -108,6 +109,7 @@ class ToolTipWrapper extends StatefulWidget {
   final EdgeInsets targetPadding;
   final ShowcaseController showcaseController;
   final double targetTooltipGap;
+  final bool semanticEnable;
 
   @override
   State<ToolTipWrapper> createState() => _ToolTipWrapperState();
@@ -254,7 +256,12 @@ class _ToolTipWrapperState extends State<ToolTipWrapper>
           _TooltipLayoutId(
             id: TooltipLayoutSlot.tooltipBox,
             key: UniqueKey(),
-            child: defaultToolTipWidget,
+            child: !widget.semanticEnable
+                ? defaultToolTipWidget
+                : Semantics(
+                    liveRegion: true,
+                    child: defaultToolTipWidget,
+                  ),
           ),
           if (widget.tooltipActions.isNotEmpty &&
               (widget.tooltipActionConfig.position.isOutside ||

lib/src/widget/tooltip_action_button_widget.dart

@@ -51,7 +51,7 @@ class TooltipActionButtonWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
 
-    return config.button ??
+    final child = config.button ??
         MouseRegion(
           cursor: SystemMouseCursors.click,
           child: GestureDetector(
@@ -85,6 +85,18 @@ class TooltipActionButtonWidget extends StatelessWidget {
             ),
           ),
         );
+
+    // Semantics widget is used to improve accessibility for screen readers.
+    // Only applied when semanticEnable is true.
+    if (showCaseState.semanticEnable) {
+      return Semantics(
+        button: true,
+        liveRegion: true,
+        child: child,
+      );
+    }
+
+    return child;
   }
 
   void _handleOnTap() {