feat: ✨ Enhance tooltip accessibility using Semantics live region

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,8 @@ class ShowcaseController {
               targetPadding: config.targetPadding,
               targetTooltipGap: config.targetTooltipGap,
               showcaseController: this,
+              semanticEnable:
+                  config.semanticEnable || showcaseView.semanticEnable,
             ),
             if (_getFloatingActionWidget case final floatAction?) floatAction,
           ];
@@ -424,6 +426,8 @@ class ShowcaseController {
             child: TooltipActionButtonWidget(
               config: actionData[i],
               showCaseState: showcaseView,
+              semanticEnable:
+                  config.semanticEnable || showcaseView.semanticEnable,
             ),
           ),
     ];

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.
+  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
+                ? Semantics(
+                    liveRegion: true,
+                    child: defaultToolTipWidget,
+                  )
+                : defaultToolTipWidget,
           ),
           if (widget.tooltipActions.isNotEmpty &&
               (widget.tooltipActionConfig.position.isOutside ||

lib/src/widget/tooltip_action_button_widget.dart

@@ -38,6 +38,7 @@ class TooltipActionButtonWidget extends StatelessWidget {
   const TooltipActionButtonWidget({
     required this.config,
     required this.showCaseState,
+    this.semanticEnable = false,
     super.key,
   });
 
@@ -47,11 +48,14 @@ class TooltipActionButtonWidget extends StatelessWidget {
   /// This is used for close, next and previous showcase navigation.
   final ShowcaseView showCaseState;
 
+  /// Whether to enable semantic properties for accessibility.
+  final bool semanticEnable;
+
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
 
-    return config.button ??
+    final child = config.button ??
         MouseRegion(
           cursor: SystemMouseCursors.click,
           child: GestureDetector(
@@ -85,6 +89,18 @@ class TooltipActionButtonWidget extends StatelessWidget {
             ),
           ),
         );
+
+    // Semantics widget is used to improve accessibility for screen readers.
+    // Only applied when semanticEnable is true.
+    if (semanticEnable) {
+      return Semantics(
+        button: true,
+        liveRegion: true,
+        child: child,
+      );
+    }
+
+    return child;
   }
 
   void _handleOnTap() {