ronantakizawa/codereview-bench huggingface dataset:
Repository: ionic-team/ionic-framework
File: core/src/components/radio-group/radio-group.tsx (TypeScript)

Code before:
  }

  /** @internal */
  @Method()
  async setFocus() {
    const radioToFocus = this.getRadios().find((r) => r.tabIndex !== -1);
    radioToFocus?.setFocus();
  }

  /**
   * Renders the helper text or error text values
   */
  private renderHintText() {
    const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;

    const hasHintText = !!helperText || !!errorText;
    if (!hasHintText) {
      return;
    }

    return (
      <div class="radio-group-top" part="top">
        <div id={helperTextId} class="helper-text" part="helper-text" aria-live="polite">
          {!isInvalid ? helperText : null}
        </div>
        <div id={errorTextId} class="error-text" part="error-text" role="alert">
          {isInvalid ? errorText : null}
        </div>
      </div>
    );
  }

  private getHintTextId(): string | undefined {
    const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;

    if (isInvalid && errorText) {
      return errorTextId;
    }

    if (helperText) {
      return helperTextId;
    }

    return undefined;
  }

  render() {
    const { label, labelId, el, name, value } = this;
    const theme = getIonTheme(this);

    renderHiddenInput(true, el, name, value, false);

Review comment (suggestion):
```suggestion
        <div id={errorTextId} class="error-text" part="supporting-text error-text" role="alert">
```

Code after:
        // Prevent browsers from jumping
        // to the bottom of the screen
        ev.preventDefault();
      }
    }
  }

  /** @internal */
  @Method()
  async setFocus() {
    const radioToFocus = this.getRadios().find((r) => r.tabIndex !== -1);
    radioToFocus?.setFocus();
  }

  /**
   * Renders the helper text or error text values
   */
  private renderHintText() {
    const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;

    const hasHintText = !!helperText || !!errorText;
    if (!hasHintText) {
      return;
    }

    return (
      <div class="radio-group-top">
        <div id={helperTextId} class="helper-text" part="supporting-text helper-text" aria-live="polite">
          {!isInvalid ? helperText : null}
        </div>
        <div id={errorTextId} class="error-text" part="supporting-text error-text" role="alert">
          {isInvalid ? errorText : null}
        </div>
      </div>
    );
  }

  private getHintTextId(): string | undefined {
    const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;

    if (isInvalid && errorText) {
      return errorTextId;
    }

    if (helperText) {
      return helperTextId;
    }

    return undefined;
  }
Repository: ionic-team/ionic-framework
File: core/src/components/radio-group/radio-group.tsx (TypeScript)

