fix(item, tab-button): activation behaviour for Ionic theme (#30806)

Issue number: resolves #

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
Currently, in the`ion-item` and `tab-button` components under the Ionic
theme, activation behaviors (such as ripple effects and clickability)
are applied to both `md` and `ios`, but they should only be applied
to`md`.

## What is the new behavior?
Activation behavior is now conditional on both theme and mode. The main
goal is to ensure that activation only occurs specifically for `md` mode
when using the `ionic` theme.


## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->

core/src/components/item/item.tsx

@@ -8,7 +8,7 @@ import { createColorClasses, hostContext, openURL } from '@utils/theme';
 import { chevronForward } from 'ionicons/icons';
 
 import { config } from '../../global/config';
-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode, getIonTheme } from '../../global/ionic-global';
 import type { AnimationBuilder, Color, CssClassMap, StyleEventDetail } from '../../interface';
 import type { RouterDirection } from '../router/utils/interface';
 
@@ -246,7 +246,13 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
   }
 
   private canActivate(): boolean {
-    return this.isClickable() || this.hasCover();
+    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
+    const shouldActivate = this.isClickable() || this.hasCover();
+    if (theme !== 'ionic') {
+      return shouldActivate;
+    }
+    return mode === 'md' && shouldActivate;
   }
 
   private isFocusable(): boolean {

core/src/components/tab-button/tab-button.tsx

@@ -5,7 +5,7 @@ import type { Attributes } from '@utils/helpers';
 import { inheritAttributes } from '@utils/helpers';
 
 import { config } from '../../global/config';
-import { getIonTheme } from '../../global/ionic-global';
+import { getIonMode, getIonTheme } from '../../global/ionic-global';
 import type {
   TabBarChangedEventDetail,
   TabButtonClickEventDetail,
@@ -163,10 +163,20 @@ export class TabButton implements ComponentInterface, AnchorInterface {
     this.selectTab(ev);
   };
 
+  private canActivate(): boolean {
+    const theme = getIonTheme(this);
+    const mode = getIonMode(this);
+    if (theme !== 'ionic') {
+      return true;
+    }
+    return mode === 'md';
+  }
+
   render() {
     const { disabled, hasIcon, hasLabel, href, rel, target, layout, selected, tab, inheritedAttributes } = this;
     const theme = getIonTheme(this);
     const shape = this.getShape();
+    const canActivate = this.canActivate();
     const attrs = {
       download: this.download,
       href,
@@ -188,7 +198,7 @@ export class TabButton implements ComponentInterface, AnchorInterface {
           'tab-has-label-only': hasLabel && !hasIcon,
           'tab-has-icon-only': hasIcon && !hasLabel,
           [`tab-layout-${layout}`]: true,
-          'ion-activatable': true,
+          'ion-activatable': canActivate,
           'ion-selectable': true,
           [`tab-button-shape-${shape}`]: shape !== undefined,
           'ion-focusable': true,