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

Issue number: resolves #28525

---------

<!-- 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?
<!-- Please describe the current behavior that you are modifying. -->
When navigated via tab-key, the ion-item is not highlighted correctly
after switching from button=false to button=true.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
Now, when dynamically changing the the `button` option to `True`,
there's a `@watch` callback that will make sure the internal
`isFocusable` `@state` will be updated.

- A new unit test was added to item/test. As there was still any unit
test for the `ion-item`, a new files was created - `item.spec.tsx`

## 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/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

New behavior in runtime:


![focusable](https://github.com/BenOsodrac/ionic-framework/assets/32780808/5c2179cb-c121-4529-92cc-4fb3d764b027)

---------

Co-authored-by: Sean Perkins <[email protected]>

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');
+  });
+});