Testing: button refactor

[Rajdeepc]

Refactor: Enhanced Accessibility, Static Types, and Disabled Reason Tooltip for Button

Overview

This PR introduces a set of improvements and refactors to the <sp-button> component and its base class, focused on accessibility, developer ergonomics, and user experience. The changes aim to make button states clearer and more robust, particularly around disabled and pending states.

---

Changes Done

1. Type Improvements

• Appended as const to VALID_VARIANTS and VALID_STATIC_COLORS to enforce stronger static typing for these value arrays.

2. Accessibility Enhancements

• The button now sets role="button" by default if not already present.
• The aria-disabled attribute is dynamically updated in response to the button's disabled state.
• The aria-busy attribute is dynamically updated when the button is in a pending state.

3. Pending State Handling

• The pending property is now consistently overridden in the Button class and handled with the proper decorator for reflection.
• The click() method now prevents interaction when the button is either pending or disabled.

4. Improved Disabled State Logic

• Added a new disabledReason property. When set, the button will:
  • Use aria-disabled (instead of the native disabled attribute), keeping the button focusable for better accessibility.
  • Display a tooltip (sp-tooltip) with the provided reason when hovered.
• Introduced isDisabled getter to centralize logic for determining if the button is disabled (either via disabled or disabledReason).

5. Tooltip Integration

• When disabledReason is present, an sp-tooltip is rendered above the button with the provided message to communicate to users why the button is disabled.

6. General Cleanups

• Refactored and streamlined attribute reflection and property overrides.
• Updated event handlers to use the new isDisabled logic.
• Ensured all relevant ARIA attributes are updated in lifecycle hooks.

---

Problem Solved

These changes address several usability and accessibility issues:

• Accessibility: By updating ARIA attributes (aria-disabled, aria-busy) and always providing a role, screen readers and assistive technologies can better interpret the button’s state.
• User Feedback: The new disabledReason property allows developers to communicate to users why an action is unavailable, improving user experience through contextual tooltips.
• Developer Experience: The use of as const and improved property typing results in safer, more predictable code, reducing potential bugs around allowed values for variants and static colors.
• Consistency: Centralized logic for disabled and pending states ensures consistent behavior and easier maintenance.

Screenshots (if appropriate)

---

Author's checklist

• I have read the CONTRIBUTING and PULL_REQUESTS documents.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
• I have added automated tests to cover my changes.
• I have included a well-written changeset if my change needs to be published.
• I have included updated documentation if my change required it.

---

Reviewer's checklist

• Includes a Github Issue with appropriate flag or Jira ticket number without a link
• Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
• Automated tests cover all use cases and follow best practices for writing
• Validated on all supported browsers
• All VRTs are approved before the author can update Golden Hash

Manual review test cases

• Descriptive Test Statement

  1. Go here
  2. Do this action
  3. Expect this result

• Descriptive Test Statement

  1. Go here
  2. Do this action
  3. Expect this result

Device review

• Did it pass in Desktop?
• Did it pass in (emulated) Mobile?
• Did it pass in (emulated) iPad?

[github-actions]

📚 Branch Preview

• Documentation Site
• Storybook

🔍 Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

Deployed to Azure Blob Storage: pr-5587

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

[github-actions]

Tachometer results

Currently, no packages are changed by this PR...

[changeset-bot]

⚠️ No Changeset found

Latest commit: 63ff9b7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[Rajdeepc]

This can be configured.