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

[BenOsodrac]

Issue number: resolves #28525

---

What is the current behavior?

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?

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
• No

Other information

New behavior in runtime:

[sean-perkins]

Great work! I am able to verify locally that the ion-button is able to receive focus and appropriately styling when the button property is dynamically set.

I am going to reset core/src/components/item/test/buttons/index.html back to origin/main. We have existing screenshots that use the entire page template for the screenshot: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/item/test/buttons/item.e2e.ts#L13 and adding new elements will cause "visual regressions" to the existing screenshot references. Since we are not adding new E2E tests, we don't necessarily need this diff beyond local testing.

[sean-perkins]

I will refactor this when I address the parent comment, for tests we try to nest them under a describe block for the component name.

For example:

describe('item', () => {
  /* existing test */
});

It helps when reviewing the logs locally or in CI to know exactly which component the spec test is responsible for.

[BenOsodrac]

Ah, got it! 👍