fix(item): ensure button focus state on property change

core/src/components/item/item.tsx

@@ -150,6 +150,12 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
 
   @State() counterString: string | null | undefined;
 
+  @Watch('button')
+  buttonChanged() {
+    // Update the focusable option when the button option is changed
+    this.focusable = this.isFocusable();
+  }
+
   @Watch('counterFormatter')
   counterFormatterChanged() {
     this.updateCounterOutput(this.getFirstInput());

core/src/components/item/test/item.spec.tsx

@@ -0,0 +1,22 @@
+import { h } from '@stencil/core';
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Item } from '../item';
+
+describe('item', () => {
+  it('should change focusable option after switching button option status', async () => {
+    const page = await newSpecPage({
+      components: [Item],
+      template: () => <ion-item button={false}></ion-item>,
+    });
+
+    const item = page.body.querySelector('ion-item')!;
+    // Change button attribute to true
+    item.setAttribute('button', 'true');
+
+    await page.waitForChanges();
+
+    // Check if it has the expected class that gives the highlight style to .item-highlight element
+    expect(item).toHaveClass('ion-focusable');
+  });
+});