Code before:
        // to the bottom of the screen
        ev.preventDefault();
      }
    }
  }

  /** @internal */
  @Method()
  async setFocus() {
    const radioToFocus = this.getRadios().find((r) => r.tabIndex !== -1);
    radioToFocus?.setFocus();
  }

  /**
   * Renders the helper text or error text values
   */
  private renderHintText() {
    const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;

    const hasHintText = !!helperText || !!errorText;
    if (!hasHintText) {
      return;
    }

    return (
      <div class="radio-group-top" part="top">
        <div id={helperTextId} class="helper-text" part="helper-text" aria-live="polite">
          {!isInvalid ? helperText : null}
        </div>
        <div id={errorTextId} class="error-text" part="error-text" role="alert">
          {isInvalid ? errorText : null}
        </div>
      </div>
    );
  }

  private getHintTextId(): string | undefined {
    const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;

    if (isInvalid && errorText) {
      return errorTextId;
    }

    if (helperText) {
      return helperTextId;
    }

    return undefined;
  }

  render() {

Review comment (suggestion):
```suggestion
      <div class="radio-group-top">
```

Let's not add this part right now since we don't expose this wrapper for checkbox or select.

Code after:
           */
          this.emitValueChange(ev);
        }

        // Prevent browsers from jumping
        // to the bottom of the screen
        ev.preventDefault();
      }
    }
  }

  /** @internal */
  @Method()
  async setFocus() {
    const radioToFocus = this.getRadios().find((r) => r.tabIndex !== -1);
    radioToFocus?.setFocus();
  }

  /**
   * Renders the helper text or error text values
   */
  private renderHintText() {
    const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;

    const hasHintText = !!helperText || !!errorText;
    if (!hasHintText) {
      return;
    }

    return (
      <div class="radio-group-top">
        <div id={helperTextId} class="helper-text" part="supporting-text helper-text" aria-live="polite">
          {!isInvalid ? helperText : null}
        </div>
        <div id={errorTextId} class="error-text" part="supporting-text error-text" role="alert">
          {isInvalid ? errorText : null}
        </div>
      </div>
    );
  }

  private getHintTextId(): string | undefined {
    const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;

    if (isInvalid && errorText) {
      return errorTextId;
    }

    if (helperText) {
      return helperTextId;
    }
Repository: ionic-team/ionic-framework
File: packages/react/test/base/tests/e2e/specs/tabs/tabs.cy.ts (TypeScript)

Code before:
describe('IonTabs', () => {
  /**
   * Verifies that tabs with similar route prefixes (e.g., /home, /home2, /home3)
   * correctly select the matching tab instead of the first prefix match.
   */
  describe('Similar Route Prefixes', () => {
    it('should select the correct tab when routes have similar prefixes', () => {
      cy.visit('/tabs-similar-prefixes/home2');

      cy.get('[data-testid="home2-content"]').should('be.visible');
      cy.get('[data-testid="home2-tab"]').should('have.class', 'tab-selected');
      cy.get('[data-testid="home-tab"]').should('not.have.class', 'tab-selected');
    });

    it('should select the correct tab when navigating via tab buttons', () => {
      cy.visit('/tabs-similar-prefixes/home');

      cy.get('[data-testid="home-tab"]').should('have.class', 'tab-selected');
      cy.get('[data-testid="home2-tab"]').should('not.have.class', 'tab-selected');

      cy.get('[data-testid="home2-tab"]').click();
      cy.get('[data-testid="home2-tab"]').should('have.class', 'tab-selected');
      cy.get('[data-testid="home-tab"]').should('not.have.class', 'tab-selected');

      cy.get('[data-testid="home3-tab"]').click();
      cy.get('[data-testid="home3-tab"]').should('have.class', 'tab-selected');
      cy.get('[data-testid="home-tab"]').should('not.have.class', 'tab-selected');
      cy.get('[data-testid="home2-tab"]').should('not.have.class', 'tab-selected');
    });

Review comment (suggestion):
```suggestion
   * correctly select the matching tab instead of the first prefix match.
   * 
   * @see https://github.com/ionic-team/ionic-framework/issues/30448
```

Code after:
describe('IonTabs', () => {
  /**
   * Verifies that tabs with similar route prefixes (e.g., /home, /home2, /home3)
   * correctly select the matching tab instead of the first prefix match.
   * 
   * @see https://github.com/ionic-team/ionic-framework/issues/30448
   */
  describe('Similar Route Prefixes', () => {
    it('should select the correct tab when routes have similar prefixes', () => {
      cy.visit('/tabs-similar-prefixes/home2');

      cy.get('[data-testid="home2-content"]').should('be.visible');
      cy.get('[data-testid="home2-tab"]').should('have.class', 'tab-selected');
      cy.get('[data-testid="home-tab"]').should('not.have.class', 'tab-selected');
    });

    it('should select the correct tab when navigating via tab buttons', () => {
      cy.visit('/tabs-similar-prefixes/home');

      cy.get('[data-testid="home-tab"]').should('have.class', 'tab-selected');
      cy.get('[data-testid="home2-tab"]').should('not.have.class', 'tab-selected');

      cy.get('[data-testid="home2-tab"]').click();
      cy.get('[data-testid="home2-tab"]').should('have.class', 'tab-selected');
      cy.get('[data-testid="home-tab"]').should('not.have.class', 'tab-selected');

      cy.get('[data-testid="home3-tab"]').click();
      cy.get('[data-testid="home3-tab"]').should('have.class', 'tab-selected');
      cy.get('[data-testid="home-tab"]').should('not.have.class', 'tab-selected');
Repository: ionic-team/ionic-framework
File: packages/vue/test/base/tests/e2e/specs/tabs.cy.js (JavaScript)

Code before:
describe('Tabs', () => {
  /**
   * Verifies that tabs with similar route prefixes (e.g., /home, /home2, /home3)
   * correctly select the matching tab instead of the first prefix match.
   */
  describe('Similar Route Prefixes', () => {
    it('should select the correct tab when routes have similar prefixes', () => {
      cy.visit('/tabs-similar-prefixes/home2');

      cy.get('[data-testid="home2-content"]').should('be.visible');
      cy.get('[data-testid="home2-tab"]').should('have.class', 'tab-selected');
      cy.get('[data-testid="home-tab"]').should('not.have.class', 'tab-selected');
    });

    it('should select the correct tab when navigating via tab buttons', () => {
      cy.visit('/tabs-similar-prefixes/home');

      cy.get('[data-testid="home-tab"]').should('have.class', 'tab-selected');
      cy.get('[data-testid="home2-tab"]').should('not.have.class', 'tab-selected');

      cy.get('[data-testid="home2-tab"]').click();
      cy.get('[data-testid="home2-tab"]').should('have.class', 'tab-selected');
      cy.get('[data-testid="home-tab"]').should('not.have.class', 'tab-selected');

      cy.get('[data-testid="home3-tab"]').click();
      cy.get('[data-testid="home3-tab"]').should('have.class', 'tab-selected');
      cy.get('[data-testid="home-tab"]').should('not.have.class', 'tab-selected');
      cy.get('[data-testid="home2-tab"]').should('not.have.class', 'tab-selected');
    });

Review comment (suggestion):
```suggestion
   * correctly select the matching tab instead of the first prefix match.
   * 
   * @see https://github.com/ionic-team/ionic-framework/issues/30448
```

Code after:
describe('Tabs', () => {
  /**
   * Verifies that tabs with similar route prefixes (e.g., /home, /home2, /home3)
   * correctly select the matching tab instead of the first prefix match.
   * 
   * @see https://github.com/ionic-team/ionic-framework/issues/30448
   */
  describe('Similar Route Prefixes', () => {
    it('should select the correct tab when routes have similar prefixes', () => {
      cy.visit('/tabs-similar-prefixes/home2');

      cy.get('[data-testid="home2-content"]').should('be.visible');
      cy.get('[data-testid="home2-tab"]').should('have.class', 'tab-selected');
      cy.get('[data-testid="home-tab"]').should('not.have.class', 'tab-selected');
    });

    it('should select the correct tab when navigating via tab buttons', () => {
      cy.visit('/tabs-similar-prefixes/home');

      cy.get('[data-testid="home-tab"]').should('have.class', 'tab-selected');
      cy.get('[data-testid="home2-tab"]').should('not.have.class', 'tab-selected');

      cy.get('[data-testid="home2-tab"]').click();
      cy.get('[data-testid="home2-tab"]').should('have.class', 'tab-selected');
      cy.get('[data-testid="home-tab"]').should('not.have.class', 'tab-selected');

      cy.get('[data-testid="home3-tab"]').click();
      cy.get('[data-testid="home3-tab"]').should('have.class', 'tab-selected');
      cy.get('[data-testid="home-tab"]').should('not.have.class', 'tab-selected');
Repository: ionic-team/ionic-framework
File: packages/vue/test/base/src/views/tabs-similar-prefixes/Home2.vue (Vue)

Code before:
<template>
  <ion-page data-pageid="home2">
    <ion-header>
      <ion-toolbar>
        <ion-title>Home 2</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div data-testid="home2-content">Home 2 Content</div>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { IonPage, IonHeader, IonToolbar, IonTitle, IonContent },
});
</script>


Review comment (suggestion):
```suggestion
<script setup lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
</script>
```

Code after:
<template>
  <ion-page data-pageid="home2">
    <ion-header>
      <ion-toolbar>
        <ion-title>Home 2</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div data-testid="home2-content">Home 2 Content</div>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
</script>
Repository: ionic-team/ionic-framework
File: packages/vue/test/base/src/views/tabs-similar-prefixes/Home3.vue (Vue)

Code before:
<template>
  <ion-page data-pageid="home3">
    <ion-header>
      <ion-toolbar>
        <ion-title>Home 3</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div data-testid="home3-content">Home 3 Content</div>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { IonPage, IonHeader, IonToolbar, IonTitle, IonContent },
});
</script>


Review comment (suggestion):
```suggestion
<script setup lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
</script>
```

Code after:
<template>
  <ion-page data-pageid="home3">
    <ion-header>
      <ion-toolbar>
        <ion-title>Home 3</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div data-testid="home3-content">Home 3 Content</div>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
</script>
Repository: ionic-team/ionic-framework
File: packages/vue/test/base/src/views/tabs-similar-prefixes/TabsSimilarPrefixes.vue (Vue)

Code before:
  IonTabs,
  IonContent,
  IonLabel,
  IonIcon,
  IonPage,
  IonRouterOutlet,
} from '@ionic/vue';
import { homeOutline, radioOutline, libraryOutline } from 'ionicons/icons';
import { defineComponent } from 'vue';

export default defineComponent({
  components: {
    IonContent,
    IonLabel,
    IonTabs,
    IonTabBar,
    IonTabButton,
    IonIcon,
    IonPage,
    IonRouterOutlet,
  },
  setup() {
    return { homeOutline, radioOutline, libraryOutline };
  },
});
</script>


Review comment (suggestion):
```suggestion
<script setup lang="ts">
import {
  IonContent,
  IonIcon,
  IonLabel,
  IonPage,
  IonRouterOutlet,
  IonTabBar,
  IonTabButton,
  IonTabs,
} from '@ionic/vue';
import { homeOutline, radioOutline, libraryOutline } from 'ionicons/icons';
</script>
```

Code after:
<template>
  <ion-page data-pageid="tabs-similar-prefixes">
    <ion-content>
      <ion-tabs id="tabs-similar-prefixes">
        <ion-router-outlet></ion-router-outlet>
        <ion-tab-bar slot="bottom" data-testid="tab-bar">
          <ion-tab-button
            tab="home"
            href="/tabs-similar-prefixes/home"
            data-testid="home-tab"
            id="tab-button-home"
          >
            <ion-icon :icon="homeOutline" />
            <ion-label>Home</ion-label>
          </ion-tab-button>

          <ion-tab-button
            tab="home2"
            href="/tabs-similar-prefixes/home2"
            data-testid="home2-tab"
            id="tab-button-home2"
          >
            <ion-icon :icon="radioOutline" />
            <ion-label>Home 2</ion-label>
          </ion-tab-button>

          <ion-tab-button
            tab="home3"
            href="/tabs-similar-prefixes/home3"
            data-testid="home3-tab"
            id="tab-button-home3"
          >
            <ion-icon :icon="libraryOutline" />
            <ion-label>Home 3</ion-label>
          </ion-tab-button>
        </ion-tab-bar>
      </ion-tabs>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import {
  IonContent,
  IonIcon,
  IonLabel,
  IonPage,
  IonRouterOutlet,
  IonTabBar,
  IonTabButton,
  IonTabs,
} from '@ionic/vue';
import { homeOutline, radioOutline, libraryOutline } from 'ionicons/icons';
</script>
Repository: ionic-team/ionic-framework
File: packages/react-router/test/base/tests/e2e/specs/content-change-navigation.cy.js (JavaScript)

Code before:
/**
 * Verifies that when view content changes (causing IonPage to remount)
 * while navigation is happening, the correct view is displayed.
 */

const port = 3000;

describe('Content Change Navigation Tests (Issue #28878)', () => {
  it('should navigate to list page correctly', () => {
    cy.visit(`http://localhost:${port}/content-change-navigation`);
    cy.ionPageVisible('content-nav-home');

    cy.get('[data-testid="go-to-list"]').click();
    cy.wait(300);

    cy.ionPageVisible('list-page');
    cy.url().should('include', '/content-change-navigation/list');
  });

  it('when clearing items and navigating, should show home page, not empty view', () => {
    cy.visit(`http://localhost:${port}/content-change-navigation`);
    cy.ionPageVisible('content-nav-home');

    cy.get('[data-testid="go-to-list"]').click();
    cy.wait(300);
    cy.ionPageVisible('list-page');

    // Bug scenario: clearing items renders a different IonPage while navigating away

Review comment (suggestion):
Since this PR resolves an existing issue that's not tied to RR6, then let's add the issue link here. It follows the structure we have for other tests.

```suggestion
 * while navigation is happening, the correct view is displayed.
 * 
 * @see https://github.com/ionic-team/ionic-framework/issues/28878
```

Code after:
/**
 * Verifies that when view content changes (causing IonPage to remount)
 * while navigation is happening, the correct view is displayed.
 *
 * @see https://github.com/ionic-team/ionic-framework/issues/28878
 */

const port = 3000;

describe('Content Change Navigation Tests', () => {
  it('should navigate to list page correctly', () => {
    cy.visit(`http://localhost:${port}/content-change-navigation`);
    cy.ionPageVisible('content-nav-home');

    cy.get('[data-testid="go-to-list"]').click();
    cy.wait(300);

    cy.ionPageVisible('list-page');
    cy.url().should('include', '/content-change-navigation/list');
  });

  it('when clearing items and navigating, should show home page, not empty view', () => {
    cy.visit(`http://localhost:${port}/content-change-navigation`);
    cy.ionPageVisible('content-nav-home');

    cy.get('[data-testid="go-to-list"]').click();
    cy.wait(300);
    cy.ionPageVisible('list-page');
Repository: ionic-team/ionic-framework
File: packages/react-router/test/base/tests/e2e/specs/content-change-navigation.cy.js (JavaScript)

Code before:
/**
 * Verifies that when view content changes (causing IonPage to remount)
 * while navigation is happening, the correct view is displayed.
 */

const port = 3000;

describe('Content Change Navigation Tests (Issue #28878)', () => {
  it('should navigate to list page correctly', () => {
    cy.visit(`http://localhost:${port}/content-change-navigation`);
    cy.ionPageVisible('content-nav-home');

    cy.get('[data-testid="go-to-list"]').click();
    cy.wait(300);

    cy.ionPageVisible('list-page');
    cy.url().should('include', '/content-change-navigation/list');
  });

  it('when clearing items and navigating, should show home page, not empty view', () => {
    cy.visit(`http://localhost:${port}/content-change-navigation`);
    cy.ionPageVisible('content-nav-home');

    cy.get('[data-testid="go-to-list"]').click();
    cy.wait(300);
    cy.ionPageVisible('list-page');

    // Bug scenario: clearing items renders a different IonPage while navigating away
    cy.get('[data-testid="clear-and-navigate"]').click();
    cy.wait(500);

    cy.url().should('include', '/content-change-navigation/home');
    cy.url().should('not.include', '/content-change-navigation/list');

Review comment (suggestion):
By adding the link above, we don't need to mention it again.

```suggestion
describe('Content Change Navigation Tests, () => {
```

Code after:
/**
 * Verifies that when view content changes (causing IonPage to remount)
 * while navigation is happening, the correct view is displayed.
 *
 * @see https://github.com/ionic-team/ionic-framework/issues/28878
 */

const port = 3000;

describe('Content Change Navigation Tests', () => {
  it('should navigate to list page correctly', () => {
    cy.visit(`http://localhost:${port}/content-change-navigation`);
    cy.ionPageVisible('content-nav-home');

    cy.get('[data-testid="go-to-list"]').click();
    cy.wait(300);

    cy.ionPageVisible('list-page');
    cy.url().should('include', '/content-change-navigation/list');
  });

  it('when clearing items and navigating, should show home page, not empty view', () => {
    cy.visit(`http://localhost:${port}/content-change-navigation`);
    cy.ionPageVisible('content-nav-home');

    cy.get('[data-testid="go-to-list"]').click();
    cy.wait(300);
    cy.ionPageVisible('list-page');

    // Bug scenario: clearing items renders a different IonPage while navigating away
    cy.get('[data-testid="clear-and-navigate"]').click();
    cy.wait(500);