chore: update interactive card

Author: nmerget

docs/migration/v2.x.x-to-v3.0.0.md

@@ -16,6 +16,29 @@ Please provide the correct `type` property in your code anyhow as a best practis
 We removed the `state` property from the `db-button`/`DBButton` component for now.
 It wasn't implemented in any framework causing some confusion, and we will reintroduce it in a future version.
 
+## db-card/DBCard
+
+### `behavior='interactive'` change
+
+We changed the `behavior='interactive'` property not applying `role='button'` and `tabIndex` anymore.
+If you want to use an interactive card, you should wrap the card with the correct HTML element, like a `button` or `a` tag:
+
+```html
+<!--Angular-->
+<button>
+	<db-card behavior="interactive">
+		<!-- card content -->
+	</db-card>
+</button>
+
+<!--React/Vue-->
+<button>
+	<DBCard behavior="interactive">
+		<!-- card content -->
+	</DBCard>
+</button>
+```
+
 ## icon-before/-after
 
 We renamed the `data-icon-after` and `data-icon-before` properties to `data-icon-trailing` and `data-icon-leading`,

packages/components/src/components/card/card.lite.tsx

@@ -33,8 +33,6 @@ export default function DBCard(props: DBCardProps) {
 			data-behavior={props.behavior}
 			data-elevation-level={props.elevationLevel}
 			data-spacing={props.spacing}
-			role={props.behavior === 'interactive' ? 'button' : undefined}
-			tabIndex={props.behavior === 'interactive' ? 0 : undefined}
 			onClick={(event: ClickEvent<HTMLElement>) =>
 				state.handleClick(event)
 			}>