From 4b95e451a49df67da7ab5fc1c2157fbbe547a11b Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Fri, 11 Aug 2023 13:30:32 -0700
Subject: [PATCH] [EuiCollapsibleNavBeta] Improve collapsed button icon screen
 reader UX (#7055)

---
 .../collapsible_nav_item.test.tsx.snap        |  1 +
 .../collapsed_nav_button.test.tsx.snap        |  2 ++
 .../collapsed_nav_item.test.tsx.snap          |  2 ++
 .../collapsed_nav_popover.test.tsx.snap       |  1 +
 .../collapsed/collapsed_nav_button.tsx        |  1 +
 .../collapsible_nav_item.tsx                  | 13 +++-----
 src/components/tool_tip/tool_tip.test.tsx     | 32 +++++++++++++++++++
 src/components/tool_tip/tool_tip.tsx          | 22 +++----------
 src/components/tool_tip/tool_tip_anchor.tsx   | 32 ++++++++-----------
 upcoming_changelogs/7055.md                   |  3 ++
 10 files changed, 65 insertions(+), 44 deletions(-)
 create mode 100644 upcoming_changelogs/7055.md

diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap
index 6f83612fba5..cc25736a114 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`EuiCollapsibleNavItem renders a collapsed button icon when in a collaps
   data-test-subj="test subject string"
 >
   <button
+    aria-label="Item"
     class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
     data-test-subj="euiCollapsedNavButton"
     type="button"
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_button.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_button.test.tsx.snap
index eef1556b21c..2c8d0314cc4 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_button.test.tsx.snap
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_button.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`EuiCollapsedNavButton renders a tooltip around the icon button 1`] = `
     >
       <button
         aria-describedby="generated-id"
+        aria-label="Nav item"
         class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
         data-test-subj="euiCollapsedNavButton"
         type="button"
@@ -54,6 +55,7 @@ exports[`EuiCollapsedNavButton renders isSelected 1`] = `
     class="euiToolTipAnchor emotion-euiToolTipAnchor-block"
   >
     <a
+      aria-label="Nav item"
       class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton-isSelected"
       data-test-subj="euiCollapsedNavButton"
       href="#"
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_item.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_item.test.tsx.snap
index ea7c0ee4aa6..d930c29eb00 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_item.test.tsx.snap
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_item.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`EuiCollapsedNavItem renders a popover if items exist 1`] = `
       class="euiToolTipAnchor emotion-euiToolTipAnchor-block"
     >
       <button
+        aria-label="Item"
         class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
         data-test-subj="euiCollapsedNavButton"
         type="button"
@@ -35,6 +36,7 @@ exports[`EuiCollapsedNavItem renders an icon button/link if items are missing or
   data-test-subj="test subject string"
 >
   <a
+    aria-label="Item"
     class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
     data-test-subj="euiCollapsedNavButton"
     href="#"
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap
index 9649a5dfa4a..a0a20582024 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap
@@ -14,6 +14,7 @@ exports[`EuiCollapsedNavPopover renders the title and sub-items within the popov
           class="euiToolTipAnchor emotion-euiToolTipAnchor-block"
         >
           <button
+            aria-label="Item"
             class="euiButtonIcon euiCollapsedNavButton emotion-euiButtonIcon-s-empty-text-euiCollapsedNavButton"
             data-test-subj="euiCollapsedNavButton"
             type="button"
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.tsx
index ed5c5344b55..30c99a05566 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.tsx
@@ -78,6 +78,7 @@ export const EuiCollapsedNavButton: FunctionComponent<
         color="text"
         href={href}
         onClick={onClick}
+        aria-label={title}
         {...(linkProps as EuiButtonIconPropsForAnchor)} // Exclusive union shenanigans
         className={buttonClassName}
         css={buttonCssStyles}
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.tsx
index 664be5f7d66..f3b4bd57728 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.tsx
@@ -6,12 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, {
-  FunctionComponent,
-  ReactNode,
-  HTMLAttributes,
-  useContext,
-} from 'react';
+import React, { FunctionComponent, HTMLAttributes, useContext } from 'react';
 import classNames from 'classnames';
 
 import { useEuiTheme } from '../../../services';
@@ -65,11 +60,11 @@ export type _SharedEuiCollapsibleNavItemProps = HTMLAttributes<HTMLElement> &
 
 export type EuiCollapsibleNavItemProps = {
   /**
-   * ReactNode to render as this component's title
+   * Required text to render as the nav item title
    */
-  title: ReactNode;
+  title: string;
   /**
-   * Allows customizing title's element.
+   * Allows customizing the title element.
    * Consider using a heading element for better accessibility.
    * Defaults to an unsemantic `span` or `div`, depending on context.
    */
diff --git a/src/components/tool_tip/tool_tip.test.tsx b/src/components/tool_tip/tool_tip.test.tsx
index 91c0143475b..f534910f8cd 100644
--- a/src/components/tool_tip/tool_tip.test.tsx
+++ b/src/components/tool_tip/tool_tip.test.tsx
@@ -107,6 +107,8 @@ describe('EuiToolTip', () => {
     ).not.toBeNull();
 
     jest.useRealTimers();
+
+    component.unmount(); // Enzyme's portals stay in the DOM otherwise
   });
 
   test('display prop renders block', () => {
@@ -150,6 +152,36 @@ describe('EuiToolTip', () => {
     expect(removeEventSpy).toHaveBeenCalledWith('scroll', repositionFn, true);
   });
 
+  describe('aria-describedby', () => {
+    it('by default, sets an `aria-describedby` on the anchor when the tooltip is visible', async () => {
+      const { getByTestSubject } = render(
+        <EuiToolTip content="Tooltip content" id="toolTipId">
+          <button data-test-subj="anchor" />
+        </EuiToolTip>
+      );
+      fireEvent.mouseOver(getByTestSubject('anchor'));
+      await waitForEuiToolTipVisible();
+
+      expect(
+        getByTestSubject('anchor').getAttribute('aria-describedby')
+      ).toEqual('toolTipId');
+    });
+
+    it('merges with custom consumer `aria-describedby`s', async () => {
+      const { getByTestSubject } = render(
+        <EuiToolTip content="Tooltip content" id="toolTipId">
+          <button data-test-subj="anchor" aria-describedby="customId" />
+        </EuiToolTip>
+      );
+      fireEvent.mouseOver(getByTestSubject('anchor'));
+      await waitForEuiToolTipVisible();
+
+      expect(
+        getByTestSubject('anchor').getAttribute('aria-describedby')
+      ).toEqual('toolTipId customId');
+    });
+  });
+
   describe('ref methods', () => {
     // Although we don't publicly recommend it, consumers may need to reach into EuiToolTip
     // class methods to manually control visibility state via `show/hideToolTip`.
diff --git a/src/components/tool_tip/tool_tip.tsx b/src/components/tool_tip/tool_tip.tsx
index 121b339ce4d..b9bdb19a436 100644
--- a/src/components/tool_tip/tool_tip.tsx
+++ b/src/components/tool_tip/tool_tip.tsx
@@ -15,7 +15,7 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-import { CommonProps, keysOf } from '../common';
+import { CommonProps } from '../common';
 import { findPopoverPosition, htmlIdGenerator } from '../../services';
 import { enqueueStateChange } from '../../services/react';
 import { EuiResizeObserver } from '../observer/resize_observer';
@@ -26,14 +26,8 @@ import { EuiToolTipAnchor } from './tool_tip_anchor';
 import { EuiToolTipArrow } from './tool_tip_arrow';
 import { toolTipManager } from './tool_tip_manager';
 
-const positionsToClassNameMap: { [key in ToolTipPositions]: string } = {
-  top: 'euiToolTip--top',
-  right: 'euiToolTip--right',
-  bottom: 'euiToolTip--bottom',
-  left: 'euiToolTip--left',
-};
-
-export const POSITIONS = keysOf(positionsToClassNameMap);
+export const POSITIONS = ['top', 'right', 'bottom', 'left'] as const;
+const DISPLAYS = ['inlineBlock', 'block'] as const;
 
 export type ToolTipDelay = 'regular' | 'long';
 
@@ -50,11 +44,6 @@ interface ToolTipStyles {
   visibility?: 'hidden';
 }
 
-const displayToClassNameMap = {
-  inlineBlock: undefined,
-  block: 'euiToolTipAnchor--displayBlock',
-};
-
 const DEFAULT_TOOLTIP_STYLES: ToolTipStyles = {
   // position the tooltip content near the top-left
   // corner of the window so it can't create scrollbars
@@ -92,7 +81,7 @@ export interface EuiToolTipProps extends CommonProps {
   /**
    * Common display alternatives for the anchor wrapper
    */
-  display?: keyof typeof displayToClassNameMap;
+  display?: (typeof DISPLAYS)[number];
   /**
    * Delay before showing tooltip. Good for repeatable items.
    */
@@ -116,7 +105,6 @@ export interface EuiToolTipProps extends CommonProps {
    * When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true`
    */
   repositionOnScroll?: boolean;
-
   /**
    * If supplied, called when mouse movement causes the tool tip to be
    * hidden.
@@ -337,7 +325,7 @@ export class EuiToolTip extends Component<EuiToolTipProps, State> {
           onFocus={this.onFocus}
           onMouseOver={this.showToolTip}
           onMouseOut={this.onMouseOut}
-          id={this.state.id}
+          id={id}
           className={anchorClasses}
           display={display!}
           isVisible={visible}
diff --git a/src/components/tool_tip/tool_tip_anchor.tsx b/src/components/tool_tip/tool_tip_anchor.tsx
index bc4708f73fa..18cbd3ee3d0 100644
--- a/src/components/tool_tip/tool_tip_anchor.tsx
+++ b/src/components/tool_tip/tool_tip_anchor.tsx
@@ -6,27 +6,21 @@
  * Side Public License, v 1.
  */
 
-import React, {
-  cloneElement,
-  HTMLAttributes,
-  ReactElement,
-  forwardRef,
-} from 'react';
+import React, { cloneElement, HTMLAttributes, forwardRef } from 'react';
 import classNames from 'classnames';
 
+import type { EuiToolTipProps } from './tool_tip';
 import { euiToolTipAnchorStyles } from './tool_tip.styles';
 
-export interface EuiToolTipAnchorProps
-  extends Omit<
-    HTMLAttributes<HTMLSpanElement>,
-    'onBlur' | 'onFocus' | 'children'
-  > {
-  onBlur: () => void;
-  onFocus: () => void;
-  children: ReactElement;
-  isVisible: boolean;
-  display: 'block' | 'inlineBlock';
-}
+export type EuiToolTipAnchorProps = Omit<
+  HTMLAttributes<HTMLSpanElement>,
+  'onBlur' | 'onFocus' | 'children'
+> &
+  Required<Pick<EuiToolTipProps, 'display' | 'children'>> & {
+    onBlur: () => void;
+    onFocus: () => void;
+    isVisible: boolean;
+  };
 
 export const EuiToolTipAnchor = forwardRef<
   HTMLSpanElement,
@@ -79,7 +73,9 @@ export const EuiToolTipAnchor = forwardRef<
             onBlur();
             children.props.onBlur && children.props.onBlur(e);
           },
-          ...(isVisible && { 'aria-describedby': id }),
+          'aria-describedby': isVisible
+            ? classNames(id, children.props['aria-describedby'])
+            : children.props['aria-describedby'],
         })}
       </span>
     );
diff --git a/upcoming_changelogs/7055.md b/upcoming_changelogs/7055.md
new file mode 100644
index 00000000000..137a8016865
--- /dev/null
+++ b/upcoming_changelogs/7055.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiToolTip` overriding instead of merging its `aria-describedby` tooltip ID with any existing `aria-describedby`s