fix: Update simple test page

Author: Who-is-PS

pages/tooltip/simple.page.tsx

@@ -44,6 +44,10 @@ export default function TooltipSimple() {
   const linkRef = useRef<HTMLDivElement>(null);
   const codeRef = useRef<HTMLDivElement>(null);
 
+  // Password input
+  const [showPassword, setShowPassword] = useState(false);
+  const passwordRef = useRef<HTMLInputElement>(null);
+
   return (
     <article>
       <h1>Tooltip</h1>
@@ -435,6 +439,55 @@ export default function TooltipSimple() {
               </div>
             </SpaceBetween>
           </section>
+
+          <section id="aria-describedby-example">
+            <h3>ARIA Described-by Example</h3>
+            <div
+              style={{ display: 'inline-block' }}
+              onMouseEnter={() => setShowPassword(true)}
+              onMouseLeave={() => setShowPassword(false)}
+            >
+              <label htmlFor="password-input" style={{ display: 'block', marginBottom: '4px' }}>
+                Password:
+              </label>
+              <input
+                ref={passwordRef}
+                id="password-input"
+                type="password"
+                placeholder="Enter password"
+                style={{
+                  padding: '8px',
+                  border: '1px solid #ccc',
+                  borderRadius: '4px',
+                }}
+                onFocus={() => setShowPassword(true)}
+                onBlur={() => setShowPassword(false)}
+              />
+              {showPassword && (
+                <Tooltip
+                  content={
+                    <div>
+                      <p>
+                        <strong>Password Rules:</strong>
+                      </p>
+                      <ul style={{ margin: 0, paddingLeft: '16px' }}>
+                        <li>Minimum of 8 characters</li>
+                        <li>
+                          Include at least one lowercase letter, one uppercase letter, one number and one special
+                          character
+                        </li>
+                        <li>Unique to this website</li>
+                      </ul>
+                    </div>
+                  }
+                  getTrack={() => passwordRef.current}
+                  position="bottom"
+                  onEscape={() => setShowPassword(false)}
+                  trackKey="password-rules"
+                />
+              )}
+            </div>
+          </section>
         </SpaceBetween>
       </ScreenshotArea>
     </article>

src/tooltip/__integ__/tooltip.test.ts

@@ -3,36 +3,60 @@
 import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
 import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
-import createWrapper from '../../../../lib/components/test-utils/selectors';
-
-import tooltipStyles from '../../../../lib/components/tooltip/styles.selectors.js';
-
-test(
-  'should not close any wrapping modals when the tooltip detects an Escape keypress',
-  useBrowser(async browser => {
-    await browser.url('/#/light/modal/with-tooltip');
-    const page = new BasePageObject(browser);
-
-    const openButtonSelector = createWrapper().findButton().toSelector();
-    await page.waitForVisible(openButtonSelector);
-    await page.click(openButtonSelector);
-
-    const modal = createWrapper().findModal();
-    const slider = modal.findContent().findSlider();
-    await page.waitForVisible(slider.toSelector());
-
-    // Slider on the page is set at 50% on purpose. `hoverElement` will move the
-    // mouse to the center of the track where the "thumb" is.
-    await page.hoverElement(slider.findNativeInput().toSelector());
-    await page.waitForVisible(`.${tooltipStyles.root}`);
-
-    // Press once to close the tooltip
-    await page.keys(['Escape']);
-    await expect(page.isDisplayed(`.${tooltipStyles.root}`)).resolves.toBe(false);
-    await expect(page.isDisplayed(modal.toSelector())).resolves.toBe(true);
-
-    // Press again to close the modal
-    await page.keys(['Escape']);
-    await expect(page.isDisplayed(modal.toSelector())).resolves.toBe(false);
-  })
-);
+import tooltipStyles from '../../../lib/components/tooltip/styles.selectors.js';
+
+class TooltipPageObject extends BasePageObject {
+  async waitForTooltip() {
+    console.log('Waiting for tooltip with selector:', `.${tooltipStyles.root}`);
+    await this.waitForVisible(`.${tooltipStyles.root}`);
+  }
+
+  isTooltipVisible() {
+    return this.isDisplayed(`.${tooltipStyles.root}`);
+  }
+
+  getTooltipContent() {
+    return this.getText(`.${tooltipStyles.root}`);
+  }
+}
+
+describe('Tooltip', () => {
+  test(
+    'shows tooltip on hover, checks content and closes with escape',
+    useBrowser(async browser => {
+      await browser.url('/#/light/tooltip/simple');
+      const page = new TooltipPageObject(browser);
+
+      // Wait for page to load
+      await page.waitForVisible('[data-testid="hover-button"]');
+
+      // // Test hover
+      await page.hoverElement('[data-testid="hover-button"]');
+
+      // await page.waitForTooltip();
+      await expect(page.isTooltipVisible()).resolves.toBe(true);
+      console.log('JJAAAA');
+
+      const content = await page.getTooltipContent();
+      expect(content).toBe('Tooltip positioned on top');
+      console.log(content);
+
+      await browser.keys('Escape');
+      await expect(page.isTooltipVisible()).resolves.toBe(false);
+
+      // await expect(page.isTooltipVisible()).resolves.toBe(false);
+
+      // Verify content is not accessible when tooltip is hidden
+      // await expect(page.getTooltipContent()).resolves.toBe('');
+      // expect(content).toBe('Expected tooltip text');
+      // // Move away to hide tooltip
+      // await page.hoverElement('body');
+      // await expect(page.isTooltipVisible()).resolves.toBe(false);
+
+      // // Test keyboard focus
+      // await page.click('[data-testid="hover-button"]');
+      // await page.waitForTooltip();
+      // await expect(page.isTooltipVisible()).resolves.toBe(true);
+    })
+  );
+});

src/tooltip/internal.tsx

@@ -34,19 +34,21 @@ export default function InternalTooltip({
 }: InternalTooltipComponentProps) {
   const baseProps = getBaseProps(restProps);
   const trackRef = React.useRef<HTMLElement | SVGElement | null>(null);
-  const tooltipId = React.useMemo(() => generateTooltipId(), []);
+  const tooltipId = React.useMemo(() => {
+    return trackKey ? `tooltip-${trackKey}` : generateTooltipId();
+  }, [trackKey]);
 
   // Update the ref with the current tracked element
   React.useEffect(() => {
     const element = getTrack();
     trackRef.current = element;
     // Add aria-describedby to the tracked element for accessibility
-    if (element) {
+    if (element && element.nodeType === Node.ELEMENT_NODE) {
       element.setAttribute('aria-describedby', tooltipId);
     }
     return () => {
       // Clean up aria-describedby when tooltip unmounts
-      if (element) {
+      if (element && element.nodeType === Node.ELEMENT_NODE) {
         element.removeAttribute('aria-describedby');
       }
     };