Repository: ionic-team/ionic-framework
File: core/src/components/accordion/accordion.tsx (TypeScript)

Code before:
/**
 * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 *
 * @slot header - Content is placed at the top and is used to
 * expand or collapse the accordion item.
 * @slot content - Content is placed below the header and is
 * shown or hidden based on expanded state.
 *
 * @part header - The wrapper element for the header slot.
 * @part content - The wrapper element for the content slot.
 * @part expanded - The expanded element. Can be used in combination
 * with the `header` and `content` parts (i.e. `::part(header expanded)`).
 */
@Component({
  tag: 'ion-accordion',
  styleUrls: {
    ios: 'accordion.ios.scss',
    md: 'accordion.md.scss',
  },
  shadow: {
    delegatesFocus: true,
  },
})
export class Accordion implements ComponentInterface {
  private accordionGroupEl?: HTMLIonAccordionGroupElement | null;
  private updateListener = () => {
    /**
     * Determine if this update will cause an actual state change.
     * We only want to mark as "interacted" if the state is changing.
     */
    const accordionGroup = this.accordionGroupEl;
    if (accordionGroup) {
      const value = accordionGroup.value;
      const accordionValue = this.value;
      const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue;
      const isExpanded = this.state === AccordionState.Expanded || this.state === AccordionState.Expanding;
      const stateWillChange = shouldExpand !== isExpanded;

      /**
       * Only mark as interacted if:
       * 1. This is not the first update we've received with a defined value
       * 2. The state is actually changing (prevents redundant updates from enabling animations)
       */
      if (this.hasReceivedFirstUpdate && stateWillChange) {
        this.hasInteracted = true;
      }

      /**
       * Only count this as the first update if the group value is defined.
       * This prevents the initial undefined value from the group's componentDidLoad
       * from being treated as the first real update.

Review comment (suggestion):
It would be great to take this opportunity to change the name to something a bit more descriptive. I'll leave it up to you though if the change needs to be done.

Code after:
/**
 * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 *
 * @slot header - Content is placed at the top and is used to
 * expand or collapse the accordion item.
 * @slot content - Content is placed below the header and is
 * shown or hidden based on expanded state.
 *
 * @part header - The wrapper element for the header slot.
 * @part content - The wrapper element for the content slot.
 * @part expanded - The expanded element. Can be used in combination
 * with the `header` and `content` parts (i.e. `::part(header expanded)`).
 */
@Component({
  tag: 'ion-accordion',
  styleUrls: {
    ios: 'accordion.ios.scss',
    md: 'accordion.md.scss',
  },
  shadow: {
    delegatesFocus: true,
  },
})
export class Accordion implements ComponentInterface {
  private accordionGroupEl?: HTMLIonAccordionGroupElement | null;
  private accordionGroupUpdateHandler = () => {
    /**
     * Determine if this update will cause an actual state change.
     * We only want to mark as "interacted" if the state is changing.
     */
    const accordionGroup = this.accordionGroupEl;
    if (accordionGroup) {
      const value = accordionGroup.value;
      const accordionValue = this.value;
      const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue;
      const isExpanded = this.state === AccordionState.Expanded || this.state === AccordionState.Expanding;
      const stateWillChange = shouldExpand !== isExpanded;

      /**
       * Only mark as interacted if:
       * 1. This is not the first update we've received with a defined value
       * 2. The state is actually changing (prevents redundant updates from enabling animations)
       */
      if (this.hasReceivedFirstUpdate && stateWillChange) {
        this.hasInteracted = true;
      }

      /**
       * Only count this as the first update if the group value is defined.
       * This prevents the initial undefined value from the group's componentDidLoad
       * from being treated as the first real update.