Add tooltip to instances of IconButton (#68880)

* refactor: tooltip is required

* refactor: add tooltips

* refactor: add tooltips

* refactor: add tooltips

* refactor: add tooltips

* refactor: add tooltips

* refactor: add tooltips

* refactor: adjust tests

* refactor: apply changes from code review

* refactor: adjust component for e2e test

* refactor: adjust fallback

* refactor: apply changes from code review

* refactor: apply changes from code review

* refactor: set IconButton default as type=button and remove from use cases

* refactor:  remove aria-labels when duplicated and type=button from use cases

* refactor: clean up

* refactor: fix tests

* refactor: fix type errors

* refactor: remove changes in order in order to add them to a separate PR

* refactor: set IconButton default as type=button

* refactor: remove tooltip

* refactor: apply changes requested in review

public/app/core/components/AppChrome/MegaMenu/NavBarMenu.tsx

@@ -67,6 +67,7 @@ export function NavBarMenu({ activeItem, navItems, searchBarHidden, onClose }: P
               <Icon name="bars" size="xl" />
               <IconButton
                 aria-label="Close navigation menu"
+                tooltip="Close menu"
                 name="times"
                 onClick={onMenuClose}
                 size="xl"

public/app/core/components/CloseButton/CloseButton.tsx

@@ -13,7 +13,14 @@ type Props = {
 export const CloseButton = ({ onClick, 'aria-label': ariaLabel, style }: Props) => {
   const styles = useStyles2(getStyles);
   return (
-    <IconButton aria-label={ariaLabel ?? 'Close'} className={styles} name="times" onClick={onClick} style={style} />
+    <IconButton
+      aria-label={ariaLabel ?? 'Close'}
+      className={styles}
+      name="times"
+      onClick={onClick}
+      style={style}
+      tooltip="Close"
+    />
   );
 };
 

public/app/core/components/Layers/LayerDragDropList.tsx

@@ -80,8 +80,8 @@ export const LayerDragDropList = <T extends LayerElement>({
                             {onDuplicate ? (
                               <IconButton
                                 name="copy"
-                                title={'Duplicate'}
-                                ariaLabel={'Duplicate button'}
+                                tooltip="Duplicate"
+                                ariaLabel="Duplicate button"
                                 className={style.actionIcon}
                                 onClick={() => onDuplicate(element)}
                               />
@@ -89,8 +89,8 @@ export const LayerDragDropList = <T extends LayerElement>({
 
                             <IconButton
                               name="trash-alt"
-                              title={'remove'}
-                              ariaLabel={'Remove button'}
+                              tooltip="Remove"
+                              ariaLabel="Remove button"
                               className={cx(style.actionIcon, style.dragIcon)}
                               onClick={() => onDelete(element)}
                             />

public/app/core/components/OptionsUI/color.tsx

@@ -53,7 +53,9 @@ export const ColorValueEditor = ({ value, settings, onChange, details }: Props)
                     {settings?.placeholder ?? 'Select color'}
                   </span>
                 )}
-                {settings?.isClearable && value && <IconButton name="times" onClick={() => onChange(undefined)} />}
+                {settings?.isClearable && value && (
+                  <IconButton name="times" onClick={() => onChange(undefined)} tooltip="Clear settings" />
+                )}
               </>
             )}
           </div>

public/app/core/components/OptionsUI/units.tsx

@@ -14,7 +14,7 @@ export function UnitValueEditor({ value, onChange, item }: Props) {
         <span className={styles.first}>
           <UnitPicker value={value} onChange={onChange} />
         </span>
-        <IconButton ariaLabel="clear unit selection" name="times" onClick={() => onChange(undefined)} />
+        <IconButton name="times" onClick={() => onChange(undefined)} tooltip="Clear unit selection" />
       </div>
     );
   }

public/app/core/components/PasswordField/PasswordField.tsx

@@ -27,14 +27,13 @@ export const PasswordField = React.forwardRef<HTMLInputElement, Props>(
         suffix={
           <IconButton
             name={showPassword ? 'eye-slash' : 'eye'}
-            type="button"
             aria-controls={id}
             role="switch"
             aria-checked={showPassword}
-            aria-label="Show password"
             onClick={() => {
               setShowPassword(!showPassword);
             }}
+            tooltip={showPassword ? 'Hide password' : 'Show password'}
           />
         }
       />

public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx

@@ -37,11 +37,10 @@ export const QueryOperationRowHeader = ({
       <div className={styles.column}>
         <IconButton
           name={isContentVisible ? 'angle-down' : 'angle-right'}
-          title="toggle collapse and expand"
           aria-label="toggle collapse and expand query row"
+          tooltip={isContentVisible ? 'Collapse query row' : 'Expand query row'}
           className={styles.collapseIcon}
           onClick={onRowToggle}
-          type="button"
           aria-expanded={isContentVisible}
           aria-controls={id}
         />