refactor: replace title-attribute for removable tag with DBTooltip (#4218)

* refactor: replace title for remove tag with tooltip

* fix: issue with wrong import

* chore: update snapshot

* fix: issue with aria-describedby for tooltip

* chore: update snapshots

---------

Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>

Author: nmerget

__snapshots__/tag/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml

@@ -9,7 +9,7 @@
   - link "Behavior arrow_up_right\" / \""
   - group "Behavior":
     - text: (Default) Static Removable
-    - button "cross\" / \" Remove"
+    - button "Remove": cross" / "
     - button "Interactive (Button)"
     - link "Interactive (Link)"
     - checkbox "Interactive (Checkbox) circle\" / \""

__snapshots__/tag/showcase/chromium/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml

@@ -9,7 +9,7 @@
   - link "Behavior arrow_up_right\" / \""
   - group "Behavior":
     - text: (Default) Static Removable
-    - button "cross\" / \" Remove"
+    - button "Remove": cross" / "
     - button "Interactive (Button)"
     - link "Interactive (Link)"
     - checkbox "Interactive (Checkbox) circle\" / \""

__snapshots__/tag/showcase/mobile-chrome/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml

@@ -9,7 +9,7 @@
   - link "Behavior arrow_up_right\" / \""
   - group "Behavior":
     - text: (Default) Static Removable
-    - button "cross\" / \" Remove"
+    - button "Remove": cross" / "
     - button "Interactive (Button)"
     - link "Interactive (Link)"
     - checkbox "Interactive (Checkbox) circle\" / \""

__snapshots__/tag/showcase/mobile-safari/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml

@@ -9,7 +9,7 @@
   - link "Behavior arrow_up_right\" / \""
   - group "Behavior":
     - text: (Default) Static Removable
-    - button "cross\" / \" Remove"
+    - button "Remove": cross" / "
     - button "Interactive (Button)"
     - link "Interactive (Link)"
     - checkbox "Interactive (Checkbox) circle\" / \""

__snapshots__/tag/showcase/webkit/should-have-same-aria-snapshot/DBTag-should-have-same-aria-snapshot.yaml

@@ -9,7 +9,7 @@
   - link "Behavior arrow_up_right\" / \""
   - group "Behavior":
     - text: (Default) Static Removable
-    - button "cross\" / \" Remove"
+    - button "Remove": cross" / "
     - button "Interactive (Button)"
     - link "Interactive (Link)"
     - checkbox "Interactive (Checkbox) circle\" / \""

__snapshots__/tooltip/patternhub/tooltip-properties-should-match-screenshot.png

@@ -12,6 +12,7 @@ import { DBTagProps, DBTagState } from './model';
 import { cls, getBooleanAsString, getHideProp } from '../../utils';
 import { DEFAULT_REMOVE } from '../../shared/constants';
 import { ClickEvent } from '../../shared/model';
+import DBTooltip from '../tooltip/tooltip.lite';
 
 useMetadata({});
 useDefaultProps<DBTagProps>({});
@@ -84,9 +85,10 @@ export default function DBTag(props: DBTagProps) {
 					data-size="small"
 					data-no-text="true"
 					data-variant="ghost"
-					type="button"
-					title={state.getRemoveButtonText()}>
-					{state.getRemoveButtonText()}
+					type="button">
+					<DBTooltip variant="label">
+						{state.getRemoveButtonText()}
+					</DBTooltip>
 				</button>
 			</Show>
 		</div>

packages/components/src/components/tag/tag.lite.tsx

@@ -9,8 +9,20 @@ import {
 	PopoverState
 } from '../../shared/model';
 
+export const TooltipVariantList = ['description', 'label'] as const;
+export type TooltipVariantType = (typeof TooltipVariantList)[number];
+
 export type DBTooltipDefaultProps = {
+	/**
+	 * Show/Hides arrow
+	 */
 	showArrow?: boolean | string;
+	/**
+	 * Change the behavior of the tooltip:
+	 * - description: Adds `aria-describedby` to parent
+	 * - label: Adds `aria-labelledby` to parent
+	 */
+	variant?: TooltipVariantType;
 };
 
 export type DBTooltipProps = DBTooltipDefaultProps &

packages/components/src/components/tooltip/model.ts

@@ -49,7 +49,12 @@ export default function DBTooltip(props: DBTooltipProps) {
 					);
 				});
 				parent.setAttribute('data-has-tooltip', 'true');
-				parent.setAttribute('aria-describedby', state._id);
+
+				if (props.variant === 'label') {
+					parent.setAttribute('aria-labelledby', state._id);
+				} else {
+					parent.setAttribute('aria-describedby', state._id);
+				}
 			}
 
 			state.initialized = false;