fix(angular): popover arrow navigation with disabled items (#29662)

Issue number: resolves #29640

---------

## What is the current behavior?
(Angular) If a list inside of a popover contains a disabled item and is
included in the following way:

```html
<ion-list>
  <ion-item [button]="true">Option 1</ion-item>
  <ion-item [button]="true" [disabled]="true">Option 2</ion-item>
  <ion-item [button]="true">Option 3</ion-item>
</ion-list>
```

when you try to navigate using the arrow down keys, it will stop at the
disabled item instead of continuing over it.

Note that changing the item to the following will work:

```html
<ion-item [button]="true" disabled="true">Option 2</ion-item>
```

## What is the new behavior?
Reflect the `disabled` property in the item so that when items are
queried in the popover, the arrow down key skips over the disabled item.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

This can be tested in the Angular test app by following the
documentation here:
https://github.com/ionic-team/ionic-framework/blob/main/docs/angular/testing.md

Removing my fix in `core`, then running `npm run build` and re-syncing
the test app should reproduce the problem.

core/api.txt

@@ -783,7 +783,7 @@ ion-item,prop,button,boolean,false,false,false
 ion-item,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-item,prop,detail,boolean | undefined,undefined,false,false
 ion-item,prop,detailIcon,string,chevronForward,false,false
-ion-item,prop,disabled,boolean,false,false,false
+ion-item,prop,disabled,boolean,false,false,true
 ion-item,prop,download,string | undefined,undefined,false,false
 ion-item,prop,href,string | undefined,undefined,false,false
 ion-item,prop,lines,"full" | "inset" | "none" | undefined,undefined,false,false

core/src/components/item/item.tsx

@@ -64,7 +64,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
   /**
    * If `true`, the user cannot interact with the item.
    */
-  @Prop() disabled = false;
+  @Prop({ reflect: true }) disabled = false;
 
   /**
    * This attribute instructs browsers to download a URL instead of navigating to

packages/angular/test/base/e2e/src/lazy/popover.spec.ts

@@ -22,4 +22,14 @@ describe('Popovers: Inline', () => {
     cy.get('ion-list ion-item:nth-child(3)').should('have.text', 'C');
     cy.get('ion-list ion-item:nth-child(4)').should('have.text', 'D');
   });
+
+  it('should have an item with a disabled attribute', () => {
+    cy.get('ion-button').click();
+
+    cy.get('ion-popover').should('be.visible');
+
+    cy.wait(1500);
+
+    cy.get('ion-list ion-item:nth-child(3)').should('have.attr', 'disabled');
+  });
 });

packages/angular/test/base/src/app/lazy/home-page/home-page.component.html

@@ -57,5 +57,10 @@
         Accordions Test
       </ion-label>
     </ion-item>
+    <ion-item routerLink="/lazy/popover-inline">
+      <ion-label>
+        Popovers
+      </ion-label>
+    </ion-item>
   </ion-list>
 </ion-content>

packages/angular/test/base/src/app/lazy/popover-inline/popover-inline.component.html

@@ -4,8 +4,8 @@
   <ng-template>
     <ion-content>
       <ion-list>
-        <ion-item *ngFor="let item of items">
-          <ion-label>{{ item }}</ion-label>
+        <ion-item *ngFor="let item of items" [button]="true" [disabled]="item.disabled">
+          <ion-label>{{ item.text }}</ion-label>
         </ion-item>
       </ion-list>
     </ion-content>

packages/angular/test/base/src/app/lazy/popover-inline/popover-inline.component.ts

@@ -13,13 +13,13 @@ import { IonPopover } from "@ionic/angular";
 })
 export class PopoverInlineComponent {
 
-  items: string[] = [];
+  items: {text: string, disabled?: boolean}[] = [];
 
   openPopover(popover: IonPopover) {
     popover.present();
 
     setTimeout(() => {
-      this.items = ['A', 'B', 'C', 'D'];
+      this.items = [{text: 'A'}, {text: 'B'}, {text: 'C', disabled: true}, {text: 'D'}];
     }, 1000);
   }