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]
 

lib/src/tooltip/tooltip_wrapper.dart

@@ -172,48 +172,57 @@ class _ToolTipWrapperState extends State<ToolTipWrapper>
     final targetPosition = box.localToGlobal(Offset.zero);
     final targetSize = box.size;
 
+    // Build the tooltip widget based on whether a custom container is provided.
+    // Both branches are wrapped with Semantics to improve accessibility by
+    // marking the tooltip as a live region for screen readers.
     final defaultToolTipWidget = widget.container != null
-        ? MouseRegion(
-            cursor: widget.onTooltipTap == null
-                ? MouseCursor.defer
-                : SystemMouseCursors.click,
-            child: GestureDetector(
-              onTap: widget.onTooltipTap,
-              child: RepaintBoundary(
-                child: widget.container ?? const SizedBox.shrink(),
+        ? Semantics(
+            liveRegion: true,
+            child: MouseRegion(
+              cursor: widget.onTooltipTap == null
+                  ? MouseCursor.defer
+                  : SystemMouseCursors.click,
+              child: GestureDetector(
+                onTap: widget.onTooltipTap,
+                child: RepaintBoundary(
+                  child: widget.container ?? const SizedBox.shrink(),
+                ),
               ),
             ),
           )
-        : MouseRegion(
-            cursor: widget.onTooltipTap == null
-                ? MouseCursor.defer
-                : SystemMouseCursors.click,
-            child: GestureDetector(
-              onTap: widget.onTooltipTap,
-              child: RepaintBoundary(
-                child: Container(
-                  padding: widget.tooltipPadding,
-                  decoration: BoxDecoration(
-                    color: widget.tooltipBackgroundColor,
-                    borderRadius: widget.tooltipBorderRadius ??
-                        const BorderRadius.all(Radius.circular(8)),
-                  ),
-                  child: ToolTipContent(
-                    title: widget.title,
-                    description: widget.description,
-                    titleTextAlign: widget.titleTextAlign,
-                    descriptionTextAlign: widget.descriptionTextAlign,
-                    titleAlignment: widget.titleAlignment,
-                    descriptionAlignment: widget.descriptionAlignment,
-                    textColor: widget.textColor,
-                    titleTextStyle: widget.titleTextStyle,
-                    descTextStyle: widget.descTextStyle,
-                    titlePadding: widget.titlePadding,
-                    descriptionPadding: widget.descriptionPadding,
-                    titleTextDirection: widget.titleTextDirection,
-                    descriptionTextDirection: widget.descriptionTextDirection,
-                    tooltipActionConfig: widget.tooltipActionConfig,
-                    tooltipActions: widget.tooltipActions,
+        : Semantics(
+            liveRegion: true,
+            child: MouseRegion(
+              cursor: widget.onTooltipTap == null
+                  ? MouseCursor.defer
+                  : SystemMouseCursors.click,
+              child: GestureDetector(
+                onTap: widget.onTooltipTap,
+                child: RepaintBoundary(
+                  child: Container(
+                    padding: widget.tooltipPadding,
+                    decoration: BoxDecoration(
+                      color: widget.tooltipBackgroundColor,
+                      borderRadius: widget.tooltipBorderRadius ??
+                          const BorderRadius.all(Radius.circular(8)),
+                    ),
+                    child: ToolTipContent(
+                      title: widget.title,
+                      description: widget.description,
+                      titleTextAlign: widget.titleTextAlign,
+                      descriptionTextAlign: widget.descriptionTextAlign,
+                      titleAlignment: widget.titleAlignment,
+                      descriptionAlignment: widget.descriptionAlignment,
+                      textColor: widget.textColor,
+                      titleTextStyle: widget.titleTextStyle,
+                      descTextStyle: widget.descTextStyle,
+                      titlePadding: widget.titlePadding,
+                      descriptionPadding: widget.descriptionPadding,
+                      titleTextDirection: widget.titleTextDirection,
+                      descriptionTextDirection: widget.descriptionTextDirection,
+                      tooltipActionConfig: widget.tooltipActionConfig,
+                      tooltipActions: widget.tooltipActions,
+                    ),
                   ),
                 ),
               ),

lib/src/widget/tooltip_action_button_widget.dart

@@ -51,40 +51,46 @@ class TooltipActionButtonWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
 
-    return config.button ??
-        MouseRegion(
-          cursor: SystemMouseCursors.click,
-          child: GestureDetector(
-            onTap: _handleOnTap,
-            child: Container(
-              padding: config.padding,
-              decoration: BoxDecoration(
-                color: config.backgroundColor ?? theme.primaryColor,
-                borderRadius: config.borderRadius,
-                border: config.border,
-              ),
-              child: Row(
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  if (config.leadIcon case final lead?)
-                    Padding(
-                      padding: lead.padding ?? const EdgeInsets.only(right: 5),
-                      child: lead.icon,
-                    ),
-                  Text(
-                    config.name ?? config.type?.actionName ?? '',
-                    style: config.textStyle,
-                  ),
-                  if (config.tailIcon case final tail?)
-                    Padding(
-                      padding: tail.padding ?? const EdgeInsets.only(left: 5),
-                      child: tail.icon,
+    // Semantics widget is used to improve accessibility for screen readers.
+    return Semantics(
+      button: true,
+      liveRegion: true,
+      child: config.button ??
+          MouseRegion(
+            cursor: SystemMouseCursors.click,
+            child: GestureDetector(
+              onTap: _handleOnTap,
+              child: Container(
+                padding: config.padding,
+                decoration: BoxDecoration(
+                  color: config.backgroundColor ?? theme.primaryColor,
+                  borderRadius: config.borderRadius,
+                  border: config.border,
+                ),
+                child: Row(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    if (config.leadIcon case final lead?)
+                      Padding(
+                        padding:
+                            lead.padding ?? const EdgeInsets.only(right: 5),
+                        child: lead.icon,
+                      ),
+                    Text(
+                      config.name ?? config.type?.actionName ?? '',
+                      style: config.textStyle,
                     ),
-                ],
+                    if (config.tailIcon case final tail?)
+                      Padding(
+                        padding: tail.padding ?? const EdgeInsets.only(left: 5),
+                        child: tail.icon,
+                      ),
+                  ],
+                ),
               ),
             ),
           ),
-        );
+    );
   }
 
   void _handleOnTap() {