fix: Update examples pages

Author: Who-is-PS

pages/tooltip/component-usage.page.tsx

@@ -67,7 +67,15 @@ function DisabledActionsExample() {
             onMouseLeave={() => setShowDelete(false)}
             style={{ display: 'inline-block' }}
           >
-            <Button disabled={true} iconName="remove">
+            <Button
+              aria-disabled="true"
+              iconName="remove"
+              onClick={e => e.preventDefault()}
+              nativeButtonAttributes={{
+                onFocus: () => setShowDelete(true),
+                onBlur: () => setShowDelete(false),
+              }}
+            >
               Delete
             </Button>
             {showDelete && (
@@ -87,7 +95,16 @@ function DisabledActionsExample() {
             onMouseLeave={() => setShowSave(false)}
             style={{ display: 'inline-block' }}
           >
-            <Button disabled={true} variant="primary" iconName="upload">
+            <Button
+              aria-disabled="true"
+              variant="primary"
+              iconName="upload"
+              onClick={e => e.preventDefault()}
+              nativeButtonAttributes={{
+                onFocus: () => setShowSave(true),
+                onBlur: () => setShowSave(false),
+              }}
+            >
               Save
             </Button>
             {showSave && (
@@ -107,7 +124,15 @@ function DisabledActionsExample() {
             onMouseLeave={() => setShowDownload(false)}
             style={{ display: 'inline-block' }}
           >
-            <Button disabled={true} iconName="download">
+            <Button
+              aria-disabled="true"
+              iconName="download"
+              onClick={e => e.preventDefault()}
+              nativeButtonAttributes={{
+                onFocus: () => setShowDownload(true),
+                onBlur: () => setShowDownload(false),
+              }}
+            >
               Download Report
             </Button>
             {showDownload && (

pages/tooltip/simple.page.tsx

@@ -296,6 +296,9 @@ export default function TooltipSimple() {
               ref={disabledRef}
               onMouseEnter={() => setShowDisabled(true)}
               onMouseLeave={() => setShowDisabled(false)}
+              onFocus={() => setShowDisabled(true)}
+              onBlur={() => setShowDisabled(false)}
+              tabIndex={0}
               style={{ display: 'inline-block' }}
             >
               <Button disabled={true} iconName="upload">
@@ -389,6 +392,9 @@ export default function TooltipSimple() {
                 ref={codeRef}
                 onMouseEnter={() => setShowCode(true)}
                 onMouseLeave={() => setShowCode(false)}
+                onFocus={() => setShowCode(true)}
+                onBlur={() => setShowCode(false)}
+                tabIndex={0}
                 style={{ display: 'inline-block' }}
               >
                 <span

src/internal/components/tooltip/index.tsx

@@ -23,6 +23,10 @@ export interface TooltipProps {
   onDismiss?: () => void;
 }
 
+// Generate unique ID for older React versions
+let tooltipIdCounter = 0;
+const generateTooltipId = () => `internal-tooltip-${++tooltipIdCounter}`;
+
 export default function Tooltip({
   value,
   trackRef,
@@ -33,6 +37,23 @@ export default function Tooltip({
   hideOnOverscroll,
   onDismiss,
 }: TooltipProps) {
+  const tooltipId = React.useMemo(() => generateTooltipId(), []);
+
+  // Add aria-describedby to the tracked element for accessibility
+  React.useEffect(() => {
+    const element = trackRef.current;
+    if (element) {
+      element.setAttribute('aria-describedby', tooltipId);
+    }
+
+    return () => {
+      // Clean up aria-describedby when tooltip unmounts
+      if (element) {
+        element.removeAttribute('aria-describedby');
+      }
+    };
+  }, [tooltipId, trackRef]);
+
   if (!trackKey && (typeof value === 'string' || typeof value === 'number')) {
     trackKey = value;
   }
@@ -63,7 +84,7 @@ export default function Tooltip({
 
   return (
     <Portal>
-      <div className={styles.root} data-testid={trackKey}>
+      <div className={styles.root} data-testid={trackKey} id={tooltipId} role="tooltip">
         <Transition in={true}>
           {() => (
             <PopoverContainer

src/tooltip/internal.tsx

@@ -18,6 +18,10 @@ import styles from './styles.css.js';
 
 type InternalTooltipComponentProps = InternalTooltipProps & InternalBaseComponentProps;
 
+// Generate unique ID for older React versions
+let tooltipIdCounter = 0;
+const generateTooltipId = () => `tooltip-${++tooltipIdCounter}`;
+
 export default function InternalTooltip({
   content,
   getTrack,
@@ -30,11 +34,23 @@ export default function InternalTooltip({
 }: InternalTooltipComponentProps) {
   const baseProps = getBaseProps(restProps);
   const trackRef = React.useRef<HTMLElement | SVGElement | null>(null);
+  const tooltipId = React.useMemo(() => generateTooltipId(), []);
 
   // Update the ref with the current tracked element
   React.useEffect(() => {
-    trackRef.current = getTrack();
-  });
+    const element = getTrack();
+    trackRef.current = element;
+    // Add aria-describedby to the tracked element for accessibility
+    if (element) {
+      element.setAttribute('aria-describedby', tooltipId);
+    }
+    return () => {
+      // Clean up aria-describedby when tooltip unmounts
+      if (element) {
+        element.removeAttribute('aria-describedby');
+      }
+    };
+  }, [getTrack, tooltipId]);
 
   if (!trackKey && (typeof content === 'string' || typeof content === 'number')) {
     trackKey = content;
@@ -75,6 +91,8 @@ export default function InternalTooltip({
         className={clsx(styles.root, baseProps.className)}
         data-testid={trackKey}
         ref={__internalRootRef}
+        id={tooltipId}
+        role="tooltip"
       >
         <Transition in={true}>
           {() => (