Disable decrease counter button when value is 0

[Nitin-100]

Description

This PR fixes an accessibility issue where the "Decrease counter" button remained active and appeared usable when the counter value was already at 0.

Why

When the counter value is 0, the 'Decrease counter' button was still active and appeared usable even though the counter cannot go below 0. Users may be confused when they try to decrease the counter at 0 and nothing happens. This creates a misleading experience and reduces clarity of how the component is intended to work.

What

Added disabled and accessibilityState props to the decrease button that dynamically disable it when the counter value equals 0:

<Button
  title="-"
  disabled={title === 0}
  accessibilityState={{disabled: title === 0}}
  accessibilityLabel={`Decrease counter. Current value is ${title}`}
  onPress={() => {
    const newValue = Math.max(0, title - 1);
    setTitle(newValue);
    announceCounterChange(newValue, 'decreased');
  }}
/>

Changes:

• NewArch/src/examples/ButtonExamplePage.tsx: Added disabled={title === 0} and accessibilityState={{disabled: title === 0}} to the decrease button

Screenshots

Before: Decrease button appears active even when counter is 0
After: Decrease button is properly disabled (grayed out) when counter is 0

disable.mp4

Testing

1. Navigate to All Samples > Button
2. Observe the counter button example
3. When counter is at 0, the decrease (-) button should now appear disabled (grayed out)
4. The button should not respond to clicks when disabled
5. Screen readers should announce the button as disabled

Microsoft Reviewers: Open in CodeFlow

[Nitin-100]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).