[WIP] Fix SpinButton up/down buttons active when readOnly is set

[Copilot]

Thanks for assigning this issue to me. I'm starting to work on it and will keep this PR's description up to date as I form a plan and make progress.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Bug]: SpinButton up/down buttons active when readOnly is set</issue_title>
<issue_description>### Component

SpinButton

Package version

9.72.7

React version

19.1.1

Environment

System:
    OS: macOS 26.1
    CPU: (8) arm64 Apple M1
    Memory: 153.20 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 142.0.7444.176
    Safari: 26.1
  npmPackages:
    @fluentui/react-charts: ^9.3.3 => 9.3.3 
    @fluentui/react-components: ^9.72.7 => 9.72.7 
    @fluentui/react-datepicker-compat: ^0.6.18 => 0.6.18 
    @types/react: ^19.1.13 => 19.2.2 
    @types/react-dom: ^19.1.9 => 19.2.2 
    react: ^19.1.1 => 19.2.0 
    react-dom: ^19.1.1 => 19.2.0

Current Behavior

When the readOnly prop is set, I cannot type in a new value in the SpinButton. However, if i click either the up or down arrow buttons, the value is changed.

Expected Behavior

Unless this is an intended feature, the up and down arrow buttons should not change the value of the input, just like in disabled.
The current readOnly implementation is a mix of default and disabled - the input cannot be changed directly (by typing), but it's values can be adjusted via buttons!

Reproduction

https://stackblitz.com/edit/bwtwmsso?file=src%2Fexample.tsx

Steps to reproduce

1. Click the ↑ or ↓ buttons on the readOnly SpinButton
2. Watch the values change

Are you reporting an Accessibility issue?

None

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.</issue_description>

<agent_instructions>The SpinButton component (packages/react-components/react-spinbutton ) doesn't have its own readOnly logic - the readOnly prop just gets passed to the input slot and only makes the input field itself read-only. We also need to disable/hide the buttons when readOnly is set, and turn off the keyboard up/down value changes.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

@dmytrokirpa Right now, the `SpinButton` component doesn't have its own `readOnly` logic - the `readOnly` prop just gets passed to the input slot and only makes the input field itself read-only. So, it might be a good idea to also disable/hide the buttons when `readOnly` is set, and turn off the keyboard up/down value changes too.

• Fixes [Bug]: SpinButton up/down buttons active when readOnly is set #35511

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.