docs(color-field): enhance README with detailed usage, options, and a…

[blunteshwar]

Overview

This PR reorganizes the color-field README.md to follow the established documentation standards structure, improving accessibility and consistency with other components.

Changes Made

Structure Reorganization

• Overview: Replaced "Description" with "Overview" section and expanded component description to better explain its role within color selection interfaces
• Usage: Updated import code blocks with proper language syntax highlighting (bash, javascript)
• Anatomy: Added new section describing the component's key parts and basic usage
• Options: Created comprehensive properties documentation including:
  • Size variations with multiple format examples
  • View color property behavior
  • Quiet variant functionality
• States: Reorganized existing content into proper states section:
  • Standard state
  • Disabled state
  • Read-only state
  • Invalid state
• Behaviors: Added new section documenting:
  • Color format support (hex, rgb, rgba, hsl, hsv, named colors) with examples
  • Input and change event handling for developers
• Accessibility: Added comprehensive new section with:
  • Keyboard support explanation
  • Screen reader integration details
  • Focus management information
  • Color contrast considerations
  • ARIA attribute usage examples

Content Improvements

• Enhanced component description to clarify its relationship with color selection workflows
• Added documentation for previously undocumented properties and states
• Provided comprehensive color format examples (hex, rgb, rgba, hsl, named colors)
• Added JavaScript code examples for programmatic interaction
• Included validation feedback documentation
• Documented accessibility features that were previously missing

Testing

• Verified all existing content is preserved
• Confirmed proper markdown syntax and formatting
• Checked consistency with documentation standards
• Reviewed accessibility improvements

Related Documentation

• Follows structure outlined in Adding a Component Documentation Standards
• Maintains consistency with accordion, button, meter, progress bar, progress circle, and tooltip README files
• References PR #5663 (color-handle documentation reorganization) as a model

This reorganization makes the color-field documentation more accessible, easier to navigate, and consistent with the established documentation standards across the Spectrum Web Components library.

[changeset-bot]

⚠️ No Changeset found

Latest commit: b97fbc2

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

[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-5701

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...

[nikkimk]

I love the work you put into the Accessibility section.

I had one question about whether quiet is a state or more of an option.

And I added suggestions to wrap the color formats into tabs rather than bullets for easier reading.

[nikkimk]

Should we move Quiet to the Options section?

[blunteshwar]

Done!

[nikkimk]

Should we move Quiet section here?

[blunteshwar]

Done!

[nikkimk]

One small nit suggestion, that you can choose to commit or ignore, but otherwise LGTM.