fix(tooltip): backwards compatibility (#19922)

* fix(tooltip): backwards compatibility

* test(tooltip): update tests to reflect ARIA logic

* chore(tooltip): clean up hasAriaLabel

---------

Co-authored-by: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com>

Author: heloiselui

packages/react/src/components/IconButton/index.tsx

@@ -336,9 +336,6 @@ IconButton.propTypes = {
   /**
    * Provide the label to be rendered inside of the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.
-   * If the child node already has an `aria-label`, the tooltip will not apply
-   * `aria-labelledby`. If the child node has `aria-labelledby`, that value will
-   * be used instead. Otherwise, the tooltip will use its own ID as the label.
    * This means that if you have text in the child node it will not be
    * announced to the screen reader.
    * If using `badgeCount={0}`, make sure the label explains that there is a

packages/react/src/components/Tooltip/Tooltip.tsx

@@ -89,9 +89,6 @@ interface TooltipBaseProps {
   /**
    * Provide the label to be rendered inside of the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.
-   * If the child already has an `aria-label`, the tooltip will not apply
-   * `aria-labelledby`. If the child has its own `aria-labelledby`, that value
-   * will be kept. Otherwise, the tooltip will use its own ID to label the child.
    * This means that if you have text in the child node, that it will not be
    * announced to the screen reader.
    *
@@ -142,28 +139,13 @@ const Tooltip: TooltipComponent = React.forwardRef(
     const child = React.Children.only(children);
 
     const {
-      'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy,
       'aria-describedby': ariaDescribedBy,
     } = child?.props ?? {};
 
     const hasLabel = !!label;
-    const hasAriaLabel =
-      typeof ariaLabel === 'string' ? ariaLabel.trim() !== '' : false;
-
-    // An `aria-label` takes precedence over `aria-describedby`, but when it's
-    // needed and the user doesn't specify one, the fallback `id` is used.
-    const labelledBy = hasAriaLabel
-      ? undefined
-      : hasLabel
-        ? (ariaLabelledBy ?? id)
-        : undefined;
-
-    // If `aria-label` is present, use any provided `aria-describedby`.
-    // If not, fallback to child's `aria-describedby` or the tooltip `id` if needed.
-    const describedBy = hasAriaLabel
-      ? ariaDescribedBy
-      : (ariaDescribedBy ?? (!hasLabel && !ariaLabelledBy ? id : undefined));
+    const labelledBy = ariaLabelledBy ?? (hasLabel ? id : undefined);
+    const describedBy = ariaDescribedBy ?? (!hasLabel ? id : undefined);
 
     const triggerProps = {
       onFocus: () => !focusByMouse && setOpen(true),

packages/react/src/components/Tooltip/__tests__/Tooltip-test.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -112,15 +112,14 @@ describe('Tooltip', () => {
 });
 
 describe('Tooltip ARIA logic', () => {
-  it('should not use aria-labelledby when the button already has aria-label', () => {
+  it('should prefer aria-describedby from the button if already present', () => {
     render(
-      <Tooltip defaultOpen label="Label text">
-        <button aria-label="Aria Label">X</button>
+      <Tooltip defaultOpen description="Some description">
+        <button aria-describedby="desc-id">X</button>
       </Tooltip>
     );
     const button = screen.getByRole('button');
-    expect(button).not.toHaveAttribute('aria-labelledby');
-    expect(button).toHaveAttribute('aria-label', 'Aria Label');
+    expect(button).toHaveAttribute('aria-describedby', 'desc-id');
   });
 
   it('should keep the button’s aria-labelledby if it already has one', () => {