stab at using describedby for iconbutton

grafana · Jun 9, 2023 · b27e956 · b27e956
1 parent 6c5f92b
commit b27e956
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/packages/grafana-ui/src/components/IconButton/IconButton.tsx b/packages/grafana-ui/src/components/IconButton/IconButton.tsx
@@ -28,7 +28,7 @@ interface BaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 
 interface BasePropsWithTooltip extends BaseProps {
   /** Tooltip content to display on hover */
-  tooltip: PopoverContent;
+  tooltip: React.ReactNode;
   /** Position of the tooltip */
   tooltipPlacement?: TooltipPlacement;
   /** Text available only for screen readers. Will use tooltip text as fallback. */
@@ -37,7 +37,7 @@ interface BasePropsWithTooltip extends BaseProps {
 
 interface BasePropsWithAriaLabel extends BaseProps {
   /** Tooltip content to display on hover */
-  tooltip?: PopoverContent;
+  tooltip?: React.ReactNode;
   /** Position of the tooltip */
   tooltipPlacement?: TooltipPlacement;
   /** Text available only for screen readers. Will use tooltip text as fallback. */
@@ -79,18 +79,18 @@ export const IconButton = React.forwardRef<HTMLButtonElement, BasePropsWithToolt
     const button = (
       <button
         ref={tooltip ? undefined : ref}
-        aria-label={ariaLabel || tooltipString}
         {...restProps}
         className={cx(styles.button, className)}
         type="button"
+        aria-describedby="tooltip-body"
       >
         <Icon name={name} size={limitedIconSize} className={styles.icon} type={iconType} />
       </button>
     );
 
     if (tooltip) {
       return (
-        <Tooltip ref={ref} content={tooltip} placement={tooltipPlacement}>
+        <Tooltip ref={ref} content={<span id="tooltip-body">{tooltip}</span>} placement={tooltipPlacement}>
           {button}
         </Tooltip>
       );

diff --git a/packages/grafana-ui/src/components/Modal/Modal.tsx b/packages/grafana-ui/src/components/Modal/Modal.tsx
@@ -6,6 +6,7 @@ import React, { PropsWithChildren, useRef } from 'react';
 
 import { useTheme2 } from '../../themes';
 import { IconName } from '../../types';
+import { Icon } from '../Icon/Icon';
 import { IconButton } from '../IconButton/IconButton';
 import { HorizontalGroup } from '../Layout/Layout';
 
@@ -84,7 +85,11 @@ export function Modal(props: PropsWithChildren<Props>) {
               typeof title !== 'string' && title
             }
             <div className={styles.modalHeaderClose}>
-              <IconButton aria-label="Close dialog" name="times" size="xl" onClick={onDismiss} tooltip="Close" />
+              <IconButton name="times" size="xl" onClick={onDismiss} tooltip="Close" />
+              <button aria-labelledby="my-label">
+                <Icon name="times" />
+              </button>
+              <div id="my-label">Close dialogue</div>
             </div>
           </div>
           <div className={cx(styles.modalContent, contentClassName)}>{children}</div>